[css-display-3][css-display-4][editorial] Use “layout order” rather than “visual order”

Author: fantasai

css-display-3/Overview.bs

@@ -1010,7 +1010,7 @@ Display Order: the 'order' property</h2>
 			flex-flow: column;
 		}
 		article.sale-item > img {
-			order: -1; /* Shift image before other content (in visual order) */
+			order: -1; /* Shift image before other content (in layout order) */
 			align-self: center;
 		}
 		</pre>
@@ -1096,24 +1096,24 @@ Reordering and Accessibility</h3>
 	(such as cycling through links, see e.g. <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex"><code>tabindex</code></a> [[HTML]]).
 
 	Advisement:
-	Authors <em>must</em> use 'order' only for visual, not logical, reordering of content.
+	Authors <em>must</em> use 'order' only for spatial, not logical, reordering of content.
 	Style sheets that use 'order' to perform logical reordering are non-conforming.
 
 	Note: This is so that non-visual media and non-CSS UAs,
 	which typically present content linearly,
 	can rely on a logical source order,
-	while 'order' is used to tailor the visual order.
+	while 'order' is used to tailor the layout order.
 	(Since visual perception is two-dimensional and non-linear,
-	the desired visual order is not always logical.)
+	the desired layout order is not always logical.)
 
 	In order to preserve the author's intended ordering in all presentation modes,
 	authoring tools--
 	including WYSIWYG editors as well as Web-based authoring aids--
 	must reorder the underlying document source
 	and not use 'order' to perform reordering
-	unless the author has explicitly indicated that the underlying
-	document order (which determines speech and navigation order) should be
-	<em>out-of-sync</em> with the visual order.
+	unless the author has explicitly indicated that
+	the spatial order should be <em>out-of-sync</em> with
+	the underlying document order (which determines speech and navigation order).
 
 	<div class="example">
 		For example, a tool might offer both drag-and-drop reordering of flex items
@@ -1122,11 +1122,11 @@ Reordering and Accessibility</h3>
 		Since most of the time, reordering should affect all screen ranges
 		as well as navigation and speech order,
 		the tool would perform drag-and-drop reordering at the DOM layer.
-		In some cases, however, the author may want different visual orderings per screen size.
+		In some cases, however, the author may want different layouts per screen size.
 		The tool could offer this functionality by using 'order' together with media queries,
 		but also tie the smallest screen size's ordering to the underlying DOM order
 		(since this is most likely to be a logical linear presentation order)
-		while using 'order' to determine the visual presentation order in other size ranges.
+		while using 'order' to define the visual presentation order in other size ranges.
 
 		This tool would be conformant, whereas a tool that only ever used 'order'
 		to handle drag-and-drop reordering

css-display-4/Overview.bs

@@ -1070,7 +1070,7 @@ Display Order Shorthand: the 'order' property</h3>
 			flex-flow: column;
 		}
 		article.sale-item > img {
-			order: -1; /* Shift image before other content (in visual order) */
+			order: -1; /* Shift image before other content (in layout order) */
 			align-self: center;
 		}
 		</pre>
@@ -1239,24 +1239,24 @@ Reordering and Accessibility</h3>
 	(such as cycling through links, see e.g. <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex"><code>tabindex</code></a> [[HTML]]).
 
 	Advisement:
-	Authors <em>must</em> use 'layout-order' only for visual, not logical, reordering of content.
+	Authors <em>must</em> use 'layout-order' only for spatial, not logical, reordering of content.
 	Style sheets that use 'layout-order' to perform logical reordering are non-conforming.
 
 	Note: This is so that non-visual media and non-CSS UAs,
 	which typically present content linearly,
 	can rely on a logical source order,
-	while 'layout-order' is used to tailor the visual order.
+	while 'layout-order' is used to tailor the layout order.
 	(Since visual perception is two-dimensional and non-linear,
-	the desired visual order is not always logical.)
+	the desired layout order is not always logical.)
 
 	In order to preserve the author's intended ordering in all presentation modes,
 	authoring tools--
 	including WYSIWYG editors as well as Web-based authoring aids--
 	must reorder the underlying document source
 	and not use 'layout-order' to perform reordering
-	unless the author has explicitly indicated that the underlying
-	document order (which determines speech and navigation order) should be
-	<em>out-of-sync</em> with the visual order.
+	unless the author has explicitly indicated that
+	the spatial order should be <em>out-of-sync</em> with
+	the underlying document order (which determines speech and navigation order).
 
 	<div class="example">
 		For example, a tool might offer both drag-and-drop reordering of flex items
@@ -1265,11 +1265,11 @@ Reordering and Accessibility</h3>
 		Since most of the time, reordering should affect all screen ranges
 		as well as navigation and speech order,
 		the tool would perform drag-and-drop reordering at the DOM layer.
-		In some cases, however, the author may want different visual orderings per screen size.
+		In some cases, however, the author may want different layouts per screen size.
 		The tool could offer this functionality by using 'order' together with media queries,
 		but also tie the smallest screen size's ordering to the underlying DOM order
 		(since this is most likely to be a logical linear presentation order)
-		while using 'order' to determine the visual presentation order in other size ranges.
+		while using 'order' to define the visual presentation order in other size ranges.
 
 		This tool would be conformant, whereas a tool that only ever used 'order'
 		to handle drag-and-drop reordering