Improving readability for the HTML output format

[taophp]

I start to work on the HTML format, and I suggest some changes on the style that should improve readability. The main change is to limit the width of the p element to 33em so the maximum length of a line should be nearly 66 characters, which seems to be the best width for the main content of the page (don't remember exactly where I get this, may be on The Elements of Typographic Style Applied to the Web (recommended reading), but, in any case, I strongly agree).

Additionally, this change avoid a annoying effect of the current design (until the window is large enough): when the menu changes state (visible or not), the vertical position of the page is moving due to the width of the content, which changes with the menu. This effect occurs in another: window resizing. With the new style, this effect is avoid until the window get too thin.

BTW: I made the change in this file as it seems to me that it's the only one used only for the HTML output. I may be wrong. Correct me if required.

[crowdagger]

Yes, it's the right file!

This seems like a good idea, however I think it would make more sense to apply this to the whole #content (ie. the whole doument text) (e.g. with this patch titles still appear to the left, I don't think it's wanted(?):

)

On the other hand, i tried setting max-width directly in the #content block, but in that case when it's zoomed out it it's not center-aligned anymore.

[taophp]

Applying max-width with em units should drive some problems. Example: titles, like h1 inherit the max-width property, but, as the font-size is quite different, you may broke your design. In this case, you may prefer use rem which uses the em linked to the font-size of the body element as unit. But in this case, you must ensure that your body font size is the same as the p.

Also, problems may occur with elements which you cannot break their lines. See the pre element: long lines cannot be broken by the browser. So their content may be larger than your content max-width. There is CSS properties to manage this a way or another, but, in any case, if you have the place to display larger lines when required, why avoiding it ?

I take some time to think about this aspect of webdesign. My conclusion is that content readability in not linked to the global page design, at least regarding width and font-size. So I choose to set readable max-width (33em for main content, 22em for side content) independently for the containing elements.

Personally, titles on the left don't bother me. Do what you think about that.

But, trust me, do not try to solve typographic problems on parent of the elements where they occur. Top elements are for design. Down elements are for typography.

[crowdagger]

Yes, directly setting it in #content isn't a great idea, as it doesn't make sense to limit the width for code blocks. I suppose it should be limited for <ul> and <ol>, though, maybe <table> too. Not sure about titles (though titles that are longer than 66 characters are a bit of an edge case).

[taophp]

For <ul> and <ol>, we should prefer to limit the width on <li> ; for <table>, prefer <td> and <th>. They are the final reading block units, I think.

[crowdagger]

Oh, yes, it makes more sense for <li>. For table, I think currently the width is fixed to a percent of parent's block but maybe that should be changed (really not the feature I use the most)

[taophp]

Tables are always a problem for fixed width design. The best way to handle it, I think, is to apply as few rules as possible, and let the browser do its best. I know there is some scripts that propose things like "responsive tables", but I think this is out of the scope of Crowbook, at least for the moment.
For td and th, I think that 33em is too much. There should be many columns in a table, and the main content (from the page point-of-view) is the table it-self ; so cell content must be regarded as side content. So I recommend 22em.
To conclude about tables, my recommendations are to apply no particular rule on the table element itself (except margin:auto to center it horizontaly).
So, we got these new rules :

table{margin:auto;}
td,th{max-width:22em;}
li{max-width:33em;}

Do you want me to make a pull request for that, or will you handle this update ?

[crowdagger]

I'll handle it, I've already set it for li (and tried to work on the alignement so elements still appear roughly aligned).