Re: [css3-align] The Great Alignment Bikeshed

I really like this unification attempt, and I'm looking forward for more 
such specs (something that unifies animations with transitions would be 
similarly great). In regards to naming:

  * The align- and justify- prefixes are confusing to me too, especially
    the latter. However, I understand the concerns against using
    "horizontal" and "vertical" in the name. How about using the axes in
    the naming? i.e. inline-align-* and stacking-align-* (the latter
    could just be align-*).
  * I also find "-inside" and "-outside" unintuitive. self/content
    sounds the most straightforward to me. inside/outside can mean a
    number of different things (align the element based on the outside?
    Align what's outside the element? Something else?) but self/content
    are not as prone to misinterpretation. Of course, introducing more
    inside/outside pairs in CSS helps, by forming a convention, but it
    does not change the fact that it's incomprehensible without that
    convention, which needs to be learned.
  * Also, the whole concept of "true alignment" is hard to grasp (what's
    the alternative? "false alignment"?). Not only the value should be
    something that includes "overflow" ("allow-overflow" perhaps?) but
    also the prose should use a more descriptive term too.

However, opinions (even justified ones) are pointless when the problem 
is basically a usability issue (naming is to languages/APIs what UI is 
to applications). You need to conduct some sort of usability test, which 
in that case could be to collect feedback from as many authors as 
possible, ideally without even influencing them by having them read the 
spec. Perhaps present them with the alternatives and have them speculate 
on what each property/value does. The naming that gets the more 
correct(ish) guesses is the one that's probably more intuitive. Ideally, 
present different authors with different properties, so they're not even 
influenced by the possible alternatives (but that requires a much larger 
sample). I could help with that if you want.


On 13/5/12 16:21, fantasai wrote:
> 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
>


-- 
Lea Verou (http://lea.verou.me | @LeaVerou)