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
Next Next commit
[css-display-4] Use combinatorial keywords instead of 'reading-and-or… 
…der'. #7387
  • Loading branch information
@fantasai
fantasai committed Jan 19, 2023
commit 6a1da237031caed3ab2941a7aaecdb58f72d6c62
37 changes: 30 additions & 7 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 @@ -1189,7 +1212,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