Comments on CSS Flexbox

In preparation for tomorrow's call, I've read the editor's draft (9 July 2012) of the CSS Flexible Box Layout Module specification:

My overall impression is that this module will greatly simplify the design of many web applications that currently have to apply all kinds of hacks to create flexible layouts.

The biggest internationalization issue in its domain appears to be handling of the different writing directions used for different languages. The specification is clearly designed to support this; directions are specified abstractly in terms of the start and end, before and after directions of the current writing mode. I didn't see any issues with this in the normative text.

The examples, however, all seem to assume a left-to-right lines, top-to-bottom blocks writing mode. Since many readers won't be familiar with other writing modes, it would be helpful to have some examples showing the effect of given settings in other writing modes. In particular, example 5 should show the rendering of content with the different flex-flow settings at least with top-to-bottom lines, right-to-left blocks, maybe also in right-to-left lines, top-to-bottom blocks mode. Comments should be phrased first in abstract terms, as in the comment for the second code snippet in that example, not in concrete terms, as in the third code snippet. Example 12 should be changed to not equate "vertical flex container" with "flex-flow: column".

Other issues:

- Section 8.3 and 8.5 use a flex item's baseline, but don't say how that baseline is determined. CSS 2.1 defines baselines for inline tables and inline blocks, the first as the baseline of the first row of the table, the second as the baseline of its last line box in the normal flow. The latter doesn't seem likely to result in the layout shown in figure 10 in section 8.3, which seems to align based on first lines. Some clarification would be welcome.

- The markup makes the mention of "hypothetical cross size" at the end of section 9.3 the definition of the term, but I don't see an actual definition there, or anywhere else.


- Section 1.2: "None of properties" → "None of the properties".

- Section 8.2: "o r" → "or".

- Section 8.3: Stray markup makes the first "center" definition blue.

- Step 6 in section 9.3 should have a reference to section 9.7 that survives printing - links get lost.

- Section 10.1: "UAs" → "UA developers".


Received on Wednesday, 11 July 2012 04:04:33 UTC