[css-align-3] Add Melanie's illustrations for the various alignment keywords

Author: tabatkins

css-align-3/Overview.bs

@@ -361,8 +361,97 @@ Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self
 			</pre>
 	</dl>
 
-	<p class='issue'>
-		Add example images.
+	<aside class=example>
+		The ''<self-position>/start'' and ''<self-position>/end'' keywords
+		are <a>flow-relative</a>:
+		they use the <a>writing mode</a> to determine which side to align to.
+
+		<figure>
+			<img src="images/start-inline-tb.svg"
+			     style="background: white; padding: 8px;"
+			     title="inline-axis 'start' alignment in various writing systems"
+			     alt="Inline-axis 'start' alignment:
+			     Horizontal Latin and Chinese are left-aligned,
+			     while Arabic and Hebrew are right-aligned.">
+			<img src="images/end-inline-tb.svg"
+			     style="background: white; padding: 8px;"
+			     title="inline-axis 'end' alignment in various writing systems"
+			     alt="Inline-axis 'end' alignment:
+			     Horizontal Latin and Chinese are right-aligned,
+			     while Arabic and Hebrew are left-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>
+
+		The ''<self-position>/left'' and ''<self-position>/right'' keywords
+		are absolute (not <a>flow-relative</a>).
+
+		<figure>
+			<img src="images/left-inline-tb.svg"
+			     style="background: white; padding: 8px;"
+			     title="'left' alignment in various writing systems"
+			     alt="Inline-axis 'left' alignment:
+			     Horizontal text is left-aligned, regardless of writing system.">
+			<img src="images/right-inline-tb.svg"
+			     style="background: white; padding: 8px;"
+			     title="'right' alignment in various writing systems"
+			     alt="Inline-axis 'right' alignment:
+			     Horizontal text is right-aligned, regardless of writing system.">
+			<figcaption>
+				''<self-position>/left'' vs ''<self-position>/right''
+			</figcaption>
+		</figure>
+
+		The ''<self-position>/start'' and ''<self-position>/end'' keywords
+		have meaning in both the <a lt="inline axis">inline</a> and <a lt="block axis">block</a> axes:
+		''<self-position>/start'' always orients to the start of the text
+		(top left for left-to-right/top-to-bottom languages like English)
+		while ''<self-position>/end'' always orients to the end of the text.
+
+		<figure>
+			<img src="images/start-block-tb.svg"
+			     style="background: white; padding: 8px; padding-bottom: calc(8px + 23px);"
+			     title="block-axis 'start' alignment in various writing systems"
+			     alt="Block-axis 'start' alignment:
+			     Horizontal text is top-aligned in the vertical axis.">
+			<img src="images/end-block-tb.svg"
+			     style="background: white; padding: 8px; padding-top: calc(8px + 23px);"
+			     title="block-axis 'end' alignment in various writing systems"
+			     alt="Block-axis 'bottom' alignment:
+			     Horizontal 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>
+
+		The ''<self-position>/start'' and ''<self-position>/end'' keywords
+		use the <a>writing mode</a> of the <a>alignment container</a>,
+		to help keep things consistent.
+		But if alignment using the <a>alignment subject</a>’s <a>writing mode</a> is needed,
+		the ''<self-position>/self-start'' and ''<self-position>/self-end'' keywords can be used.
+
+		<figure>
+			<img src="images/self-v-context-start-tb.svg"
+			     style="background: white; padding: 8px;"
+			     title="inline-axis 'start' alignment with LTR context"
+			     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.">
+			<img src="images/self-v-context-self-start-tb.svg"
+			     style="background: white; padding: 8px;"
+			     title="inline-axis 'self-start' alignment with LTR context"
+			     alt="Inline-axis 'self-start' alignment in an LTR container:
+			     Horizontal Latin and Chinese items are right-aligned,
+			     while Arabic and Hebrew items are left-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.
@@ -2003,4 +2092,6 @@ Privacy and Security Considerations</h2>
 Acknowledgments</h2>
 
 	Special thanks goes to David Baron, Javier Fernandez, Markus Mielke, Alex Mogilevsky,
-	and the participants in the CSSWG's March 2008 F2F alignment discussions.
+	and the participants in the CSSWG's March 2008 F2F alignment discussions
+	for their contributions to the alignment model described herein,
+	and to Melanie Richards for her illustrations of the various <a href="#alignment-values">alignment keywords</a>.