Better line widths please, and useful marginalia

[w3c]

Better line widths please, and useful marginalia

[tabatkins]

Is the body { max-width: 50em; } rule that the CSSWG uses acceptable?

[r12a]

i prefer to be able to make lines longer, when i want to, so no, i'm not a fan of widths that apply rigid limits. So for i18n articles we set a width that is ratio of the width of the window, but at 'default' browser window sizes gets about the right kind of width. See for example http://www.w3.org/International/questions/qa-css-charset
(btw, the wide margin on the left of CSS specs always makes me think the style is broken)
there's a more detailed description of this topic somewhere else, associated with Doug's initiative on line length - i'll try to remember where when i have a spare moment and drop a link here

[tabatkins]

What is a "default" browser size? I have 2 30" monitors at work, which are about 2000px wide. Anything that's "about right" for a more standard window (I guess about 1200px wide?) will be 50-60% wider on my screen.

(Note that 50em is already approximately double the "80-100 characters wide" recommendation, because that rec is too small for decent diagrams and tables.)

[r12a]

Yeah, that's why i put 'default' in quotes - i was in a hurry, and probably should have said 'average' - ie. based on the minimum width i'd expect to need to fit in most of the pages i visit these days on my desktop which have two-dimensional panel arrangements (such as Facebook). (I'm not talking about presentations on mobile devices.)

I too have a screen that's 2500 pixels wide, and occasionally it's useful to fit more characters on a line so as to synch up the vertical spread, but more often i want to actually narrow the window so that i can fit two or three windows side by side. Fixed width columns then become a pain, because they don't shrink/expand. Min width, is only better in one direction.

Basic point is, with proportional rather than fixed widths i can set the page up as i like.

btw, i don't think that diagrams and tables should be particularly relevant in setting the column width. The column width setting is about comfortable line lengths for reading. Especially in a page with a single column, tables and diagrams should be able to range across a much wider area independently, where needed.

also btw, that the article that i pointed to above actually makes use of the blank space produced by restricted width lines, for toc, etc, and side notes. It would probably be odd to have blank space all the way down a spec if that's not going to be used.

[tabatkins]

Min width, is only better in one direction.

That's the point though, isn't it? We're not worried about text getting too small - if you set your window to be very narrow, the text should obviously wrap, and it does.

The problem is text getting too wide, and setting the line length to a fraction of the screen means that wide screens still get pretty wide lines, and narrow screens get narrower-than-necessary lines. We can use MQs to make this a little better (so narrow windows can get full-width text) but it'll still be a little weird.

also btw, that the article that i pointed to above actually makes use of the blank space produced by restricted width lines, for toc, etc, and side notes. It would probably be odd to have blank space all the way down a spec if that's not going to be used.

Yeah, figuring out marginalia would be nice. Doing it well, though, is troublesome without JS. (I define "well" as "like Google Docs", where avoid overlapping but also try to stay near where they're anchored in the main text, shifting around as necessary to make that work as you focus on different ones.)

[liamquin]

On Fri, 2015-04-24 at 09:56 -0700, Tab Atkins Jr. wrote:

(Note that 50em is already approximately double the "80-100
characters wide" recommendation, because that rec is too small for
decent diagrams and tables.)

It would be better if the text width was limited to, say, 50 to 75 en
(25 to 38 em) and diagrams and tables could protrude into the margin
when needed. Overly long text lines tend to lead to errors & fatigue
(this has to some extent been measured). It can be somewhat mitigated
by setting the line spacing (approximated by CSS line height)
depending on the font and the line length. CSS doesn't currently make
that easy, but it could be done in JavaScript with a plausible
fallback, perhaps.

Wider lines => greater line spacing needed
higher x-height of font => slightly greater line spacing needed;
calc( max(3ex, 1.2em) + (width-in-em / 200)em )

might be a good approximation. Even on a 24" monitor I don't want text
that runs the whole width of the screen, but if I did, I'd need it
spaced out enough that I could read it.

---

Reply to this email directly or view it on GitHub:
#14 (comment)

[fantasai]

We've added a max-width to the body of the document. Let me know if there are additional ways to improve this by filing new issues. Thanks!