[css-multicol] added example SVG images

Author: rachelandrew

css-multicol-1/Overview.bs

@@ -517,12 +517,19 @@ Two assumptions are being made by the pseudo-algorithm:
 	regard for explicit column breaks or constrained column heights,
 	while the actual value takes these into consideration.
 
-	<div class=example>
+	<div class="example">
 		In this example, the actual column-count is higher than the used column-count due to explicit column breaks:
 
 		<pre highlight="css">
-		div { width: 40em; columns: 20em; column-gap: 0 }
-		p { break-after: column }
+		div { 
+			width: 40em; 
+			columns: 20em; 
+			column-gap: 0; 
+		}
+
+		p { 
+			break-after: column; 
+		}
 		</pre>
 
 		<pre highlight="html">
@@ -532,8 +539,10 @@ Two assumptions are being made by the pseudo-algorithm:
 			&lt;p>three
 		&lt;/div>
 		</pre>
-
-		The computed column-count is auto, the used column-count is 2 and the actual column-count is 3.
+		<figure>
+			<img src="images/column-count-higher-than-used-count.svg" alt="Two columns drawn inside the container, one outside">
+			<figcaption>The computed column-count is auto, the used column-count is 2 and the actual column-count is 3.</figcaption>
+		</figure>
 	</div>
 
 	<div class=example>
@@ -709,6 +718,11 @@ Column gaps and rules</h2>
 			column-rule-color: black;
 		}
 		</pre>
+
+		<figure>
+			<img src="images/rule-same-width-as-gap.svg" alt="The rule completely covers any gap.">
+			<figcaption>The column rule and column gap occupy the same space.</figcaption>
+		</figure>
 	</div>
 
 
@@ -782,54 +796,20 @@ Spanning columns</h2>
 
 	<div class="example">
 		In this example, an <code>h2</code> element has been added to the
-		sample document after the sixth sentence (i.e., after the word "jkl."). This styling applies:
+		sample document after the sixth sentence (i.e., after the words "the leg of a"). This styling applies:
 
 		<pre highlight="css">
 		h2 { column-span: all; background: silver }
 		</pre>
 
-		By setting 'column-span' to ''column-span/all'', all content that appear before
+		By setting 'column-span' to ''column-span/all'', all content that appears before
 		the <code>h2</code> element is shown before the <code>h2</code>
 		element.
 
-		<div class=cols>
-			Ab cde fgh i jkl. Mno<br>
-			pqr stu vw xyz. A bc<br>
-			<br><br>
-			M nop qrst uv wx yz.<br>
-			Ab cde fgh i jkl. Mno<br>
-			pqr stu vw xyz. A bc<br>
-			def g hij klm nopqrs<br>
-			tuv wxy z. Abc de fg<br>
-			hi jklmno. Pqrstu vw<br>
-
-			<div class="col" style="left: 175px">
-				def g hij klm nopqrs<br>
-				tuv wxy z. Abc de fg<br>
-				<br><br>
-				x yz. Abc def ghi jkl.<br>
-				M nop qrst uv wx yz.<br>
-				Ab cde fgh i jkl. Mno<br>
-				pqr stu vw xyz. A bc<br>
-				def g hij klm nopqrs<br>
-				tuv wxy z. Abc de fg<br>
-			</div>
-
-			<div class="col" style="left: 350px">
-				hi jklmno. Pqrstu vw<br>
-				x yz. Abc def ghi jkl.<br>
-				<br><br>
-				hi jklmno. Pqrstu vw<br>
-				x yz. Abc def ghi jkl.<br>
-				M nop qrst uv wx yz.<br>
-				Ab cde fgh i jkl. Mno<br>
-				pqr stu vw xyz.
-			</div>
-
-			<div class=rep style="width: 490px; height: 20px; background: silver; font-size: 1.5em; padding: 5px">An H2 element</div>
-			<div class=gap style="left: 150px"></div>
-			<div class=gap style="left: 325px"></div>
-		</div>
+		<figure>
+			<img src="images/h2-spanner.svg" alt="An element spans all three columns">
+			<figcaption>The h2 element is set to column-span: all</figcaption>
+		</figure>
 	</div>
 
 	A spanning element takes up more space than the element would take
@@ -845,85 +825,21 @@ Spanning columns</h2>
 		As a result, the element appears as if 'column-span: none' was
 		specified.
 
-		<div class=cols style="height: 100px">
-			<div class="col" style="">
-				Ab cde fgh i jkl. Mno<br>
-				pqr stu vw xyz. A bc<br>
-				def g hij klm nopqrs<br>
-				tuv wxy z. Abc de fg<br>
-				hi jklmno. Pqrstu vw<br>
-			</div>
-
-			<div class="col" style="left: 175px">
-				x yz. Abc def ghi jkl.<br>
-				M nop qrst uv wx yz.<br>
-				Ab cde fgh i jkl. Mno<br>
-				pqr stu vw xyz. A bc<br>
-				def g hij klm nopqrs
-			</div>
-
-			<div class="col" style="left: 350px">
-				tuv wxy z. Abc de fg<br>
-				hi jklmno. Pqrstu vw<br>
-				x yz. Abc def ghi jkl.<br>
-				M nop qrst uv wx yz.<br>
-				Ab cde fgh i jkl. Mno<br>
-			</div>
-
-			<div class="col" style="left: 525px">
-				pqr stu vw xyz.
-				<div class=rep style="width: 140px; height: 40px; background: silver; font-size: 1.5em; padding: 5px; margin: 0; position: static">An H2 element</div>
-				A bc def g hij klm
-			</div>
-
-			<div class="col" style="left: 700px">
-				nopqrs tuv wxy z.
-			</div>
-
-			<div class=gap style="left: 150px"></div>
-			<div class=gap style="left: 325px"></div>
-			<div class=gap style="left: 500px"></div>
-			<div class=gap style="left: 675px"></div>
-		</div>
+		<figure>
+			<img src="images/h2-in-the-overflow-no-span.svg" alt="The h2 element is in an overflow column" style="max-height: 107px;">
+			<figcaption>The h2 element is in an overflow column and appears as if column-span none is specified</figcaption>
+		</figure>
 	</div>
 
 	<div class="example">
 		This example is similar to the previous example,
 		except that the H2 element appears naturally in the last column.
 		Still, there is not enough room to make the element spanning.
 
-		<div class=cols style="height: 100px">
-			<div class="col" style="">
-				Ab cde fgh i jkl. Mno<br>
-				pqr stu vw xyz. A bc<br>
-				def g hij klm nopqrs<br>
-				tuv wxy z. Abc de fg<br>
-				hi jklmno. Pqrstu vw<br>
-			</div>
-
-			<div class="col" style="left: 175px">
-				x yz. Abc def ghi jkl.<br>
-				M nop qrst uv wx yz.<br>
-				Ab cde fgh i jkl. Mno<br>
-				pqr stu vw xyz. A bc<br>
-				def g hij klm nopqrs
-			</div>
-
-			<div class="col" style="left: 350px">
-				tuv wxy z. Abc de fg<br>
-				hi jklmno.
-				<div class=rep style="width: 140px; height: 40px; background: silver; font-size: 1.5em; padding: 5px; margin: 0; position: static">An H2 element</div>
-			</div>
-
-			<div class="col" style="left: 525px">
-				A bc def g hij klm<br>
-				nop w rstu vw xyz.
-			</div>
-
-			<div class=gap style="left: 150px"></div>
-			<div class=gap style="left: 325px"></div>
-			<div class=gap style="left: 500px"></div>
-		</div>
+		<figure>
+			<img src="images/h2-in-the-last-column-no-span.svg" alt="The h2 element is in the final column" style="max-height: 107px;">
+			<figcaption>The h2 element is in the final column and appears as if column-span none is specified</figcaption>
+		</figure>
 	</div>
 
 	<div class="example">