That's easy to do with a fixed width in units of ems:
min-width: 15em;
max-width: 35em;
For IE 6/7, conditionally add: width: 35em; width: expression(
document.body.clientWidth >
35 * parseInt(document.body.currentStyle.fontSize)
?
"35em"
:
(document.body.clientWidth <
15 * parseInt(document.body.currentStyle.fontSize)
?
"15em"
:
"auto"
)
;
(Hope the indenting is readable.)http://www.gunlaug.no/contents/wd_additions_14.html for some caveats and other notes, in particular you can not specify a font-size at all for the body element (if you do, then do the math yourself and not in the expression).
Almost, but not quite. That adjusts the width to match the font-size. I want the other way around: adjust the font-size to match the width. (If I make my browser window wider, the text should scale up.)
Currently, this would take Javascript -- either adaptively scaling the font until the desired words-per-line is reached, or calculating what font-size would mean the existing width, whatever it is, is ~35em.
With high-res screens and/or people with vision trouble, setting a particular font size is generally a bad idea.
Supposedly 8-12 words per line is easiest for eyes to scan.
I've never seen -- but often wished for -- a fluid-width layout that automatically scales its text so that the average line in the main content has 8-12 words on it. (I often do this manually with the browser's text-zoom options.)