Skip to content

[css-display-4] Define 'reading-order: auto' #7387 #8257

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fantasai wants to merge 3 commits into
base: main
Choose a base branch
from
+2,119 −13
Open

[css-display-4] Define 'reading-order: auto' #7387 #8257

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6a1da23
[css-display-4] Use combinatorial keywords instead of 'reading-and-or…
fantasai Jan 19, 2023
bfd9cf6
[css-display-4] Use combinatorial keywords instead of 'reading-and-or…
fantasai Jan 19, 2023
e27ef03
[css-display-4] Define 'reading-order: auto' #7387
fantasai Dec 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
[css-display-4] Define 'reading-order: auto' #7387
  • Loading branch information
@fantasai
fantasai committed Jan 19, 2023
commit e27ef03cd77e16a3d053a09e98fbcbfc9332bce3
57 changes: 51 additions & 6 deletions css-display-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1148,8 +1148,8 @@ Reading Order: the 'reading-order' property</h3>

<pre class='propdef'>
Name: reading-order
Value: <<integer>>
Initial: 0
Value: auto | <<integer>>
Initial: auto
Applies to: all elements
Inherited: no
Computed value: specified integer
Expand All @@ -1159,10 +1159,22 @@ Reading Order: the 'reading-order' property</h3>
The 'reading-order' property controls the order in which
elements are rendered to speech
or are navigated to when using (linear) sequention navigation methods.
It takes a single <dfn value for=reading-order><<integer>></dfn> value,
which specifies which ordinal group the item belongs to.
Sibling elements are ordered starting from the lowest numbered ordinal group and going up;
elements with the same ordinal group are keep the order they appear in the source document.
This is their <dfn>reading and navigation order</dfn>.

<dl dfn-type=value dfn-for=reading-order>
<dt><dfn>auto</dfn>
<dd>
Same as ''0'' except that in [=randomizing formatting contexts=]
(which are only reasonable to apply to inherently unordered content)
the reading order is matched to the layout order.
Comment thread
Loirooriol marked this conversation as resolved.
See [[#randomizing-layout]].

<dt><dfn><<integer>></dfn>
<dd>
Specifies which ordinal group the item belongs to.
Sibling elements are ordered starting from the lowest numbered ordinal group and going up;
elements with the same ordinal group are keep the order they appear in the source document.
Copy link
Copy Markdown
Contributor

@Loirooriol Loirooriol Jan 19, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
elements with the same ordinal group are keep the order they appear in the source document.
elements with the same ordinal group are kept in the order they appear in the source document.

</dl>

The 'reading-order' property affects neither layout nor painting order
and therefore has no effect on rendering to the visual [=canvas=].
Expand All @@ -1186,6 +1198,39 @@ Reading Order: the 'reading-order' property</h3>

ISSUE: Is this the most appropriate interaction with with <code>tabindex</code>?

<h4 id="randomizing-layout">
Randomizing Layout Methods and ''reading-order: auto''</h4>

<dfn>Randomizing formatting contexts</dfn>
are formatting contexts that can indiscriminately scramble the layout order,
as listed below.
Since use of such methods indicates that the underlying order of the elements
is not important,
the UA will match the [=reading and navigation order=] of the elements
to match the layout order of their boxes as follows:

<dl>
Copy link
Copy Markdown
Contributor

@rachelandrew rachelandrew Feb 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What else will be included here? Masonry for grid seems likely. What about flex-direction: *-reverse?

Copy link
Copy Markdown
Collaborator Author

@fantasai fantasai Feb 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only randomized orders, so masonry might (does it actually randomize?) but flex-direction: *-reverse wouldn't.

<dt>''grid-auto-flow: dense''
<dd>
When ''grid-auto-flow: dense'' <a spec=css-grid-1>automatic placement</a>
changes the relative order of an item
Copy link
Copy Markdown
Contributor

@Loirooriol Loirooriol Jan 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are so many different orderings referenced around here, so the "relative order" is not much clear.

with respect to other items with ''reading-order/auto'' or ''reading-order/0'' 'reading-order'
by shifting it earlier in the grid placement order,
Copy link
Copy Markdown
Contributor

@Loirooriol Loirooriol Jan 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure I understand "grid placement order", I guess it's the order in which the items are processed during the placement algorithm, but that algorithm has multiple steps and items may be iterated in multiple of them so it's not clear.

Should this instead refer to the "grid-modified document order (with the major axis as specified by grid-auto-flow)" from the example?

then its placement in the [=reading and navigation order=] is likewise shifted.

<div class="example">
For example, [=grid items=] are laid out in a ''grid-auto-flow: column dense'' grid,
Copy link
Copy Markdown
Contributor

@Loirooriol Loirooriol Jan 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
For example, [=grid items=] are laid out in a ''grid-auto-flow: column dense'' grid,
For example, when [=grid items=] are laid out in a ''grid-auto-flow: column dense'' grid,

they are first re-ordered to [=order-modified document order=]
before applying the [[css-grid-1#auto-placement-algo]].
Among the subset of these items whose ''reading-order'' is ''0'' or ''auto'',
those with ''reading-order: auto'' are shifted
to the latest position in the [=reading and navigation order=]
that is also after any items with ''reading-order: 0'' or ''reading-order: auto''
Comment on lines +1227 to +1228
Copy link
Copy Markdown
Contributor

@Loirooriol Loirooriol Jan 19, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"the latest position that is also after something" seems to refer to the end?
Should be "the earliest after something", or just

Suggested change
to the latest position in the [=reading and navigation order=]
that is also after any items with ''reading-order: 0'' or ''reading-order: auto''
in the [=reading and navigation order=]
after any items with ''reading-order: 0'' or ''reading-order: auto''

that came earlier in the [=grid-modified document order=]
Comment thread
Loirooriol marked this conversation as resolved.
(with the major axis as specified by ''grid-auto-flow'').
</div>
</dl>

<h3 id='layout-order'>
Box Order: the 'layout-order' property</h3>

Expand Down