[css3-align] The Great Alignment Bikeshed

So the CSSWG agreed last week to pursue a common alignment property model,
based on the "Box Alignment" proposal I posted to the list a few weeks ago.
This thread is on what names to use on each of the properties. Let's make
this quick, so we can use those names for Flexbox alignment!

   http://dev.w3.org/csswg/css3-align/

Fundamentally, we're breaking down the properties along two axes:

   * in which dimension are things being shifted? There are two:
       X) inline (main)
       Y) stacking (cross)

   * what's being aligned within what?
       A) element itself within its containing block
       B) element's contents within itself
       C) element's child items within their container

The last concept's a bit tricky: it exists due to 'flex-align', which sets
the default cross-alignment (i.e. interpretation of 'flex-item-align: auto')
for the child flex items. This is different from B), which for Flexbox aligns
the entire stack of lines within the flex container (i.e. 'flex-line-pack').
For a grid container, it would set the default alignment of each grid item
within its slot--as opposed to the alignment of the grid within the grid
element (if the grid is smaller than the grid element). The idea is to
control, as a set, all the children whose alignment container is not the
element itself, but some intermediate structure.

On to the candidates! I have collected three sets, which you can mix and
match, below. (They are also listed in the draft.)

Set 1: Box/Content/Default

    +--------X----------------Y------
  A |     box-justify      box-align
  B | content-justify  content-align
  C | default-justify  default-align


Set 2: Self/Content/Item

    +--------X----------------Y------
  A |    self-justify     self-align
  B | content-justify  content-align
  C |    item-justify     item-align


Set 3: Outside/Inside/Items

    +--------X----------------Y------
  A | justify-outside  align-outside
  B | justify-inside   align-inside
  C | justify-items    align-items

What do you think works best? Why? Do you have another suggestion?

p.s. If you want nicer typesetting of this issue, there's this overview:
   http://dev.w3.org/csswg/css3-align/#overview
Further background is available in this email, which formed the basis
for the Box Alignment draft:
   http://lists.w3.org/Archives/Public/www-style/2012Feb/0743.html

~fantasai

Received on Monday, 14 May 2012 03:56:19 UTC