[css3-flexbox][css3-align] directional keywords

Tab and I were assigned the task of coming to consensus on the names
of the directional alignment values, specifically the issue summarized
here: http://wiki.csswg.org/topics/start-end-before-after-align

See thread: http://lists.w3.org/Archives/Public/www-style/2012May/0556.html

The competing proposals were:
   A) Use start/end in for both main-axis and cross-axis alignment
   B) Use start/end for main-axis and head/foot for cross-axis

The problems are
   A) Using start/end in two dimensions violates the idea that
      start/end/head/foot are a set of flow-relative logical
      directions with start/end in one dimension and head/foot
      in the orthogonal dimension
   B) Using the flow-relative terms for flexbox is confusing
      because the terms are writing-mode-relative everywhere
      else, and here they would be flex-flow relative, meaning
      head/foot might be operating in the inline axis instead
      of the block axis.

Phil brought up a confusing example during the call that wasn't
resolved by either proposal:
   - Suppose I use 'margin-head: 10px' to style the flex container
   - The syntax to align items to that side of the box is
     'justify-content: start'

In our discussions, Tab and I found an even worse example:
   - Suppose I use 'flex-flow: row-reverse'
   - The syntax I use to align items to the start side of the box
     is 'justify-content: end'.
Yes, by using start/end for alignment, we'd have situations where
'start' means "align to the end".

So by the powers delegated to us by the CSSWG[1], Tab and I have
RESOLVED:

   * The 'start' and 'end' values of the flex alignment properties
     will be renamed to 'flex-start' and 'flex-end', to make it
     clear that they are flex-flow relative, not writing-mode relative.

   * In layout models other than Flexbox, 'flex-start' will
     degrade to the writing-mode relative 'start' or 'head',
     whichever is in the appropriate dimension; likewise
     'flex-end' will degrade to 'end' or 'foot' as appropriate.

   * CSS3 Box Alignment will introduce 'start'/'end' as writing-mode
     relative values for 'justify-*', and 'head'/'foot' as writing-mode
     relative values for 'align-*'.

   * When applied to the flex layout model, 'start' and 'head' will be
     folded together, representing the 'start' or 'head' side, whichever
     is in the appropriate dimension. Likewise with 'end' and 'foot'.
     This will provide writing-mode-relative alignment for Flexbox.

We hope this satisfies everyone's concerns!

[1] http://lists.w3.org/Archives/Public/www-style/2012May/1149.html

~fantasai

Received on Wednesday, 30 May 2012 22:18:36 UTC