[css-align-3] Add Melanie's diagrams for vertical writing modes.

Author: tabatkins

css-align-3/Overview.bs

@@ -440,7 +440,7 @@ Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self
 			     alt="Inline-axis 'start' alignment in an LTR container:
 			     Alignment uses the context’s start direction, so
 			     the (RTL) Arabic and Hebrew items
-			     are right-aligned alongside the (LTR) Latin and Chinese.">
+			     are left-aligned alongside the (LTR) Latin and Chinese.">
 			<img src="images/self-v-context-self-start-tb.svg"
 			     style="background: white; padding: 8px;"
 			     title="inline-axis 'self-start' alignment with LTR context"
@@ -453,6 +453,86 @@ Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self
 		</figure>
 	</aside>
 
+	<aside class=example>
+		The behavior of the alignment keywords is analogous in <a>vertical writing modes</a>:
+		''<self-position>/start'' and ''<self-position>/end''
+		are relative to the start/end of the text in the relevant axis.
+		The ''<self-position>/left'' and ''<self-position>/right'' keywords
+		are interpreted as <a>line-left</a> and <a>line-right</a>,
+		relative to the “left” and “right” sides of LTR/RTL text.
+
+		<figure>
+			<img src="images/start-inline-rl.svg"
+			     style="background: white; padding: 8px;"
+			     title="inline-axis 'start' alignment in various writing systems"
+			     alt="Inline-axis 'start' alignment in vertical-rl writing:
+			     Vertical Latin and Chinese are top-aligned,
+			     while Arabic and Hebrew are bottom-aligned.">
+			<img src="images/end-inline-rl.svg"
+			     style="background: white; padding: 8px;"
+			     title="inline-axis 'end' alignment in various writing systems"
+			     alt="Inline-axis 'end' alignment in vertical-rl writing:
+			     Vertical Latin and Chinese are top-aligned,
+			     while Arabic and Hebrew are bottom-aligned.">
+			<figcaption>
+				''<self-position>/start'' vs ''<self-position>/end'' in the <a>inline axis</a>
+				(<a href="#flexbox-exception">typically<sup>†</sup></a> 'justify-*')
+			</figcaption>
+		</figure>
+
+		<figure>
+			<img src="images/left-inline-rl.svg"
+			     style="background: white; padding: 8px; padding-bottom: calc(8px + 23px);"
+			     title="'left' alignment in various writing systems"
+			     alt="Inline-axis 'left' alignment in vertical-rl writing:
+			     Vertical text is top-aligned, regardless of writing system.">
+			<img src="images/right-inline-rl.svg"
+			     style="background: white; padding: 8px; padding-top: calc(5px + 23px); padding-bottom: 5px;"
+			     title="'right' alignment in various writing systems"
+			     alt="Inline-axis 'right' alignment in vertical-rl writing:
+			     Vertical text is bottom-aligned, regardless of writing system.">
+			<figcaption>
+				''<self-position>/left'' vs ''<self-position>/right''
+			</figcaption>
+		</figure>
+
+		<figure>
+			<img src="images/start-block-rl.svg"
+			     style="background: white; padding: 8px;"
+			     title="block-axis 'start' alignment in various writing systems"
+			     alt="Block-axis 'start' alignment in vertical-rl writing:
+			     Vertical text is top-aligned in the vertical axis.">
+			<img src="images/end-block-rl.svg"
+			     style="background: white; padding: 8px;"
+			     title="block-axis 'end' alignment in various writing systems"
+			     alt="Block-axis 'bottom' alignment in vertical-rl writing:
+			     Vertical text is bottom-aligned in the vertical axis.">
+			<figcaption>
+				''<self-position>/start'' vs ''<self-position>/end'' in the <a>block axis</a>
+				(<a href="#flexbox-exception">typically<sup>†</sup></a> 'align-*')
+			</figcaption>
+		</figure>
+
+		<figure>
+			<img src="images/self-v-context-start-rl.svg"
+			     style="background: white; padding: 8px; padding-bottom: calc(8px + 30px);"
+			     title="inline-axis 'start' alignment with LTR context"
+			     alt="Inline-axis 'start' alignment in a vertical-rl LTR container:
+			     Alignment uses the context’s start direction, so
+			     the (RTL) Arabic and Hebrew items
+			     are top-aligned alongside the (LTR) Latin and Chinese.">
+			<img src="images/self-v-context-self-start-rl.svg"
+			     style="background: white; padding: 8px;"
+			     title="inline-axis 'self-start' alignment with LTR context"
+			     alt="Inline-axis 'self-start' alignment in a vertical-rl LTR container:
+			     Horizontal Latin and Chinese items are top-aligned,
+			     while Arabic and Hebrew items are bottom-aligned.">
+			<figcaption>
+				''<self-position>/start'' vs ''<self-position>/self-start'' on the individual items
+			</figcaption>
+		</figure>
+	</aside>
+
 	<p class='issue'>
 		Make it easier to understand the dual-axis nature of "start" and "end" wrt orthogonal flows.