w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.52k stars 673 forks source link

[css-flexbox] Allow fractions for order #2202

Open caub opened 6 years ago

caub commented 6 years ago

To allow more complex ordering, for example using Stern-Brocot trees

<ol style="display: flex;flex-direction: column">
  <li style="order: 3 / 2">33333</li>
  <li style="order: 1 / 2">1111</li>
  <li style="order: 2 / 2">22222</li>
</ol>

https://jsfiddle.net/crl/gvffk5c4/1/

tabatkins commented 6 years ago

I'm not sure what the reference to S-B trees is about. Can you elaborate?

I presume the underlying desire is the ability to order some child C between two other children A and B, without having to make sure that A and B's order values are separated by more than 1? (That is, is A has order: 1; and B has order: 2, there's currently no way to put C between the two of them reliably without just changing A and/or B's order values.)

If that's the case, I agree with the desire, and would like order (and z-index, for that matter) to accept a list of values, and resolve them in lexicographic order. That way, given A and B as set up above, you could give C an order: 1 1 or order: 2 -1 to either place it after A or before B (which are implicitly specifying 0 for later indexes).

caub commented 6 years ago

Thanks, yes, a 2-values order would be the solution to those problems (sortable lists)

You propose an order by first, then second (order: 3 4 < order: 3 5 < order: 4 -1 < order: 4 < order: 4 1)

I thought more about a fractional order (order: 3 4 < order: 1 1 < order: 2 1) (that's how a S-B tree would work, it can find an intermediate fraction between 2 arbitrary fractions)

The list need to be re-balanced at some point (in first case when 2 items are too close (2nd value consecutive) so it can come fast, in second case when numerator or denom is > 1e9 for example)

tabatkins commented 6 years ago

Rather, it's an N-valued order - you can extend the list as long as you want if you need to drill down more finely into the ordering decisions.

Nadya678 commented 6 years ago

additionally the effect is possible to meet via use of order:0, order:100, order:200, If you want to insert any child between the second and three you can use order:150.

caub commented 6 years ago

@Nadya678 yes right, but needs re-balancing after an update (simpler to use order: 2, order: 4, order: 6, then allow an item to move, and then re-balance the whole list)

I also wonder if order: 1 -1 is before order: 1

With postgresql, it's after, the ordering of INT[] is as follows:

1
1 -2
1 -2 -2
1 -2 2
1 1
1 1 -9 8
1 1 1
1 1 1 -2
1 2
2
2 -1
2 1
2 2
3
tabatkins commented 6 years ago

Yeah, the whole point of this is to avoid people needing to pre-separate their order values. People do that today with z-index and it's ridiculous and shouldn't be necessary.

I also wonder if order: 1 -1 is before order: 1

Yes, it's a lexicographic order, with missing indexes filled with zeros. You compare each index and sort on the first one that's different. So, order: 1; is the same as order: 1 0, and order: 1 -1 comes before that.

jonjohnjohnson commented 6 years ago

Slightly on topic, I wonder if keywords like start or end could also be useful alias for forcing an element to the beginning or end of the sequence (also to the front/back for z-index, like +/- infinity?) even within @tabatkins suggestion of lexicographic order, order: 2 start would force an element to being first in the sequence of elements that have their first index of order set to 2? And if two elements are both set to order:start then the document sequence takes precedence?