Improve diagrams

Author: fantasai

css3-writing-modes/Overview.html

@@ -500,9 +500,10 @@ <h2 id=text-direction><span class=secno>2. </span> Inline Direction and
    id=bidirectionality0>bidirectionality</dfn></span>, or "bidi" for short.
 
   <div class=figure>
-   <pre><span dir=rtl>با Unicode بنویس.</span> <!-- -->
-<!--  -->&lt;----- ------> &lt;-
-<!--  -->&lt;================</pre>
+   <p><img alt="An example of bidirectional text is a Latin name in an Arabic
+    sentence. The sentence overall is typeset right-to-left, but the letters
+    in the Latin word in the middle are typeset left-to-right."
+    src="diagrams/bidi.png">
 
    <p class=caption>Bidirectionality</p>
   </div>
@@ -2241,15 +2242,13 @@ <h3 id=vertical-layout><span class=secno>7.1. </span> Principles of Layout
      class=css>*-left</code>&rsquo; and &lsquo;<code
      class=css>*-right</code>&rsquo; box properties (border, margin, padding)
      use &lsquo;<code class=css>*-top</code>&rsquo; and &lsquo;<code
-     class=css>*-bottom</code>&rsquo; instead, and vice versa.
-
-    <p class=note>Which side of the box the property applies to doesn't
-     change: only which values are inputs to which layout calculations
-     changes. The &lsquo;<code class=property>margin-left</code>&rsquo;
-     property still affects the lefthand margin, for example; however in a
-     &lsquo;<a href="#vertical-rl"><code
-     class=css>vertical-rl</code></a>&rsquo; writing mode it takes part in
-     margin collapsing in place of &lsquo;<code
+     class=css>*-bottom</code>&rsquo; instead, and vice versa. Which side of
+     the box the property applies to doesn't change: only which values are
+     inputs to which layout calculations changes. The &lsquo;<code
+     class=property>margin-left</code>&rsquo; property still affects the
+     lefthand margin, for example; however in a &lsquo;<a
+     href="#vertical-rl"><code class=css>vertical-rl</code></a>&rsquo;
+     writing mode it takes part in margin collapsing in place of &lsquo;<code
      class=property>margin-bottom</code>&rsquo;.</p>
 
    <li>

css3-writing-modes/Overview.src.html

@@ -233,9 +233,11 @@ <h2 id="text-direction">
     "bidi" for short.</p>
 
   <div class="figure">
-    <pre><span dir="rtl">با Unicode بنویس.</span> <!-- -->
-<!--  -->&lt;----- ------> &lt;-
-<!--  -->&lt;================</pre>
+    <p><img src="diagrams/bidi.png"
+            alt="An example of bidirectional text is a Latin name in an Arabic
+                 sentence. The sentence overall is typeset right-to-left, but
+                 the letters in the Latin word in the middle are typeset
+                 left-to-right.">
     <p class="caption">Bidirectionality</p>
   </div>
 
@@ -1619,8 +1621,7 @@ <h3 id="vertical-layout">
         and vice versa.
     <li><p>Layout rules that refer to the '*-left' and '*-right' box
         properties (border, margin, padding) use '*-top' and '*-bottom'
-        instead, and vice versa.
-        <p class="note">Which side of the
+        instead, and vice versa. Which side of the
         box the property applies to doesn't change: only which values
         are inputs to which layout calculations changes. The 'margin-left'
         property still affects the lefthand margin, for example; however