Re: [css3-flexbox] getting multiline flexbox back into the spec

On Tue, Jul 26, 2011 at 10:19 AM, fantasai
<fantasai.lists@inkedblade.net> wrote:
> On 07/25/2011 11:46 AM, Tab Atkins Jr. wrote:
>>
>> Here's a slightly different suggestion inspired by something Shane
>> worked out.  This one avoids any possible confusion with invalid
>> combinations, and I think is easier to read:
>>
>> flex-direction:<orientation>  [<horizontal-dir>  <vertical-dir>?]?
>> <orientation>  = _rows_ | columns | horizontal | vertical
>> <horizontal-dir>  = ltr | rtl | _forward_ | reverse
>> <vertical-dir>  = ttb | btt | _forward_ | reverse
>>
>> The first keyword, which is required, gives the general orientation -
>> the first two are writing-mode dependent, the latter two are physical.
>>  It specifies the axis on which the flexbox items will be laid out;
>> lines will be stacked in the opposite axis.
>>
>> The second and third keywords, which are optional, specify,
>> specifically, the direction in the (physical) horizontal axis and the
>> vertical axis.  By doing it this way, you avoid any of the "mixing
>> physical and logical" confusion - it's perfectly well-defined and easy
>> to mix them, since you're specifically saying "use the logical
>> direction in the horizontal axis" or whatever.
>
> Actually, you're still making a mess. Even if it is a well-defined mess.
>
>  flex-direction: rows forward reverse;
>
> This will go forwards on the main axis if the writing mode is horizonal,
> and backwards on the main axis of the writing mode is vertical. That
> doesn't make any sense.

Ah, I had a glimmering that I'd run into a problem like that, but I
didn't give it enough thought.  Thanks for pointing it out.

Do we have use-cases for mixing physical and logical directions?  We
want to use logical directions for things like an ltr/rtl horizontal
bar, but if this was embedded in a japanese page I suspect we'd want
it to go vertical.  If we stop trying to mix them, then this gets way
simpler:

flex-direction: [ [ ltr | rtl ] || [ ttb | btt ] ] | [ forward | reverse ]{1,2}

If we do want to continue mixing them, then take my previous idea, and
split the syntax so that you specify the directions in horiz/vert
order when using a physical orientation, or main/cross when using a
logical orientation:

flex-direction: [ [rows | columns] [forward | reverse]{1,2}
                  | [horizontal | vertical] [ <horizontal-dir>
<vertical-dir>? ]? ];

But really, you, Alex, and I need to sit down with a whiteboard.

~TJ

Received on Tuesday, 26 July 2011 22:18:44 UTC