SVG images for alignment spec - positional alignment

css-align/Overview.bs

@@ -234,43 +234,79 @@ Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self
 		<dt><dfn for="<self-position>, <content-position>">center</dfn> <small>(self, content)</small>
 		<dd>Centers the <a>alignment subject</a> within its <a>alignment container</a>.
 
+		<figure>
+			<img src="images/positional-center.svg" alt="For example, given one item with the inline axis running left to right the item will center inside the alignment container, with an equal amount of space left and right. With two items the items will group together in the center maintaining an equal amount of space left and right.">
+		</figure>
+
 		<dt><dfn for="<self-position>, <content-position>">start</dfn> <small>(self, content)</small>
 		<dd>Aligns the <a>alignment subject</a> to be flush with the <a>alignment container</a>’s start edge in the appropriate axis.
 
+		<figure>
+			<img src="images/positional-start.svg" alt="For example, given an inline axis running left to right, one or more items set to start will align to the left-hand edge of the alignment container.">
+		</figure>
+
 		<dt><dfn for="<self-position>, <content-position>">end</dfn> <small>(self, content)</small>
 		<dd>Aligns the <a>alignment subject</a> to be flush with the <a>alignment container</a>’s end edge in the appropriate axis.
 
+		<figure>
+			<img src="images/positional-end.svg" alt="For example, given an inline axis running left to right, one or more items set to end will align to the right-hand edge of the alignment container.">
+		</figure>
+
 		<dt><dfn for="<self-position>">self-start</dfn> <small>(self)</small>
 		<dd>Aligns the <a>alignment subject</a> to be flush with the edge of the <a>alignment container</a>
 			corresponding to the <a>alignment subject</a>’s start side in the appropriate axis.
 
+		<figure>
+			<img src="images/positional-self-start.svg" alt="For example, given an inline axis running left to right on the alignment subject, an item set to self-start will align to the left-hand edge of the alignment container.">
+		</figure>
+
 		<dt><dfn for="<self-position>">self-end</dfn> <small>(self)</small>
 		<dd>Aligns the <a>alignment subject</a> to be flush with the edge of the <a>alignment container</a>
 			corresponding to the <a>alignment subject</a>’s end side in the appropriate axis.
 
+		<figure>
+			<img src="images/positional-self-end.svg" alt="For example, given an inline axis running left to right on the alignment subject, an item set to self-end will align to the right-hand edge of the alignment container.">
+		</figure>
+
 		<dt><dfn for="<self-position>, <content-position>">flex-start</dfn> <small>(self, content)</small>
 		<dd><strong>Only used in flex layout.</strong> [[!CSS-FLEXBOX-1]]
 			Aligns the <a>alignment subject</a> to be flush with the edge of the <a>alignment container</a>
 			corresponding to the <a>flex container</a>’s main-start or cross-start side, as appropriate.
 			When used on boxes that are not children of a <a>flex container</a>,
 			this value behaves as ''start''.
 
+		<figure>
+			<img src="images/positional-flex-start.svg" alt="For example, given a cross axis running left to right on the flex container, an item set to flex-start will align to the left-hand edge of the flex container.">
+		</figure>
+
 		<dt><dfn for="<self-position>, <content-position>">flex-end</dfn> <small>(self, content)</small>
 		<dd><strong>Only used in flex layout.</strong>
 			Aligns the <a>alignment subject</a> to be flush with the edge of the <a>alignment container</a>
 			corresponding to the <a>flex container</a>’s main-end or cross-end side, as appropriate.
 			When used on boxes that are not children of a <a>flex container</a>,
 			this value behaves as ''end''.
 
+		<figure>
+			<img src="images/positional-flex-end.svg" alt="For example, given a cross axis running left to right on the flex container, an item set to flex-end will align to the right-hand edge of the flex container.">
+		</figure>
+
 		<dt><dfn for="<self-position>, <content-position>">left</dfn> <small>(self, content)</small>
 		<dd>Aligns the <a>alignment subject</a> to be flush with the <a>alignment container</a>’s <a href="https://www.w3.org/TR/css3-writing-modes/#line-left">line-left</a> edge.
 			If the property's axis is not parallel with the inline axis,
 			this value behaves as ''start''.
 
+		<figure>
+			<img src="images/positional-left.svg" alt="For example, the item or items will align to the left-hand edge of the alignment container taking no account of the logical start or end of the container.">
+		</figure>
+
 		<dt><dfn for="<self-position>, <content-position>">right</dfn> <small>(self, content)</small>
 		<dd>Aligns the <a>alignment subject</a> to be flush with the <a>alignment container</a>’s <a href="https://www.w3.org/TR/css3-writing-modes/#line-right">line-right</a> edge.
 			If the property's axis is not parallel with the inline axis,
 			this value behaves as ''start''.
+
+		<figure>
+			<img src="images/positional-right.svg" alt="For example, the item or items will align to the right-hand edge of the alignment container taking no account of the logical start or end of the container.">
+		</figure>
 	</dl>
 
 	Two grammar terms are used to denote this collection of values: