Re: [csswg-drafts] [css-flexbox][css-grid] Providing authors with a method of opting into following the visual order, rather than logical order (#7387)

The CSS Working Group just discussed `[css-flexbox][css-grid] Providing authors with a method of opting into following the visual order, rather than logical order`.

<details><summary>The full IRC log of that discussion</summary>
&lt;emeyer> rachelandrew: The link in the minutes goes to a comment from the F2F<br>
&lt;emeyer> …I’m proposed a simplified approach for authors to follow the reading order rather than the document order<br>
&lt;emeyer> …We’re suggesting to remove the reading-order integer, written up in #8589<br>
&lt;fantasai> -> https://github.com/w3c/csswg-drafts/issues/8589<br>
&lt;emeyer> …I got some author feedback and this seems to be good<br>
&lt;TabAtkins> q+<br>
&lt;emilio> q+<br>
&lt;emeyer> …We’d keep reading-order: auto and add reading-order: items<br>
&lt;Rossen_> q<br>
&lt;fantasai> s/reading-order: items/reading-order-items property/<br>
&lt;emeyer> …The latter would let you explain your intention for reading order<br>
&lt;rachelandrew> https://github.com/w3c/csswg-drafts/issues/8589<br>
&lt;rachelandrew> https://developer.chrome.com/blog/reading-order/#proposed-solution<br>
&lt;emeyer> jensimmons: Can you summarize where we are now?  How would this work?<br>
&lt;emeyer> rachelandrew: If you have a randomized layout, like dense packing, people usually want the browser to follow the layout rather than the source order<br>
&lt;emeyer> …This happens with masonry as well<br>
&lt;PaulG_> Q+<br>
&lt;emeyer> …With auto, try to follow the reading order rather than the DOM order<br>
&lt;emeyer> …For things that are non-randomized, pretty much everything else, like grid and flex layouts with obvious order, the idea there is to keep the reading order auto on the items, but on the parent you do reading-order: items<br>
&lt;emeyer> …So if you’re reversing things in flex, you might say reading-order: items flex-flow<br>
&lt;emeyer> …In grid, you could say reading-order: items grid-row<br>
&lt;fantasai> s/reading-order: items/reading-order-items:/<br>
&lt;fantasai> s/reading-order: items/reading-order-items:/<br>
&lt;emeyer> …We realized even if you’ve laid out the items, it’s not always obvious what the correct reading order should be<br>
&lt;emeyer> …We think this should solve both these cases<br>
&lt;Rossen_> q?<br>
&lt;Rossen_> q+<br>
&lt;Rossen_> ack TabAtkins<br>
&lt;lea> Coming to this late, but what are the use cases beyond a) reading order = document order b) reading order = visual order. The integer syntax seems very low-level for the vast majority of cases to me, but again, I'm probably missing a lot as I haven't followed this<br>
&lt;emeyer> TabAtkins: I think the presence of reading-order: auto is a leftover from reading-order: &lt;integer><br>
&lt;emeyer> …I think we can drop that and rely on reading-order-items, is that right?<br>
&lt;emeyer> rachelandrew: I think so, yeah<br>
&lt;emeyer> TabAtkins: Presviously everything was auto by default undless overridden with an integer<br>
&lt;florian> q?<br>
&lt;florian> q+<br>
&lt;jensimmons> q+<br>
&lt;emeyer> …Now that we don’t have an everything could be reading-order-items<br>
&lt;emeyer> rachelandrew: Yeah, I’m keen to remove things that were canned<br>
&lt;iank_> +1 to tab<br>
&lt;emeyer> emilio: I was going to make that same point<br>
&lt;Rossen_> ack emeyer<br>
&lt;emeyer> …But this also seems to conflict with making displayed items focusable<br>
&lt;Rossen_> ack emilio<br>
&lt;emeyer> …I think that needs some more thought<br>
&lt;fantasai> s/displayed items/'display: contents'/<br>
&lt;emeyer> Rossen_: Is this in the presence of reading order??<br>
&lt;emeyer> emilio: Yeah, you need to define the order display: content elements appear<br>
&lt;emeyer> rachelandrew: I think for any of these methods, we probably need an issue for this<br>
&lt;emeyer> …NO matter what we do here, that’s going to be a problem<br>
&lt;emeyer> Rossen_: Please open an issue for this and link it to this one<br>
&lt;emeyer> emilio: Will do<br>
&lt;emeyer> …This is pretty blocking for me<br>
&lt;Rossen_> ack PaulG_<br>
&lt;emeyer> PaulG_: A question about RTL<br>
&lt;emeyer> …Is there a plan to support RTL for reading order?<br>
&lt;emeyer> rachelandrew: I don’t think this would change that, that would be the flow order<br>
&lt;emeyer> …This shouldn’t affect that<br>
&lt;emeyer> Rossen_: Agreed, we’re talking about the flex or grid directoin<br>
&lt;emeyer> rachelandrew: This follows whatever the flow direction is<br>
&lt;Rossen_> q?<br>
&lt;emeyer> PaulG_: My main concern was in random situations, where the assumption seems to be LTR<br>
&lt;Rossen_> q-<br>
&lt;emeyer> rachelandrew: If you’re in a flex layout, the default is LTR in an LTR language, and RRTL in RTL languages<br>
&lt;emeyer> …So I don’t think this would be an issue as presently laid out<br>
&lt;emeyer> fantasai: What is the value space of this property?  In the writeups I found, there were examples of values, but I didn’t see a definition<br>
&lt;emeyer> rachelandrew: We haven’t written a spec yet, we’re trying to see whether we could achieve what authors want without needing to explicitly define each item in the order<br>
&lt;TabAtkins> I think proposal is `readering-order-items: normal | flex [ visual | flow ] | grid [ rows | columns ]`<br>
&lt;fantasai> ok, is that written anywhere other than your IRC comment? :)<br>
&lt;TabAtkins> nah, this is distilling the examples<br>
&lt;emeyer> …There was a bunch of suggestions in the original #8589, but I don’t think we’ve written everything out, which we’d need to do if this is the approach we want to take<br>
&lt;Rossen_> ack fantasai<br>
&lt;Zakim> fantasai, you wanted to ask about the value space<br>
&lt;jensimmons> q-<br>
&lt;emeyer> fantasai: It will be easier to understand the proposal if there was a little more formal writeup<br>
&lt;emeyer> …Second question, how does this interact with the `order` property?<br>
&lt;emeyer> rachelandrew: I believe we intend to follow that property if there’s an explicit `order` value<br>
&lt;emeyer> TabAtkins: This would change the tiebreaker behavior<br>
&lt;emeyer> fantasai: Right now, `order` does NOT affect reading order, its purpose is to allow breaking reading order from layout order<br>
&lt;TabAtkins> oh wait i think i got confused<br>
&lt;emeyer> …Are you intending to break that?<br>
&lt;TabAtkins> never mind, order just changes layout, and then reading-order keys into that layout<br>
&lt;Rossen_> Zakim, close queue<br>
&lt;Zakim> ok, Rossen_, the speaker queue is closed<br>
&lt;emeyer> …Are we using keywords that are going to implicitly change that behavior?<br>
&lt;emeyer> rachelandrew: I think if you set the `order`, why would you use `reading-order`?  Using `order` diverges on purpose.<br>
&lt;jensimmons> q+<br>
&lt;emeyer> …The only reason you use `reading-order-items` is if you want to follow the layout<br>
&lt;Rossen_> q?<br>
&lt;emilio> (filed https://github.com/w3c/csswg-drafts/issues/9230)<br>
&lt;emeyer> …You can still use `order` as it is now, and wouldn’t use `reading-order-items`<br>
&lt;emeyer> …This is when you don’t want things out of sync<br>
&lt;emeyer> …I don’t think that’s an issue<br>
&lt;iank_> +1 to Rachel<br>
&lt;emeyer> …We do need to define what happens if there’s a conflict here<br>
&lt;emeyer> jensimmons: I can imagine a use case where the DOM order is great for desktop but on mobile you use `order` to rearrange<br>
&lt;emeyer> …You might want to apply `reading-order-items` to the mobile layout to fix the accessibility<br>
&lt;emeyer> Rossen_: Let’s get to the queue and close this at half past<br>
&lt;jensimmons> q?<br>
&lt;Rossen_> ack florian<br>
&lt;fantasai> fantasai: or not, whether to match order depends on what you're doing<br>
&lt;emeyer> florian: I’m not sure here, if we only have reading-order-items, then there’s only two options: follow visual layout, or don’t<br>
&lt;emeyer> …The proposed values are all variants of “follow the visual order”<br>
&lt;emeyer> …It just depends on the direction you take in following visual order<br>
&lt;emeyer> rachelandrew: What I would say is there are things that need to be worked out with this<br>
&lt;lea> fantasai: re:order vs visual-order, what if order becomes a shorthand of both?<br>
&lt;emeyer> …What I’d like to ask is the original question, which is do we need the reading order integer?<br>
&lt;fantasai> lea, see https://drafts.csswg.org/css-display-4/#display-order<br>
&lt;emeyer> …Are there use cases that absolutely require integer?  Or can we simplify and then start to formally define how to resolve conflicts and such?<br>
&lt;fantasai> lea, but that doesn't fix the historic problem...<br>
&lt;emeyer> florian: Based on what you just said, I suspect we don’t need the interget<br>
&lt;emeyer> …I still think this is not going to be easy to define; there’s a lot of subtlety here<br>
&lt;lea> fantasai: thanks! "They are not intended (and should not be used) to apply semantic reordering operations." I'm confused, isn't semantic reordering the whole point of reading-order?<br>
&lt;emeyer> …There are a bunch of different ways you could iterate through a grid<br>
&lt;emeyer> …Not sure if we’ll only need a few values, or a whole lot of values to handle overlaps and such, or if we actually need integers<br>
&lt;fantasai> lea, e.g. don't use them for "I'm going to sort this column by last name"<br>
&lt;emeyer> Rossen_: Let’s redirect intot he issue, as there’s still quite a bit to be worked out<br>
&lt;fantasai> lea, reading order is still a _presentation order_<br>
&lt;emeyer> …Do we have enough convinction and understanding to resolve on dropping the integer value?<br>
&lt;emeyer> rachelandrew: I don’t think this is blocking, because if we drop &lt;integer> now, we could add it back later<br>
&lt;emeyer> …We could say we don’t think we need it, and be open to adding it back in<br>
&lt;TabAtkins> https://github.com/w3c/csswg-drafts/issues/8589#issuecomment-1690278747<br>
&lt;emeyer> jensimmons: I think it would be really helpful to have a document where everything’s all in one place<br>
&lt;fantasai> -> https://drafts.csswg.org/css-display-4/#display-order<br>
&lt;TabAtkins> (I think the above captures the rough draft proposal.)<br>
&lt;emeyer> fantasai: We do have a draft in the `display` spec<br>
&lt;emeyer> …I don’t want to take a resolution because I don’t understand what we’re trying to do here<br>
&lt;emeyer> Rossen_: Fair<br>
&lt;lea> fantasai: in that case, I do not understand what reading-order is, which I suspect means it will be incredibly hard to explain it to authors :/<br>
&lt;fantasai> /here/here. I would like a description of what we're trying to do, not three examples and "extrapolate what that means"/<br>
&lt;emeyer> …I think the conversation captures that we’re leaning toward not having an &lt;integer>, but once the proposal is clear we can read and take a resolution<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7387#issuecomment-1690281298 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 23 August 2023 16:35:33 UTC