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

On 8/06/2011 3:50 PM, fantasai wrote:
> On 06/08/2011 01:06 PM, Andrew Fedoniouk wrote:
>>
>> Agree in general on this but I think we are missing some point in the
>> discussion.
>>
>> First of all I have to say that for three or so years using flexes, in
>> particular flow:horizontal, I did not get any requests
>> to provide anything close to box-direction.
>>
>> flow:horizontal follows directionality of UI and it is perfectly enough
>> so far.
>>
>> If you need non-default order of elements then it usually happens when
>> a) you have known number of children and b) most
>> probably you will also need to replace elements in non-consecutive
>> order. In this case you can use explicit, templated
>> definition:
>>
>> block-flow: 4-3-2-1; // or block-flow: 1-3-2-4; // or even
>> block-flow: 1-2-2-3
>> 1-4-5-5;
>> I would insist that "template" is a natural part of flex module. It
>> simplifies layout definitions a lot.
>>
>> OK, back to flow:horizontal and flow:horizontal-wrap...
>> These layouts are used when:
>>
>> 1) Number of children is not known upfront and/or 2) the number can
>> change dynamically.
>>
>> Examples: headers/toolbars, footers/statusbars, panels with splitters
>> between them, etc.
>>
>> Having visual flow to run in opposite direction from DOM order is
>> a source of permanent problems (who implemented LTR/RTL text editing
>> will understand me here).
>>
>> If we really want to provide explicit definition of order of blocks
>> then it can be done as:
>> block-flow: horizontal; /* uses default directionality,
>> @dir->direction */
>> block-flow: horizontal-ltr; /* left-to-right */
>> block-flow: horizontal-rtl; /* right-to-left */
>>
>> block-flow: vertical; /* uses default directionality: ttb */
>> block-flow: vertical-ttb; /* top-to-bottom */
>> block-flow: vertical-btt; /* bottom-to-top */
>>
>> Explicit declaration as 'horizontal-ltr' is significantly more reliable
>> than anything like 'direction:horizontal reverse'
>
> While I agree that we should have a way to explicitly say 'horizontal-ltr',
> I'm not so certain that logical backwardness isn't needed. I can't think
> of a use case for backwards ordering in the inline dimension, but I can
> see backwards ordering being useful in the block direction when you have
> columns.


(Note: These questions and concepts are not directed at Fantasai since 
from what I have seen, she can grasp what base direction really is)


I agree. May I propose 'horizontal-base'. I ask these questions

  1. What really is this horizontal "concept"?

  2. How does this horizontal "concept" become something
     that progresses downwards.


Some notion of this "concept" is found in CSS 2.1 [1].

   | In general, the left edge of a line box touches
   | the left edge of its containing block and the
   | right edge touches the right edge of its containing
   | block.


Another part which is really interesting.

   | When an inline box exceeds the width of a line
   | box, it is split into several boxes and these boxes
   | are distributed across several line boxes. If an
   | inline box cannot be split (e.g., if the inline box
   | contains a single character, or language specific
   | word breaking rules disallow a break within the
   | inline box, or if the inline box is affected by a
   | white-space value of nowrap or pre), then the
   | inline box overflows the line box.


The last part is correct if the 'line box' is considered to be confined 
to the width of the 'containing block' or 'initial containing block'. 
Below are two test that show that overflow initially happens 
horizontally (or vertically for vertical writing modes) and the notion 
that something can flow downwards (new lines or blocks) or even overflow 
downwards (accessible via a scroll bar) is a secondary layout process of 
a UI.


<!doctype html>
<div 
lang="en">lefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttorightlefttoright</div>


<!doctype html>
<style type="text/css">
html { direction: rtl }
</style>
<div 
lang="iw">מימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימי×
Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ</div>


To allow correct layout when CSS is disabled, RTL authors should not 
misused CSS 'direction' but instead use the attribute 'dir' <html 
dir="rtl">. Something like the below may work where inline boxes are 
broken and flow downwards in LTR but anything overflowing is hidden.

<!doctype html>
<style type="text/css">
div { direction: rtl }
</style>
<div 
lang="iw">מימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימיןמימי×
Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ×ž×™×ž×™×Ÿ</div>


>> By the way, you used keyword 'reverse'. It is 'reverse' to what actually?
>> I mean what exactly defines normal, non-reversed order then, the
>> 'direction'?
>
> Yes.
>
> ~fantasai


If the direction (ordering) is something going downward (sidewards for 
vertical writing modes), no. If direction is base direction, yes.


[1] 
http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#inline-formatting



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Wednesday, 8 June 2011 07:55:22 UTC