How do you find the largest font size that won't break a given text?

Question

I'm trying to use CSS (under @media print) and JavaScript to print a one-page document with a given piece of text made as large as possible while still fitting inside a given width. The length of the text is not known beforehand, so simply using a fixed-width font is not an option.

To put it another way, I'm looking for proper resizing, so that, for example, "IIIII" would come out in a much larger font size than "WWWWW" because "I" is much skinnier than "W" in a variable-width font.

The closest I've been able to get with this is using JavaScript to try various font sizes until the clientWidth is small enough. This works well enough for screen media, but when you switch to print media, is there any guarantee that the 90 DPI I appear to get on my system (i.e., I put the margins to 0.5in either side, and for a text resized so that it fits just within that, I get about 675 for clientWidth) will be the same anywhere else? How does a browser decide what DPI to use when converting from pixel measurements? Is there any way I can access this information using JavaScript?

I would love it if this were just a CSS3 feature (font-size:max-for-width(7.5in)) but if it is, I haven't been able to find it.

Answer 1

I don't know of a way to do this in CSS. I think your best bet would be to use Javascript:

1. Put the text in a div
2. Get the dimensions of the div
3. Make the text smaller if necessary
4. Go back to step 2 until the text is small enough

Here's some sample code to detect the size of the div.

Answer 2

The CSS font-size property accepts length units that include absolute measurements in inches or centimeters:

Absolute length units are highly dependent on the output medium, and so are less useful than relative units. The following absolute units are available:

• in (inches; 1in=2.54cm)
• cm (centimeters; 1cm=10mm)
• mm (millimeters)
• pt (points; 1pt=1/72in)
• pc (picas; 1pc=12pt)

Since you don't know how many characters your text is yet, you may need to use a combination of javascript and CSS in order to dynamically set the font-size property correctly. For example, take the length of the string in characters, and divide 8.5 (assuming you're expecting US letter size paper) by the number of characters and that gives you the size in inches to set the font-size to for that chunk of text. Tested the font-size with absolute measurements in Firefox, Safari, and IE6 so it should be pretty portable. Hope that helps.

EDIT: Note that you may also need to play around with settings such as the letter-spacing property as well and experiment with what font you use, since the font-size setting isn't really the width of the letters, which will be different based on letter-spacing, and font, proportional to length. Oh, and using a monospace font helps ;)

Answer 3

Here's some code I ended up using, in case someone might find it useful. All you need to do is make the outer DIV the size you want in inches.

function make_big(id) // must be an inline element inside a block-level element
{
    var e = document.getElementById(id);
    e.style.whiteSpace = 'nowrap';
    e.style.textAlign = 'center';
    var max = e.parentNode.scrollWidth - 4; // a little padding
    e.style.fontSize = (max / 4) + 'px'; // make a guess, then we'll use the resulting ratio
    e.style.fontSize = (max / (e.scrollWidth / parseFloat(e.style.fontSize))) + 'px';
    e.style.display = 'block'; // so centering takes effect
}