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

Re: [css3-flexbox] Painting order

From: Anton Prowse <prowse@moonhenge.net>
Date: Fri, 20 Jul 2012 12:26:39 +0200
Message-ID: <5009325F.30504@moonhenge.net>
To: "www-style@w3.org" <www-style@w3.org>
CC: Morten Stenshorne <mstensho@opera.com>, "Tab Atkins Jr." <jackalmage@gmail.com>
On 20/07/2012 12:06, Anton Prowse wrote:
> On 20/07/2012 11:57, Anton Prowse wrote:
>> On 20/07/2012 11:14, Morten Stenshorne wrote:
>>> Anton Prowse <prowse@moonhenge.net> writes:
>>>> On 20/07/2012 09:35, Morten Stenshorne wrote:
>>>>> "Tab Atkins Jr." <jackalmage@gmail.com> writes (Wed, 27 Jun 2012
>>>>> 09:10:47 -0700):
>>>>>> On Wed, Jun 27, 2012 at 6:34 AM, Morten Stenshorne
>>>>>> <mstensho@opera.com> wrote:
>>>>>>> Morten Stenshorne <mstensho@opera.com> writes:
>>>>>>>> "Tab Atkins Jr." <jackalmage@gmail.com> writes:
>>>>>>>>> On Mon, Jun 25, 2012 at 1:35 AM, Morten Stenshorne
>>>>>>>>> <mstensho@opera.com> wrote:
>>>>>>>>>> fantasai <fantasai.lists@inkedblade.net> writes (in "[CSSWG]
>>>>>>>>>> Minutes and Resolutions 2012-06-20"):
>>>>>>>>>>>     - RESOLVED: order affects painting order
>>>>>>>>>> Will 'flex-direction' and 'align-content' also affect painting
>>>>>>>>>> order
>>>>>>>>>> then?
>>>>>>>>> No, neither have any effect on painting order.
>>>>>>>> Makes sense. Can you update the spec?
>>>>>>> But then again I can't really say I'm convinced that it's a good
>>>>>>> thing
>>>>>>> that 'order' affects painting order at all.
>>>>>>>      <div style="display:flex;">
>>>>>>>        <div id="a" style="order:3;">a</div>
>>>>>>>        <div id="b" style="position:relative; order:2;">b</div>
>>>>>>>        <div id="c" style="position:relative;">c</div>
>>>>>>>        <div id="d" style="position:relative; z-index:-1;
>>>>>>> order:4;">d</div>
>>>>>>>      </div>
>>>>>>> Painting order will here be d-a-c-b? So we have two levels of paint
>>>>>>> ordering? Isn't this just confusing?
>>>>>> Yes, that's the right painting order.  This correctly matches the
>>>>>> visual order, as if you had written it in the order c-b-a-d.
>>>>>>> (doesn't sound very pleasant to implement, either)
>>>>>> It was trivial on our side, as we make 'order' literally reorder the
>>>>>> box tree (iiuc).
>>>>> What about this one:
>>>>>     <div style="display:flex;">
>>>>>       <div id="item1" style="position:relative; order:1;
>>>>> margin-left:-5px; border:2px solid blue; background:lime;">
>>>>>         xxx
>>>>>         <div id="abspos" style="position:absolute; margin-top:-5px;
>>>>> border:2px solid violet; background:cyan;">
>>>>>     yyy
>>>>>         </div>
>>>>>       </div>
>>>>>       <div id="item2" style="position:relative; margin-left:-5px;
>>>>> border:2px solid red; background:yellow;">
>>>>>         zzz
>>>>>       </div>
>>>>>     </div>
>>>>> Three positioned elements. One stacking context. In what order are
>>>>> they
>>>>> painted?
>>>> You treat order as if it literally reorders the box tree.  So your
>>>> putting order:1 on item1 (which is already in the first position)
>>>> achieves nothing whatsoever,
>>> ???
>>> Initial value of 'order' is 0, so reordering will certainly occur.
>> My bad; I thought it was 1.  I still think it should be 1, since I don't
>> think authors would expect reordering in the example you give.  (Only
>> geeks count from 0!)
>> So the painting order would be item2 followed by item1 as per the
>> current ED; but I would prefer it to be item1 followed by item2.  And I
>> would change the value-set of 'order' to be the positive integers, which
>> is also more consistent with how tabindex works (where 0 doesn't
>> represent an order but rather has a different meaning completely).
> Hmm, neither with the ED nor with my suggestion can you bring anything
> to first position without moving everything else through setting order:2
> on them; and it's completely impossible to move something to first
> position if there are anonymous flex items. :-(
> Perhaps we should allow 0 and make the initial value 1.  On the other
> hand, perhaps that's simply too abstract, and we can live with the
> limitation.

Oh, turns out that 'order' is <number> not non-negative integer or 
whatever I thought it was.  So moving stuff to first position is easy in 
the ED, although unintuitive if you haven't thought carefully enough 
about how that property is defined: you set your item to order:-1 or 
another negative number with sufficiently large magnitude.

And my suggestion for making the initial value 1 doesn't solve the issue 
that I was trying to address, because of course if you'd set order:1 on 
the second item it wouldn't move that item to first position.

In fact, the issue I was trying to address is a non-issue.  I think the 
ED is fine as it is.  Authors (and me!) will just have to learn that 
'order' is more like z-index in that it represents grouping.  It doesn't 
represent ordinal position even in minimal examples like the one you 

Sorry for all the noise!

Anton Prowse
Received on Friday, 20 July 2012 10:27:15 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:19 UTC