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

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 }