[css-display-4] Use combinatorial keywords instead of 'reading-and-la…

…yout'. #7387

css-display-4/Overview.bs

@@ -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>
@@ -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
@@ -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>,