[css-align-3] Replace ASCII with SVG.

tabatkins · tabatkins · commit 8572eb8535a5 · 2018-08-15T15:45:41.000-07:00
diff --git a/css-align-3/Overview.bs b/css-align-3/Overview.bs
@@ -986,17 +986,10 @@ The 'justify-content' and 'align-content' Properties</h3>
 	by changing the <a>static-position containing block</a>’s
 	<a>content-distribution properties</a>.
 
-    <pre>
-	###############################################
-	# abspos containing block                     #
-	#   +----------------------------------+      #
-	#   | staticpos containing block       |      #
-	#   |                                  |      #
-	#   |                                  |      #
-	#<--|start-align available space -->   |      #
-	#   |<----- end-align available space -|-->   #
-	#   |<- center-align available space ->|      #
-	</pre>
+	<figure>
+		<img src="images/place-content-abspos.svg" width=480 height=330 alt="">
+		<figcaption>An illustration of the above rules.</figcaption>
+	</figure>
 </div>
 
 ### Multicol Containers ### {#distribution-multicol}
diff --git a/css-align-3/images/place-content-abspos.svg b/css-align-3/images/place-content-abspos.svg
@@ -0,0 +1,54 @@
+<svg xmlns='http://www.w3.org/2000/svg' width="480" height="330" viewBox="-10 -10 320 220">
+	<style>
+	:root { font-size: 15px; font-family: sans-serif;}
+	</style>
+	<rect x='0' y='0' width='300' height='200' stroke='black' stroke-width='3' fill='white' />
+	<text x='5' y='16'>abspos containing block</text>
+	<rect x='50' y='50' width='200' height='147' stroke='red' stroke-width='3' fill='white' />
+	<text x='55' y='66'>staticpos containing block</text>
+	<g text-anchor="middle">
+		<g>
+			<rect x='2' y='83' width='246' height='22' fill="silver" stroke-width='1' stroke='silver'></rect>
+			<text x='125' y='100'>start-align available space</text>
+		</g>
+		<g>
+			<rect x='52' y='113' width='246' height='22' fill="silver" stroke-width='1' stroke='silver'></rect>
+			<text x='175' y='130'>end-align available space</text>
+		</g>
+		<g>
+			<rect x='52' y='143' width='196' height='22' fill="silver" stroke-width='1' stroke='silver'></rect>
+			<text x='150' y='160'>center-align available space</text>
+		</g>
+	</g>
+	<!--
+	<g transform='translate(21,21)'>
+		<rect x='0' y='0' width='58' height='58' stroke='silver' stroke-width='3' stroke-dasharray='6 4' fill='white' />
+		<g transform='translate(4,4)'>
+			<rect x='0' y='0' width='15' height='15' fill='silver' />
+			<rect x='0' y='17' width='15' height='15' fill='silver' />
+			<rect x='0' y='34' width='15' height='15' fill='silver' />
+			<rect x='17' y='5' width='15' height='25' fill='silver' />
+			<rect x='17' y='32' width='15' height='15' fill='silver' />
+			<rect x='34' y='0' width='15' height='15' fill='silver' />
+			<rect x='34' y='17' width='15' height='20' fill='silver' />
+		</g>
+	</g>
+	<path d='M 1.5 50 l 5 -5 v 3 h 8 v -3 l 5 5 l -5 5 v -3 h -8 v 3 z' fill='black' />
+	<path d='M 80.5 50 l 5 -5 v 3 h 8 v -3 l 5 5 l -5 5 v -3 h -8 v 3 z' fill='black' />
+	<g transform='rotate(90)'>
+		<path d='M 1.5 -50 l 5 -5 v 3 h 8 v -3 l 5 5 l -5 5 v -3 h -8 v 3 z' fill='black' />
+		<path d='M 80.5 -50 l 5 -5 v 3 h 8 v -3 l 5 5 l -5 5 v -3 h -8 v 3 z' fill='black' />
+	</g>
+	-->
+</svg>
+<!--
+###############################################
+# abspos containing block                     #
+#   +__________________________________+      #
+#   | staticpos containing block       |      #
+#   |                                  |      #
+#   |                                  |      #
+#<- |start-align available space  ->   |      #
+#   |<- - - end-align available space -| ->   #
+#   |<- center-align available space ->|      #
+-->
