[css-align] logical alignment and bidi / orthogonal flows

Tab and I were discussing the interpretation of 'start' and 'end' on
justify-self vs. justify-content vs. justify-items and came up with
an issue wrt what happens when the container and the child have
different writing modes.

For example, imagine an RTL item inside a flexbox or grid that is LTR.
If 'align-items' is set to 'start' on the flexbox, all LTR items will
align to the left edge, because their 'align-self' values look up to
their parent's 'align-items' value. For the RTL item, it will also
acquire 'start' alignment: the issue is whether it will align with
all the items on the left side, or whether it will follow its own
directionality and align to the right.

Our conclusion is that these keywords should be container-focussed,
that is, justify-content/justify-items resolve against the element
itself, and justify-self resolves against the parent.

This keeps the values of justify-items (on the parent) and justify-self
(on the child), which both control the child, consistent. (It's also
consistent with how logical properties work in orthogonal flows.)

Flexbox avoids this issue by using 'flex-start' and 'flex-end', which
are defined to be relative to the 'flex-flow'. Matching up 'start'
and 'end' in this way is also consistent with that container-focussed
approach as well.

It does feel a little weird for the more document-centric uses of
block layout, but it makes a lot of sense for the layout-centric Grid
and Flexbox layout models.

So this is mostly a heads-up, and a request for feedback if anyone
has concerns or comments. We'll be updating CSS3 Box Alignment
to clarify this point accordingly.

We're also proposing to add 'self-start' and 'self-end' values to
the align/justify-self properties, so that if an author does want
to set alignment relative to the item's own writing mode, it can
be done as well.

~fantasai and TJ

Received on Thursday, 11 April 2013 20:01:15 UTC