[css-align-3] Move example, reword caption, fix quotation marks.

Author: fantasai

css-align-3/Overview.bs

@@ -757,47 +757,8 @@ Overflow Alignment: the ''safe'' and ''unsafe'' keywords and scroll safety limit
 	when they overflow they may send part of their boxes past the viewport's start edge,
 	which can't be scrolled to.
 
-	To control this situation,
-	an <dfn export>overflow alignment</dfn> mode can be explicitly specified.
-	“Unsafe” alignment honors the specified alignment mode in overflow situations, even if it causes data loss,
-	while “safe” alignment changes the alignment mode in overflow situations in an attempt to avoid data loss.
-	The default behavior is to contain the alignment subject within the scrollable area,
-	though at the time of writing this safety feature is not yet implemented.
-
-	<pre class='prod'><dfn>&lt;overflow-position></dfn> = unsafe | safe</pre>
-
-	<dl dfn-type="value" dfn-for="<overflow-position>">
-		<dt><dfn>safe</dfn>
-		<dd>
-			If the size of the <a>alignment subject</a> overflows the <a>alignment container</a>,
-			the <a>alignment subject</a> is instead aligned as if the alignment mode were ''start''.
-
-		<dt><dfn>unsafe</dfn>
-		<dd>
-			Regardless of the relative sizes of the <a>alignment subject</a> and <a>alignment container</a>,
-			the given alignment value is honored.
-
-		<dt>(no value specified)
-		<dd>
-			If the <a>overflow alignment</a> isn't explicitly specified,
-			the default <a>overflow alignment</a> is a blend of "safe" and "unsafe"
-			in that an overflowing <a>alignment subject</a> is allowed to overflow its <a>alignment container</a>,
-			but if this would cause it to also overflow
-			the <a>scrollable overflow region</a> of its nearest ancestor <a>scroll container</a>
-			(thus extending into the "unscrollable" region),
-			then its overflow in that direction is limited
-			by biasing any remaining overflow to the opposite side.
-
-			Issue: It may not be Web-compatible to implement the “smart” default behavior
-			(though we hope so, and believe it to be likely),
-			so UAs should pass any feedback on this point to the WG.
-			UAs that have not implemented the “smart” default behavior
-			must behave as ''unsafe''.
-	</dl>
-
-
 	<div class='example'>
-		The figure below illustrates the difference in "safe" versus "unsafe" centering,
+		The figure below illustrates the difference in “safe” versus “unsafe” centering,
 		using a column flexbox as an example:
 
 		<figure>
@@ -825,31 +786,74 @@ Overflow Alignment: the ''safe'' and ''unsafe'' keywords and scroll safety limit
 				<div style="display:table-cell; padding-right: 50px;" class='cross-auto-figure'>
 					<div>
 						<div>About</div>
-						<div style="white-space: nowrap;">Authoritarianism</div>
+						<div style="white-space: nowrap; margin-left: -31px;">Authoritarianism</div>
 						<div>Blog</div>
 					</div>
 				</div>
 				<div style="display:table-cell; padding-left: 50px;" class='cross-auto-figure'>
 					<div>
 						<div>About</div>
-						<div style="white-space: nowrap; margin-left: -31px;">Authoritarianism</div>
+						<div style="white-space: nowrap;">Authoritarianism</div>
 						<div>Blog</div>
 					</div>
 				</div>
 			</div>
 			<figcaption>
-				The items in the figure on the left are set to ''align-self: safe center;'',
-				while those in the figure on the right are set to ''align-self: unsafe center;''.
-				If this column <a>flex container</a> was placed against the left edge of the page,
-				the "safe" behavior would be more desirable,
-				as the long item would be fully readable.
+				The items in the figure on the right all strictly centered,
+				even if the one that is too long to fit overflows on both sides,
+				while those in the figure on the left are centered unless they overflow,
+				in which case all the overflow goes off the end edge.
+				If the container was placed
+				against the left edge of the page,
+				the “safe” behavior would be more desirable,
+				as the long item would be fully readable,
+				rather than clipped by the left edge of the screen.
 				In other circumstances,
-				the "unsafe" centering behavior might be better,
+				the “unsafe” centering behavior might be better,
 				as it correctly centers all the items.
 			</figcaption>
 		</figure>
 	</div>
 
+	To control this situation,
+	an <dfn export>overflow alignment</dfn> mode can be explicitly specified.
+	“Unsafe” alignment honors the specified alignment mode in overflow situations, even if it causes data loss,
+	while “safe” alignment changes the alignment mode in overflow situations in an attempt to avoid data loss.
+	The default behavior is to contain the alignment subject within the scrollable area,
+	though at the time of writing this safety feature is not yet implemented.
+
+	<pre class='prod'><dfn>&lt;overflow-position></dfn> = unsafe | safe</pre>
+
+	<dl dfn-type="value" dfn-for="<overflow-position>">
+		<dt><dfn>safe</dfn>
+		<dd>
+			If the size of the <a>alignment subject</a> overflows the <a>alignment container</a>,
+			the <a>alignment subject</a> is instead aligned as if the alignment mode were ''start''.
+
+		<dt><dfn>unsafe</dfn>
+		<dd>
+			Regardless of the relative sizes of the <a>alignment subject</a> and <a>alignment container</a>,
+			the given alignment value is honored.
+
+		<dt>(no value specified)
+		<dd>
+			If the <a>overflow alignment</a> isn't explicitly specified,
+			the default <a>overflow alignment</a> is a blend of “safe” and “unsafe”
+			in that an overflowing <a>alignment subject</a> is allowed to overflow its <a>alignment container</a>,
+			but if this would cause it to also overflow
+			the <a>scrollable overflow region</a> of its nearest ancestor <a>scroll container</a>
+			(thus extending into the “unscrollable” region),
+			then its overflow in that direction is limited
+			by biasing any remaining overflow to the opposite side.
+
+			Issue: It may not be Web-compatible to implement the “smart” default behavior
+			(though we hope so, and believe it to be likely),
+			so UAs should pass any feedback on this point to the WG.
+			UAs that have not implemented the “smart” default behavior
+			must behave as ''unsafe''.
+	</dl>
+
+
 <!--
                    ██████   ███████  ██    ██ ████████ ████████ ██    ██ ████████
  ██   ██          ██    ██ ██     ██ ███   ██    ██    ██       ███   ██    ██
@@ -2230,7 +2234,7 @@ Baseline Alignment Grouping</h3>
 
 	The <a>baseline alignment preferences</a> of two boxes in a <a>baseline-sharing group</a> are <dfn lt="compatible baseline alignment preferences">compatible</dfn> if they have:
 
-	* the same <a>block flow direction</a> and <a>baseline alignment preference</a>
+	* the same <a>block flow direction</a> and same <a>baseline alignment preference</a>
 	* opposite <a>block flow direction</a> and opposite <a>baseline alignment preference</a>
 
 <h3 id='align-by-baseline'>