48 ms·

I prefer fixed width text because it is a lot easier to read than stretched text. The article links to another that describes using fluid width to achieve simi

by russell 18y ago

I prefer fixed width text because it is a lot easier to read than stretched text. The article links to another that describes using fluid width to achieve similar results and probably works better on mobile devices. http://css-tricks.com/the-perfect-fluid-width-layout/ http://css-tricks.com/the-perfect-fluid-width-layout/

gojomo 18y ago
'Stretched' text? Do you simply mean extra-wide lines? 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.)
- russell 18y ago
  stretched means extra-wide. I agree. I prefer reading NOT to be like watching a tennis match. The link I posted above seems to be such a fluid layout, but I haven't looked closely.
- Daniel_Newby 18y ago
  "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." 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;
  - ars 18y ago
    Actually for IE6/7 do: 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 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).
  - gojomo 18y ago
    That's easy to do with a fixed width in units of ems 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.
    - Daniel_Newby 18y ago
      Newegg does that with the menus and sidebar and it pisses me off. I find the text uncomfortably small, but when I fix it their Javascript jams it back to a small size. With high-res screens and/or people with vision trouble, setting a particular font size is generally a bad idea.
      - gojomo 18y ago
        Good point; any such auto-sizing shouldn't override user zooms.
anatoli 18y ago
Definitely agree with this. There is something to be said for using liquid layouts on a site like Amazon, where you have product listings next to each other — it's useful to have more space. But it's just plain wrong to have a liquid layout on a site like Wikipedia, makes it a chore to read the thing, or just any other text-based site (brand site, blog, etc.) I'm on a 24" iMac and my browser window is around 1200px, so I prefer not to have to cover two A4s side-to-side when reading.

by russell 18y ago

gojomo 18y ago

'Stretched' text? Do you simply mean extra-wide lines? 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.)

russell 18y ago
stretched means extra-wide. I agree. I prefer reading NOT to be like watching a tennis match. The link I posted above seems to be such a fluid layout, but I haven't looked closely.
Daniel_Newby 18y ago
"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." 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;
- ars 18y ago
  Actually for IE6/7 do: 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 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).
- gojomo 18y ago
  That's easy to do with a fixed width in units of ems 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.
  - Daniel_Newby 18y ago
    Newegg does that with the menus and sidebar and it pisses me off. I find the text uncomfortably small, but when I fix it their Javascript jams it back to a small size. With high-res screens and/or people with vision trouble, setting a particular font size is generally a bad idea.
    - gojomo 18y ago
      Good point; any such auto-sizing shouldn't override user zooms.

anatoli 18y ago

Definitely agree with this. There is something to be said for using liquid layouts on a site like Amazon, where you have product listings next to each other — it's useful to have more space. But it's just plain wrong to have a liquid layout on a site like Wikipedia, makes it a chore to read the thing, or just any other text-based site (brand site, blog, etc.) I'm on a 24" iMac and my browser window is around 1200px, so I prefer not to have to cover two A4s side-to-side when reading.