[css-align] Editorial: move some text around to make it easier to read.

Author: fantasai

css-align/Overview.bs

@@ -220,23 +220,9 @@ Alignment Keywords</h2>
 <h3 id='positional-values'>
 Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self-end'', ''flex-start'', ''flex-end'', ''left'', and ''right'' keywords</h3>
 
-	The positional alignment keywords specify a position for an <a>alignment subject</a>
+	The <dfn>positional alignment</dfn> keywords specify a position for an <a>alignment subject</a>
 	with respect to its <a>alignment container</a>.
 
-	The <<self-position>> set of values is used by 'justify-self' and 'align-self'
-	to align the box within its <a>alignment container</a>,
-	and also by 'justify-items' and 'align-items'
-	(to specify default values for 'justify-self' and 'align-self').
-	The <<content-position>> set of values is used by 'justify-content' and 'align-content'
-	to align the box's contents within itself.
-
-	<pre class='prod'>
-		<dfn>&lt;self-position></dfn> = center | start | end | self-start | self-end |
-		                   flex-start | flex-end | left | right;
-		<dfn>&lt;content-position></dfn> = center | start | end | flex-start | flex-end | left | right;
-	</pre>
-
-
 	Values have the following meanings:
 
 	<dl dfn-type="value">
@@ -282,6 +268,29 @@ Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self
 			this value behaves as ''start''.
 	</dl>
 
+	Two grammar terms are used to denote this collection of values:
+
+	<dl>
+		<dt><<self-position>>
+		<dd>
+			This set is used by 'justify-self' and 'align-self'
+			to align the box within its <a>alignment container</a>,
+			and also by 'justify-items' and 'align-items'
+			(to specify default values for 'justify-self' and 'align-self').
+			<pre class='prod'>
+				<dfn>&lt;self-position></dfn> = center | start | end | self-start | self-end |
+								flex-start | flex-end | left | right;
+			</pre>
+		<dt><<content-position>>
+		<dd>
+			This set is used by 'justify-content' and 'align-content'
+			to align the box's contents within itself.
+
+			<pre class='prod'>
+				<dfn>&lt;content-position></dfn> = center | start | end | flex-start | flex-end | left | right;
+			</pre>
+	</dl>
+
 	<p class='issue'>
 		Add example images.
 
@@ -302,13 +311,7 @@ Baseline Alignment: the ''baseline'' and ''last-baseline'' keywords</h3>
 	it and the other participants in its <a>baseline-sharing group</a>
 	are fallback-aligned insofar as possible while preserving their <a>baseline alignment</a>.
 
-	The baseline alignment keywords are:
-
-	<pre class='prod'>
-		<dfn>&lt;baseline-position></dfn> = baseline | last-baseline
-	</pre>
-
-	and are defined below:
+	Values have the following meanings:
 
 	<dl dfn-type=value dfn-for="justify-content, justify-self, justify-items, align-content, align-self, align-items, <baseline-position>">
 		<dt><dfn>baseline</dfn>
@@ -338,6 +341,12 @@ Baseline Alignment: the ''baseline'' and ''last-baseline'' keywords</h3>
 			Issue: Should this ''end'' fallback be ''safe'' or ''unsafe''?
 	</dl>
 
+	The baseline alignment keywords are represented with the <<baseline-position>> grammar term:
+
+	<pre class='prod'>
+		<dfn>&lt;baseline-position></dfn> = baseline | last-baseline
+	</pre>
+
 	These values give a box a <dfn export>baseline alignment preference</dfn>:
 	either “first” or “last”, respectively.
 
@@ -369,16 +378,14 @@ Baseline Alignment: the ''baseline'' and ''last-baseline'' keywords</h3>
 <h3 id='distribution-values'>
 Distributed Alignment: the ''<content-distribution>/stretch'', ''space-between'', ''space-around'', and ''space-evenly'' keywords</h3>
 
-	The distribution values are used by 'justify-content' and 'align-content'
-	to distribute the <a>alignment subjects</a>
-	evenly between the start and end edges of the <a>alignment container</a>.
+	The <dfn>distributed alignment</dfn> values are used by 'justify-content' and 'align-content'
+	to disperse the <a>alignment subjects</a>
+	between the start and end edges of the <a>alignment container</a>.
 	When the <a>alignment subjects</a> cannot be distributed in this way,
 	they behave as their <a>fallback alignment</a>.
 	Each distribution value has an associated <<content-position>> as a <a>fallback alignment</a>,
 	but one can alternatively be explicitly specified in the property.
 
-	<pre class='prod'> <dfn>&lt;content-distribution></dfn> = space-between | space-around | space-evenly | stretch</pre>
-
 	<dl dfn-type="value" dfn-for="align-content, justify-content, <content-distribution>">
 		<dt><dfn>space-between</dfn>
 		<dd>
@@ -422,6 +429,10 @@ Distributed Alignment: the ''<content-distribution>/stretch'', ''space-between''
 			<span class='note'>(For layout modes other than flex layout, ''flex-start'' is identical to ''start''.)</span>
 	</dl>
 
+	These values are represented with the <<content-distribution>> grammar term:
+
+	<pre class='prod'><dfn>&lt;content-distribution></dfn> = space-between | space-around | space-evenly | stretch</pre>
+
 	<p class='issue'>
 		Add even more example images.