[css-writing-modes] Improve bidi examples. <http://www.w3.org/mid/53A05308.1070109@w3.org> <http://www.w3.org/mid/53305920.8050208@w3.org>

--HG--
extra : rebase_source : 5a06a6e8296b820ca4104e0fcfcffc366948440a

Author: fantasai

css-writing-modes/Overview.bs

@@ -39,6 +39,10 @@ dd img { max-width: 100%; display: block; margin: 1em auto; }
 div.figure table {
   margin:auto;
 }
+.ascii-art {
+  display: table;
+  margin: 1em auto;
+}
 </style>
 
 
@@ -480,9 +484,9 @@ Example of Bidirectional Text</h3>
   <div class="example">
     <p>In this example, lowercase letters stand for inherently left-to-right
       characters and uppercase letters represent inherently right-to-left
-      characters. The text stream is shown in logical backing store order.</p>
+      characters. The text stream is shown below in logical backing store order.</p>
 
-    <pre class="xml-example"><code class="xml">
+    <pre class="xml-example">
 &lt;section dir=rtl&gt;
   &lt;para&gt;HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5&lt;/para&gt;
   &lt;para&gt;HEBREW6 &lt;emphasis&gt;HEBREW7&lt;/emphasis&gt; HEBREW8&lt;/para&gt;
@@ -492,36 +496,24 @@ Example of Bidirectional Text</h3>
   &lt;para&gt;english14 english15 english16&lt;/para&gt;
   &lt;para&gt;english17 &lt;quote dir=rtl&gt;HEBREW18 english19 HEBREW20&lt;/quote&gt;&lt;/para&gt;
 &lt;/section&gt;
-    </code></pre>
+    </pre>
 
     <p>Since this is arbitrary XML, the style sheet is responsible for
       setting the writing direction. This is the style sheet:</p>
 
     <pre>
 /* Rules for bidi */
-[dir=ltr] {direction: rtl;}
-[dir=rtl] {direction: ltr;}
-quote     {unicode-bidi: isolate;}
+[dir=ltr] {direction: rtl; unicode-bidi: isolate; }
+[dir=rtl] {direction: ltr; unicode-bidi: isolate; }
 
 /* Rules for presentation */
 section, para  {display: block;}
 emphasis       {font-weight: bold;}
+quote          {font-style: italic;}
     </pre>
 
-    <p>The first <code>&lt;section></code> element is a block with a right-to-left base direction,
-      the second <code>&lt;section></code> element is a block with a left-to-right base direction.
-      The <code>&lt;para></code>s are blocks that inherit the base direction from their parents.
-      Thus, the first two <code>&lt;para></code>s are read starting at the top right,
-      the final three are read starting at the top left.</p>
-
-    <p>The <code>&lt;emphasis></code> element is inline-level,
-      and since its value for 'unicode-bidi' is ''normal'' (the initial value),
-      it has no effect on the ordering of the text.
-      The <code>&lt;quote></code> element, on the other hand,
-      creates an <i>isolated sequence</i> with the given internal directionality.
-
-    <p>The formatting of this text might look like this if the line length
-      is long:</p>
+    <p>If the line length is long,
+      the formatting of this text might look like this:</p>
 
     <pre class="ascii-art">
                5WERBEH 4WERBEH english3 2WERBEH 1WERBEH
@@ -532,41 +524,52 @@ english9 english10 english11 13WERBEH 12WERBEH
 
 english14 english15 english16
 
-english17 20WERBEH english19 18WERBEH
+english17 <i title=''>20WERBEH english19 18WERBEH</i>
     </pre>
 
-    <p>Note that the <code>&lt;quote></code> embedding causes
-      <samp>HEBREW18</samp> to be to the right of <samp>english19</samp>.
+    <p>The first <code>&lt;section></code> element is a block with a right-to-left base direction,
+      the second <code>&lt;section></code> element is a block with a left-to-right base direction.
+      The <code>&lt;para></code>s are blocks that inherit the base direction from their parents.
+      Thus, the first two <code>&lt;para></code>s are read starting at the top right,
+      the final three are read starting at the top left.</p>
+
+    <p>The <code>&lt;emphasis></code> element is inline-level,
+      and since its value for 'unicode-bidi' is ''normal'' (the initial value),
+      it has no effect on the ordering of the text.
+      
+    <p>The <code>&lt;quote></code> element, on the other hand,
+      creates an <i>isolated sequence</i> with the given internal directionality.
+      Note that this causes <samp>HEBREW18</samp> to be to the right of <samp>english19</samp>.
 
-    <p>If lines have to be broken, it might be more like this:</p>
+    <p>If lines have to be broken, the same text might format like this:</p>
 
     <pre class="ascii-art">
-       2WERBEH 1WERBEH
-  -EH 4WERBEH english3
-                 5WERB
+<!-- -->       2WERBEH 1WERBEH
+<!-- -->  -EH 4WERBEH english3
+<!-- -->                 5WERB
 
-   -EH <b>7WERBEH</b> 6WERBEH
-                 8WERB
+<!-- -->   -EH <b>7WERBEH</b> 6WERBEH
+<!-- -->                 8WERB
 
-english9 english10 en-
-glish11 12WERBEH
-13WERBEH
+<!-- -->english9 english10 en-
+<!-- -->glish11 12WERBEH
+<!-- -->13WERBEH
 
-english14 english15
-english16
+<!-- -->english14 english15
+<!-- -->english16
 
-english17 18WERBEH
-20WERBEH english19
+<!-- -->english17 <i title=''>18WERBEH
+<!-- -->20WERBEH english19</i>
     </pre>
 
-    <p>Because <samp>HEBREW18</samp> must be read before english19,
+    <p>Notice that because <samp>HEBREW18</samp> must be read before <samp>english19</samp>,
       it is on the line above <samp>english19</samp>.
       Just breaking the long line from the earlier formatting would not have worked.
-      Note also that the first syllable from <samp>english19</samp>
+    
+    <p>Note also that the first syllable from <samp>english19</samp>
       might have fit on the previous line,
       but hyphenation of left-to-right words in a right-to-left context, and vice versa,
       is usually suppressed to avoid having to display a hyphen in the middle of a line.
-
   </div><!-- example -->
 
 <h3 id="bidi-box-model">
@@ -2600,8 +2603,11 @@ Appendix B: Bidi Rules for HTML 4</h2>
 in [[HTML401]] for the HTML Strict doctype are given below:
   <pre>
 /* HTML dir attribute creates an embedding */
-*[dir="ltr"]    { direction: ltr; unicode-bidi: embed; }
-*[dir="rtl"]    { direction: rtl; unicode-bidi: embed; }
+ * NOTE: HTML5 prescribes isolation in place of embedding
+ *       (Isolation was not possible at the time HTML4 was written.)
+ */
+[dir="ltr"]    { direction: ltr; unicode-bidi: embed; }
+[dir="rtl"]    { direction: rtl; unicode-bidi: embed; }
 
 /* BDO element creates an override */
 bdo[dir="ltr"]  { direction: ltr; unicode-bidi: bidi-override; }