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

I thought I'd add some examples here as to how `reading-order` might behave from the point of view of the different use cases authors have. This is based on my understanding after our break discussion at TPAC.

**Example 1: The layout uses `grid-auto-flow: dense`**

In this case, using dense packing indicates that the elements inside this layout do not have a defined order. The grid items should have `reading-order: auto`, and the reading order will then follow the grid-modified order that is created by the dense packing.

**Example 2: To create the optimal reading order at different breakpoints, the author uses media queries to change the reading order of elements at one or more breakpoints.**

Within media queries, in addition to changing where items sit on the grid, the author will add the `reading-order` property to each grid item, with an integer indicating the reading order of that item at that breakpoint. When developing such a layout, the author should create a canonical source order that makes the most sense if the document were read with no CSS. They will then only need to add `reading-order` to grid items in presentations of the layout where reordering happens.

**Example 3: The layout is being created by a WYSIWYG editor that allows people to create a layout visually.**

The spec should clearly define that UAs used to create such layouts are non-conforming if they use `reading-order` to avoid needing to re-order the source. As with an author creating such a layout manually, the UA should create a canonical source order, and re-order the underlying HTML to match it. It can then enable authors to create other presentations of the content, by using `reading-order`.



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


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

Received on Thursday, 15 September 2022 23:32:05 UTC