[css-align] Move section on assuming a compatible writing mode for synthesis to the section on synthesis, fill out missing details, and tighten up prose. Fixes #1450.

Author: fantasai

css-align/Overview.bs

@@ -1590,6 +1590,19 @@ Determining the Baselines of a Box</h2>
 	table cells <a>synthesize</a> from their content edges [[CSS2]],
 	and grid and flex items <a>synthesize</a> from their border edges [[CSS-GRID-1]] [[CSS-FLEXBOX-1]].
 
+	In general, the <a>writing mode</a> of the box, shape, or other object being aligned
+	is used to determine the <a>line-under</a> and <a>line-over</a> edges for synthesis.
+	However, when that <a>writing mode</a>’s
+	<a>block flow direction</a> is parallel
+	to the axis of the <a>alignment context</a>,
+	an axis-compatible <a>writing mode</a> must be assumed:
+	* If the box establishing the <a>alignment context</a>
+		has a <a>block flow direction</a> that is orthogonal to the axis of the <a>alignment context</a>,
+		use its <a>writing mode</a>.
+	* Otherwise, assume either ''horizontal-tb'' or ''vertical-lr'' 'writing-mode',
+		whichever is orthogonal to the box’s own 'writing-mode'.
+		<!-- This pairing is chosen because the most likely case for this situation is CJK. -->
+
 	Issue: Maybe these things are wrong?
 	CSS 2.1 is really weird about baseline alignment.
 
@@ -1652,16 +1665,6 @@ Baseline Alignment Grouping</h3>
 	* the same <a>block flow direction</a> and <a>baseline alignment preference</a>
 	* opposite <a>block flow direction</a> and opposite <a>baseline alignment preference</a>
 
-	For the purpose of synthesizing baselines of boxes
-	whose <a>block flow direction</a> is parallel
-	to the axis of the <a>alignment context</a>:
-	* If the box establishing the <a>alignment context</a>
-		has a <a>block flow direction</a> that is orthogonal to the axis of the <a>alignment context</a>,
-		use its <a>writing mode</a>.
-	* Otherwise, assume either ''horizontal-tb'' or ''vertical-lr'' 'writing-mode',
-		whichever is orthogonal to the box’s own 'writing-mode'.
-		<!-- This pairing is chosen because the most likely case for this situation is CJK. -->
-
 <h3 id='align-by-baseline'>
 Aligning Boxes by Baseline</h3>