[css-rhythm-1] figure/figcaption conversion

Author: nschonni

css-rhythm-1/Overview.bs

@@ -50,11 +50,11 @@ Introduction {#intro}
 	lines of text in different fonts can create consistent visuals
 	to help readability.
 
-	<div class="figure">
+	<figure>
 		<a href="examples/snap-height.html">
 			<img src="images/snap-height-sample.png"></a>
-		<p class="caption">Vertical rhythm kept through pictures and different size of text in a multi-column document.
-	</div>
+		<figcaption>Vertical rhythm kept through pictures and different size of text in a multi-column document.</figcaption>
+	</figure>
 
 East Asian Casual Vertical Rhythms {#eastasia}
 ----------------------------------------------
@@ -134,21 +134,21 @@ Adjusting Block-level Box Heights {#block-height}
 	This allows content before and after the interruption
 	to maintain a continuous rhythm.
 
-		<div class="figure">
+		<figure>
 			<img src="images/block-step-size-before.png"
-			style="width: 500px">
+			width="500">
 			<figcaption>Heads and blockquotes have varying font sizes and line heights,
 			resulting in uneven text across columns.</figcaption>
-		</div>
+		</figure>
 
 
 
-		<div class="figure">
+		<figure>
 			<img src="images/block-step-size-after.png"
-			style="width: 500px">
+			width="500">
 			<figcaption>Space inserted before and after blocks (shown with colored borders)
 			restores vertical rhythm.</figcaption>
-		</div>
+		</figure>
 
 	While consistent use of the block step properties
 	can produce the strictly gridded layout needed
@@ -396,18 +396,18 @@ by making heights of all lines an integer multiple of the <a>step unit</a>.
 	This inline-level box does not affect alignment points of the 'vertical-align' property,
 	except values that align relative to the line box.
 
-	<div class="figure">
+	<figure>
 	<img src="images/adjust-line-height.svg">
-	<p class="caption">Rounding up the computed line box height.
-	</div>
+	<figcaption>Rounding up the computed line box height.</figcaption>
+	</figure>
 
 	<div class="issue">Should this be animatable?
 	There doesn't seem to be use cases but needed for consistency?</div>
 
 	<div class="example">
-		<div class="figure" style="float:right">
-			<img src="images/line-grid-center.svg" style="height: 300px">
-		</div>
+		<figure style="float:right">
+			<img src="images/line-grid-center.svg" height="300">
+		</figure>
 
 		In the following example,
 		the height of line box in each paragraph is rounded up to the <a>step unit</a>.