W3C home > Mailing lists > Public > www-style@w3.org > May 2012

Re: [css3-align] The Great Alignment Bikeshed

From: fantasai <fantasai.lists@inkedblade.net>
Date: Tue, 22 May 2012 23:28:08 -0700
Message-ID: <4FBC8378.7080102@inkedblade.net>
To: www-style@w3.org
On 05/14/2012 12:45 PM, Tab Atkins Jr. wrote:
> On Sun, May 13, 2012 at 4:21 PM, fantasai<fantasai.lists@inkedblade.net>  wrote:
>> Set 3: Outside/Inside/Items
>>
>>    +--------X----------------Y------
>>   A | justify-outside  align-outside
>>   B | justify-inside   align-inside
>>   C | justify-items    align-items
>
> This is my favorite.
>
> For one, I value the swapped ordering.  Having "justify" and "align"
> come first makes more sense to me, given our general rules for how
> alignment works.  It also puts us slightly farther away from the
> existing text/vertical-align properties, which is good.
>
> For two, outside/inside is very difficult to confuse, especially as we
> introduce more things using the inside/outside pair.

I pinged Aaron Gustafson and Lea Verou for comments, and they
both seemed to find the inside/outside pair confusing. If we
like the inversion, though, we can add another set to the list:

Set 4: Self/Content/Items Inversion

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

I think I'm leaning towards this myself, since it seems to fit
reasonably well with the flexbox model:

Set on flex container:
   align-content   - to set distribution of flex lines
   justify-content - to set distribution of items in each flex line
   align-items     - to set (default) cross-position of items
Set on flex item:
   align-self      - to set individual cross-position of item

Another concern that was raised was that align vs. justify is very
vague. This is because flexbox has its own set of axes independent
from writing mode, and we need a term that works for both. Lea
suggested 'inline-align' and 'stacking-align'; probably we could
shorten that to 'inline-align' and 'stack-align'. It would look
like this:

Set 5: Self/Content/Items Inline/Stack

    +--------X----------------Y------
  A | inline-align-self     stack-align-self
  B | inline-align-content  stack-align-content
  C | inline-align-items    stack-align-items

~fantasai
Received on Wednesday, 23 May 2012 06:30:09 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:54 GMT