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

Show file tree
Hide file tree
Changes from all commits
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
94 changes: 81 additions & 13 deletions css-display-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1014,9 +1014,7 @@ Display Order Shorthand: the 'order' property</h3>
<pre class='propdef shorthand'>
Name: order
Value: [ <<'layout-order'>> <<'reading-order'>>? ] |
[ reading && <<'reading-order'>> ] |
[ layout && <<'layout-order'>> ] |
[ reading-and-layout && <<integer>> ]
[ [ reading || layout ] && <<integer>> ]
Applies to: [=flex items=] and [=grid items=]
Inherited: no
</pre>
Expand All @@ -1038,9 +1036,34 @@ Display Order Shorthand: the 'order' property</h3>

The 'order' property sets both 'layout-order' and 'reading-order'
in a single declaration.
Unless <dfn value for=order>reading-and-layout</dfn> is specified--
in which case both <<'reading-order'>> and <<'layout-order'>> are set to the specified <<integer>> value--
the omitted [=longhand=] is <em>set to zero</em>.
Values have the following meanings:

<dl dfn-for=order dfn-type=value>
<dt><dfn><<integer>></dfn>
<dd>
If one integer and no keyword is specified,
then sets 'layout-order' to the specified integer,
and sets 'reading-order' to its [=initial value=].
If two integers are specified,
the first sets 'layout-order' and the second sets 'reading-order'.
Otherwise sets the appropriate [=longhand=](s) to the specified integer(s).

<dt><dfn>layout</dfn>
<dd>
Indicates setting 'layout-order' to the specified integer.
If ''reading'' is not specified,
'reading-order' is set to its [=initial value=].

<dt><dfn>reading</dfn>
<dd>
Indicates setting 'reading-order' to the specified integer.
If ''layout'' is not specified,
'layout-order' is set to its [=initial value=].
</dl>

Note: The single-integer syntax sets only 'layout-order',
in order to enable rearranging layout for better visual display
without changing the underlying reading order.

<div class='example'>
Here's an example of a catalog item card
Expand Down Expand Up @@ -1125,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 @@ -1136,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 @@ -1163,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 All @@ -1189,7 +1257,7 @@ Box Order: the 'layout-order' property</h3>
Specifically, the 'layout-order' property controls the order in which
[=flex items=] or [=grid items=] appear within their container
by assigning them to the ordinal groups,
as specified by its <dfn value for=order><<integer>></dfn> value.
as specified by its <dfn value for=layout-order><<integer>></dfn> value.

[=flex container|Flex=] and [=grid containers=] then lay out their contents
in <dfn export>order-modified document order</dfn>,
Expand Down
Loading