[css-logical][css-writing-modes] Improve figure caption, adjust markup. w3c#5505

Author: fantasai

css-logical-1/Overview.bs

@@ -25,7 +25,7 @@ spec:css-writing-modes-3; type:dfn; text:end
   @media (min-width: 40em) {
     #mapping-diagram figure {
       width: 49%;
-      float: right;
+      float: left;
     }
     #mapping-diagram figure:first-of-type {
       margin-right: 2%;
@@ -117,7 +117,7 @@ Introduction</h2>
     <figure>
       <img src="diagrams/sizing-ttb-rl.svg">
       <figcaption>
-        Correspondence of physical and flow-relative terms in typical Chinese text layout
+        Correspondence of physical and flow-relative terms in vertical Chinese text layout
       </figcaption>
     </figure>
   </div>

css-writing-modes-3/Overview.bs

@@ -1583,24 +1583,20 @@ Flow-relative Directions</h3>
     are used in place of <a>block-start</a>/<a>inline-start</a>
     and <a>block-end</a>/<a>inline-end</a>, respectively.
 
+  <figure>
+    <img src="diagrams/sizing-ltr-tb.svg">
+    <figcaption>Physical/logical terms as applicable to typical English text layout</figcaption>
+  </figure>
+  <figure>
+    <img src="diagrams/sizing-ttb-rl.svg">
+    <figcaption>Physical/logical terms as applicable to vertical Chinese text layout</figcaption>
+  </figure>
+
   <p class="note">Note that while determining the <a>block-start</a> and
     <a>block-end</a> sides of a box depends only on the 'writing-mode' property,
     determining the <a>inline-start</a> and <a>inline-end</a> sides of a box depends
     not only on the 'writing-mode' property but also the 'direction' property.</p>
 
-  <div class="example">
-    <figure>
-      <img src="diagrams/sizing-ltr-tb.svg">
-      <figcaption>Physical/logical terms as applicable to typical English text layout</figcaption>
-    </figure>
-  </div>
-  <div class="example">
-    <figure>
-      <img src="diagrams/sizing-ttb-rl.svg">
-      <figcaption>Physical/logical terms as applicable to typical Chinese text layout</figcaption>
-    </figure>
-  </div>
-
 <h3 id="line-directions">
 Line-relative Directions</h3>
 

css-writing-modes-4/Overview.bs

@@ -1655,24 +1655,20 @@ Flow-relative Directions</h3>
     are used in place of <a>block-start</a>/<a>inline-start</a>
     and <a>block-end</a>/<a>inline-end</a>, respectively.
 
+  <figure>
+    <img src="diagrams/sizing-ltr-tb.svg">
+    <figcaption>Physical/logical terms as applicable to typical English text layout</figcaption>
+  </figure>
+  <figure>
+    <img src="diagrams/sizing-ttb-rl.svg">
+    <figcaption>Physical/logical terms as applicable to vertical Chinese text layout</figcaption>
+  </figure>
+
   <p class="note">Note that while determining the <a>block-start</a> and
     <a>block-end</a> sides of a box depends only on the 'writing-mode' property,
     determining the <a>inline-start</a> and <a>inline-end</a> sides of a box depends
     not only on the 'writing-mode' property but also the 'direction' property.</p>
 
-  <div class="example">
-    <figure>
-      <img src="diagrams/sizing-ltr-tb.svg">
-      <figcaption>Physical/logical terms as applicable to typical English text layout</figcaption>
-    </figure>
-  </div>
-  <div class="example">
-    <figure>
-      <img src="diagrams/sizing-ttb-rl.svg">
-      <figcaption>Physical/logical terms as applicable to typical Chinese text layout</figcaption>
-    </figure>
-  </div>
-
 <h3 id="line-directions">
 Line-relative Directions</h3>