[css-anchor-position-1][editiorial] Better structure for position-area prose

Author: fantasai

css-anchor-position-1/Overview.bs

@@ -582,7 +582,69 @@ and the edges of the [=default anchor box=].
 These lines can be thought of as defining a 3×3 grid;
 'position-area' lets you easily specify
 what area of this [=position-area grid=] to lay out the positioned box in.
-Its syntax is:
+
+<figure>
+	<img src="images/position-area-example.png" width=400>
+	<figcaption>
+		An example of ''position-area: top left'' positioning
+		in a ''horizontal-tb'' ''dir/ltr'' [=writing mode=].
+	</figcaption>
+</figure>
+
+
+<dl dfn-for=position-area dfn-type=value>
+	: <dfn>none</dfn>
+	:: The property has no effect.
+
+	: <dfn><<position-area>></dfn>
+	::
+		If the box does not have a [=default anchor box=],
+		or is not an [=absolutely positioned box=],
+		this value has no effect.
+
+		Otherwise, selects a region of the [=position-area grid=],
+		and makes that the box's [=containing block=].
+
+		Note: This means that the [=inset properties=] specify offsets from the position-area,
+		and some property values,
+		like ''max-height: 100%'',
+		will be relative to the position-area as well.
+</dl>
+
+Values other than ''position-area/none'' have the following additional effects:
+
+* The ''align-self/normal'' value for the [=self-alignment properties=]
+	resolves to a corresponding value, see [[#position-area-alignment]].
+* Any ''top/auto'' [=inset properties=] resolve to ''0''.
+* The box is not considered to be in a [=legacy alignment mode=]
+	in either axis.
+
+<h4 id="position-area-grid-resolution">
+Resolving the Position Area Grid</h4>
+
+The <dfn export>position-area grid</dfn> is a 3×3 grid,
+composed of four grid lines in each axis.
+In order (using the [=writing mode=] of the [=containing block=]):
+
+* the [=start=] edge of the box's pre-modification [=containing block=],
+	or the start edge of the [=default anchor box=]
+	if that is more [=start=]-ward
+* the [=start=] edge of the [=default anchor box=]
+* the [=end=] edge of the [=default anchor box=]
+* the [=end=] edge of the box's pre-modification [=containing block=],
+	or the end edge of the [=default anchor box=]
+	if that is more [=end=]-ward.
+
+Note: When the [=default anchor box=]
+is partially or completely outside of the pre-modified [=containing block=],
+some of the [=position-area grid's=] rows or columns can be zero-sized.
+
+<h4 id="position-area-syntax">
+Syntax of <<position-area>> Values</h4>
+
+Positions are specified as a pair of values,
+which can be expressed in [=flow-relative=] or [=physical=] terms.
+The allowed syntax of a <<position-area>> value is:
 
 <pre class=prod>
 <dfn>&lt;position-area></dfn> = [
@@ -613,83 +675,8 @@ Its syntax is:
 ]
 </pre>
 
-<dl dfn-for=position-area dfn-type=value>
-	: <dfn>none</dfn>
-	:: The property has no effect.
-
-	: <dfn><<position-area>></dfn>
-	::
-		If the box does not have a [=default anchor box=],
-		or is not an [=absolutely positioned box=],
-		this value has no effect.
-
-		Otherwise, it has the following effects:
-
-		* The property selects a region of the [=position-area grid=],
-			and makes that the box's [=containing block=].
-			See [[#resolving-spans]] for details.
-
-			Note: This means that the [=inset properties=] specify offsets from the position-area,
-			and some property values,
-			like ''max-height: 100%'',
-			will be relative to the position-area as well.
-
-		* The ''align-self/normal'' value for the [=self-alignment properties=]
-			behaves as either ''align-self/start'', ''align-self/end'',
-			or ''align-self/anchor-center'',
-			depending on the positioning of the region,
-			to give a good default alignment for the positioned box.
-			Again, see [[#resolving-spans]] for details.
-
-		* Any ''top/auto'' [=inset properties=] resolve to ''0''.
-
-		* The box is not considered to be in a [=legacy alignment mode=]
-			in either axis.
-</dl>
-
-<div class=note>
-	If the box overflows its [=inset-modified containing block=],
-	but would still fit within its [=original containing block=],
-	by default it will “shift” to stay within its [=original containing block=],
-	even if that violates its normal alignment.
-	See [[css-align-3#overflow-values]] for details.
-
-	This behavior makes it more likely
-	that positioned boxes remain visible
-	and within their intended bounds,
-	even when their [=containing block=]
-	ends up smaller than anticipated.
-
-	For example, a ''position-area: bottom span-right'' value
-	lets the positioned box stretch
-	from its anchor's left edge
-	to its containing block's right edge,
-	and left-aligns it in that space by default.
-	But if the positioned box is larger than that space
-	(such as if the anchor is very close to the right edge of the screen),
-	it will shift leftwards to stay visible.
-</div>
-
-
-<h4 id=resolving-spans>
-Resolving <<position-area>>s</h4>
-
-The <dfn export>position-area grid</dfn> is a 3×3 grid,
-composed of four grid lines in each axis.
-In order (and using the [=writing mode=] of the [=containing block=]):
-
-* the start edge of the box's pre-modification [=containing block=],
-	or the start edge of the [=default anchor box=]
-	if that is more [=start=]-ward
-* the start edge of the [=default anchor box=]
-* the end edge of the [=default anchor box=]
-* the end edge of the box's pre-modification [=containing block=],
-	or the end edge of the [=default anchor box=]
-	if that is more [=end=]-ward.
-
-A <<position-area>> selects a region of this grid
-by specifying the rows and columns the region occupies,
-with each of the two keywords specifying one of them:
+The <<position-area>> value selects a region of the [=position area grid=]
+by specifying the rows and columns the region occupies as follows:
 
 <dl dfn-type=value dfn-for="position-area, <position-area>">
 	: <dfn>start</dfn>, <dfn>end</dfn>, <dfn>self-start</dfn>, <dfn>self-end</dfn>
@@ -720,7 +707,7 @@ with each of the two keywords specifying one of them:
 	: <dfn>span-x-start</dfn>, <dfn>span-x-end</dfn>
 	: <dfn>span-block-start</dfn>, <dfn>span-block-end</dfn>
 	: <dfn>span-inline-start</dfn>, <dfn>span-inline-end</dfn>
-	:: Two rows or columns,
+	:: Two adjacent rows or columns,
 		depending on which axis this keyword is specifying:
 		the center row/column,
 		and the row/column corresponding to the other half of the keyword
@@ -753,18 +740,19 @@ otherwise, it behaves as if the given keyword was repeated.
 (For example, ''position-area/top'' is equivalent to ''top span-all'',
 but ''position-area/center'' is equivalent to ''center center''.)
 
-<hr>
+<h4 id=position-area-alignment>
+Area-specific Default Alignment</h4>
 
-The <<position-area>> also implies a default [=self-alignment=],
+Each <<position-area>> also implies a default [=self-alignment=],
 which will be used if the [=self-alignment property=] on the box
 is ''align-self/normal'':
 
-* If the only the center region in an axis is selected,
-	or all three regions are selected,
+* If the only the center track in an axis is selected,
+	or all three tracks are selected,
 	the default alignment in that axis is ''align-self/anchor-center''.
 * Otherwise, the default alignment in that axis
-	is toward the non-specified side region:
-	if it's specifying the "start" region of its axis,
+	is toward the non-specified side track:
+	if it's specifying the "start" track of its axis,
 	the default alignment in that axis is ''align-self/end''; etc.
 
 <div class=example>
@@ -776,19 +764,30 @@ is ''align-self/normal'':
 	(making the box's bottom [=margin edge=] flush with the bottom of the ''position-area/top'' region)
 	and ''justify-self: end''
 	(making the box's end-side [=margin edge=] flush with the end side of the ''position-area/span-start'' region).
-
-	<figure>
-		<img src="images/position-area-example.png" width=400>
-		<figcaption>
-			An example of ''position-area: span-x-start top'' positioning.
-		</figcaption>
-	</figure>
 </div>
 
-Note: When the [=default anchor box=]
-is partially or completely outside of the pre-modified [=containing block=],
-some of the [=position-area grid's=] rows or columns can be zero-sized.
+<div class=note>
+	If the box overflows its [=inset-modified containing block=],
+	but would still fit within its [=original containing block=],
+	by default it will “shift” to stay within its [=original containing block=],
+	even if that violates its normal alignment.
+	See [[css-align-3#overflow-values]] for details.
+
+	This behavior makes it more likely
+	that positioned boxes remain visible
+	and within their intended bounds,
+	even when their [=containing block=]
+	ends up smaller than anticipated.
 
+	For example, a ''position-area: bottom span-right'' value
+	lets the positioned box stretch
+	from its anchor's left edge
+	to its containing block's right edge,
+	and left-aligns it in that space by default.
+	But if the positioned box is larger than that space
+	(such as if the anchor is very close to the right edge of the screen),
+	it will shift leftwards to stay visible.
+</div>
 
 <!-- Big Text: anchor()