1

In an iPhone webapp I have a 50x50 square div that should contain number between 1 and 12. I want the number text to be scaled to fit the div. e.g The number twelve would likely need be scaled down because it's wider than the number 1.

The exact effect I'm looking for is the adjustSizeToFitWidth property that native iPhone text labels use.

What's the most efficient way to go about this?

  • CSS(3) - preferable because of rendering speed, but might not be possible.
  • Javascript - I've used this before, but there would be a noticeable hitch between initial load and text resizing.
  • Canvas - I know that scaling a canvas element will cause it's contents to be scalled, but can you draw text in a canvas that's sized to fit perfectly or can you only use exact font sizes?
Christian Schlensker
  • 21,708
  • 19
  • 73
  • 121
  • Possible duplicate of http://stackoverflow.com/questions/3840452/change-font-size-to-automatically-fit-divs-height-width, http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container or http://stackoverflow.com/questions/3401136/resize-font-to-fit-in-a-div-on-one-line. – Julian D. Feb 22 '12 at 23:15
  • Actually it's unique because I'm asking specifically in the context of mobile safari and I'm not dealing with the limitations of a full website that needs broader cross browser compatibility. – Christian Schlensker Feb 23 '12 at 00:27

0 Answers0