[css-text] Move bidi of line boxes section to Edge Effects, where it's less in-the-way. Fix some markup errors.

Author: fantasai

css-text/Overview.html

@@ -283,10 +283,6 @@ <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
     <ul class=toc>
      <li><a href="#text-align"><span class=secno>7.1. </span> Text Alignment:
       the ‘<code class=property>text-align</code>’ property</a>
-      <ul class=toc>
-       <li><a href="#bidi-linebox"><span class=secno>7.1.1. </span>
-        Bidirectionality and Line Boxes</a>
-      </ul>
 
      <li><a href="#text-align-last"><span class=secno>7.2. </span> Last Line
       Alignment: the ‘<code class=property>text-align-last</code>’
@@ -314,6 +310,9 @@ <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
      <li><a href="#hanging-punctuation"><span class=secno>9.2. </span>
       Hanging Punctuation: the ‘<code
       class=property>hanging-punctuation</code>’ property</a>
+
+     <li><a href="#bidi-linebox"><span class=secno>9.3. </span>
+      Bidirectionality and Line Boxes</a>
     </ul>
 
    <li><a href="#conformance"><span class=secno>10. </span> Conformance</a>
@@ -1450,11 +1449,13 @@ <h3 id=word-break><span class=secno>5.3. </span> Breaking Rules for
     allowed to break between any two letters, rather than only at spaces or
     hyphenation points; this can be enabled with ‘<a
     href="#break-all"><code class=css>word-break:break-all</code></a>’.
-    <figure> <img
+
+   <div class=figure> <img
     alt="A snippet of Japanese text with English in it. The word 'caption' is broken into 'capt' and 'ion' across two lines."
-    src=break-all.png> <figcaption>An example of English text embedded in
-    Japanese being broken at an arbitrary point in the word.</figcaption>
-    </figure>
+    src=break-all.png>
+    <p class=caption>An example of English text embedded in Japanese being
+     broken at an arbitrary point in the word.
+   </div>
 
    <p>As another example, Korean has two styles of line-breaking: between any
     two Korean syllables (‘<code class=css>word-break: normal</code>’)
@@ -1827,12 +1828,14 @@ <h3 id=text-align><span class=secno>7.1. </span> Text Alignment: the ‘<a
    <dt><dfn id=start title="text-align:start">‘<code
     class=css>start</code>’</dfn>
 
-   <dd>Inline-level content is aligned to the start edge of the line box.
+   <dd>Inline-level content is aligned to the <i>start</i> edge of the line
+    box.
 
    <dt><dfn id=end title="text-align:end">‘<code
     class=css>end</code>’</dfn>
 
-   <dd>Inline-level content is aligned to the end edge of the line box.
+   <dd>Inline-level content is aligned to the <i>end</i> edge of the line
+    box.
 
    <dt><dfn id=left title="text-align:left">‘<code
     class=css>left</code>’</dfn>
@@ -1919,105 +1922,16 @@ <h3 id=text-align><span class=secno>7.1. </span> Text Alignment: the ‘<a
    href="#white-space-rules">white space processing rules</a>.
 
   <p>If (after justification, if any) the inline contents of a line box are
-   too long to fit within it, then the contents are start-aligned: any
-   content that doesn't fit overflows the line box's end edge.
-
-  <h4 id=bidi-linebox><span class=secno>7.1.1. </span> Bidirectionality and
-   Line Boxes</h4>
-
-  <p>The start and end edges of a line box are determined by the inline base
-   direction of the line box. In most cases, this is given by its containing
-   block's computed ‘<code class=property>direction</code>’. However if
-   its containing block has ‘<code class=css>unicode-bidi:
-   plaintext</code>’ <a href="#CSS3-WRITING-MODES"
-   rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>,
-   the inline base direction the line box must be determined by the base
-   direction of the bidi paragraph to which it belongs: that is, the bidi
-   paragraph for which the line box holds content. An empty line box (i.e.
-   one that contains no atomic inlines or characters other than the
-   line-breaking character, if any), takes its inline base direction from the
-   preceding line box (if any), or, if this is the first line box in the
-   containing block, then from the ‘<code
-   class=property>direction</code>’ property of the containing block.
-
-  <div class=example>
-   <p>In the following example, assuming the <code>&lt;block&gt;</code> is a
-    preformatted block (‘<code class=css>display: block; white-space:
-    pre</code>’) inheriting ‘<code class=css>text-align: start</code>’,
-    every other line is right-aligned:
-
-   <pre>&lt;block style="unicode-bidi: plaintext"&gt;
-<!-- -->  Latin
-<!-- -->  و·کمی
-<!-- -->  Latin
-<!-- -->  و·کمی
-<!-- -->  Latin
-<!-- -->  و·کمی
-<!-- -->&lt;/block&gt;</pre>
-  </div>
-
-  <p class=note>Note that the inline base direction determined here applies
-   to the line box itself, and not to its contents. It affects ‘<a
-   href="#text-align0"><code class=property>text-align</code></a>’, ‘<a
-   href="#text-align-last0"><code
-   class=property>text-align-last</code></a>’, ‘<a
-   href="#text-indent0"><code class=property>text-indent</code></a>’, and
-   ‘<a href="#hanging-punctuation0"><code
-   class=property>hanging-punctuation</code></a>’, i.e. the position and
-   alignment of its contents with respect to its edges. It does not affect
-   the formatting or ordering of its content.
-
-  <div class=example>
-   <p>In the following example:
-
-   <pre>
-<!-- -->&lt;para style="display: block; direction: rtl; unicode-bidi:plaintext">
-<!-- -->&lt;quote style="unicode-bidi:plaintext">שלום!&lt;/quote>", he said.
-<!-- -->&lt;/para&gt;</pre>
-
-   <p>The result should be a left-aligned line looking like this:
-
-   <pre>"!שלום", he said.</pre>
-
-   <p>The line is left-aligned (despite the containing block having ‘<code
-    class=css>direction: rtl</code>’) because the containing block (the
-    <code>&lt;para></code>) has ‘<code
-    class=css>unicode-bidi:plaintext</code>’, and the line box belongs to a
-    bidi paragraph that is LTR. This is because that paragraph's first
-    character with a strong direction is the LTR "h" from "he". The RTL
-    "שלום!" does precede the "he", but it sits in its own bidi-isolated
-    paragraph that is <em>not</em> immediately contained by the
-    <code>&lt;para&gt;</code>, and is thus irrelevent to the line box's
-    alignment. From from the standpoint of the bidi paragraph immediately
-    contained by the <code>&lt;para&gt;</code> containing block, the
-    <code>&lt;quote&gt;</code>’s bidi-isolated paragraph inside it is, by
-    definition, just a neutral U+FFFC character, so the immediately-contained
-    paragraph becomes LTR by virtue of the "he" following it.
-  </div>
+   too long to fit within it, then the contents are <i>start</i>-aligned: any
+   content that doesn't fit overflows the line box's <i>end</i> edge.
 
-  <div class=example>
-   <pre>
-<!-- -->&lt;fieldset style="direction: rtl">
-<!-- -->&lt;textarea style="unicode-bidi:plaintext">
-<!-- -->
-<!-- -->Hello!
-<!-- -->
-<!-- -->&lt;/textarea>
-<!-- -->&lt;/fieldset></pre>
-
-   <p>As expected, the "Hello!" should be displayed LTR (i.e. with the
-    exclamation mark on the right end, despite the
-    <code>&lt;textarea></code>‘<code class=css>s </code>’‘<code
-    class=css>direction:rtl</code>’‘<code class=css>) and left-aligned.
-    This makes the empty line following it left-aligned as well, which means
-    that the caret on that line should appear at its left edge. The first
-    empty line, on the other hand, should be right-aligned, due to the RTL
-    direction of its containing paragraph, the <code>&lt;textarea></code>.
-    </code>
-  </div>
+  <p>See <a href="#bidi-linebox">Bidirectionality and line boxes</a> for
+   details on how to determine the <i>start</i> and <i>end</i> edges of a
+   line box.
 
   <h3 id=text-align-last><span class=secno>7.2. </span> Last Line Alignment:
-   the ’text-align-last' property</h3>
+   the ‘<a href="#text-align-last0"><code
+   class=property>text-align-last</code></a>’ property</h3>
 
   <table class=propdef>
    <tbody>
@@ -3192,6 +3106,104 @@ <h3 id=hanging-punctuation><span class=secno>9.2. </span> Hanging
     is pushed outside the line.
   </div>
 
+  <h3 id=bidi-linebox><span class=secno>9.3. </span> Bidirectionality and
+   Line Boxes</h3>
+
+  <p>The <a
+   href="http://www.w3.org/TR/css3-writing-modes/#start"><i>start</i></a> and
+   <a href="http://www.w3.org/TR/css3-writing-modes/#end"><i>end</i></a>
+   edges of a line box are determined by the <i>inline base direction</i> of
+   the line box. In most cases, this is given by its containing block's
+   computed ‘<code class=property>direction</code>’.
+
+  <p>However if its containing block has ‘<code class=css>unicode-bidi:
+   plaintext</code>’ <a href="#CSS3-WRITING-MODES"
+   rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>,
+   the line box's <i>inline base direction</i> must be determined by the
+   <i>base direction</i> of the <i>bidi paragraph</i> to which it belongs:
+   that is, the <i>bidi paragraph</i> for which the line box holds content.
+   An empty line box (i.e. one that contains no atomic inlines or characters
+   other than the line-breaking character, if any), takes its <i>inline base
+   direction</i> from the preceding line box (if any), or, if this is the
+   first line box in the containing block, then from the ‘<code
+   class=property>direction</code>’ property of the containing block.
+
+  <div class=example>
+   <p>In the following example, assuming the <code>&lt;block&gt;</code> is a
+    preformatted block (‘<code class=css>display: block; white-space:
+    pre</code>’) inheriting ‘<code class=css>text-align: start</code>’,
+    every other line is right-aligned:
+
+   <pre>&lt;block style="unicode-bidi: plaintext"&gt;
+<!-- -->  Latin
+<!-- -->  و·کمی
+<!-- -->  Latin
+<!-- -->  و·کمی
+<!-- -->  Latin
+<!-- -->  و·کمی
+<!-- -->&lt;/block&gt;</pre>
+  </div>
+
+  <p class=note>Note that the inline base direction determined here applies
+   to the line box itself, and not to its contents. It affects ‘<a
+   href="#text-align0"><code class=property>text-align</code></a>’, ‘<a
+   href="#text-align-last0"><code
+   class=property>text-align-last</code></a>’, ‘<a
+   href="#text-indent0"><code class=property>text-indent</code></a>’, and
+   ‘<a href="#hanging-punctuation0"><code
+   class=property>hanging-punctuation</code></a>’, i.e. the position and
+   alignment of its contents with respect to its edges. It does not affect
+   the formatting or ordering of its content.
+
+  <div class=example>
+   <p>In the following example:
+
+   <pre>
+<!-- -->&lt;para style="display: block; direction: rtl; unicode-bidi:plaintext">
+<!-- -->&lt;quote style="unicode-bidi:plaintext">שלום!&lt;/quote>", he said.
+<!-- -->&lt;/para&gt;</pre>
+
+   <p>The result should be a left-aligned line looking like this:
+
+   <pre>"!שלום", he said.</pre>
+
+   <p>The line is left-aligned (despite the containing block having ‘<code
+    class=css>direction: rtl</code>’) because the containing block (the
+    <code>&lt;para></code>) has ‘<code
+    class=css>unicode-bidi:plaintext</code>’, and the line box belongs to a
+    bidi paragraph that is LTR. This is because that paragraph's first
+    character with a strong direction is the LTR "h" from "he". The RTL
+    "שלום!" does precede the "he", but it sits in its own bidi-isolated
+    paragraph that is <em>not</em> immediately contained by the
+    <code>&lt;para&gt;</code>, and is thus irrelevent to the line box's
+    alignment. From from the standpoint of the bidi paragraph immediately
+    contained by the <code>&lt;para&gt;</code> containing block, the
+    <code>&lt;quote&gt;</code>’s bidi-isolated paragraph inside it is, by
+    definition, just a neutral U+FFFC character, so the immediately-contained
+    paragraph becomes LTR by virtue of the "he" following it.
+  </div>
+
+  <div class=example>
+   <pre>
+<!-- -->&lt;fieldset style="direction: rtl">
+<!-- -->&lt;textarea style="unicode-bidi:plaintext">
+<!-- -->
+<!-- -->Hello!
+<!-- -->
+<!-- -->&lt;/textarea>
+<!-- -->&lt;/fieldset></pre>
+
+   <p>As expected, the "Hello!" should be displayed LTR (i.e. with the
+    exclamation mark on the right end, despite the
+    <code>&lt;textarea></code>‘<code class=css>s </code>’‘<code
+    class=css>direction:rtl</code>’‘<code class=css>) and left-aligned.
+    This makes the empty line following it left-aligned as well, which means
+    that the caret on that line should appear at its left edge. The first
+    empty line, on the other hand, should be right-aligned, due to the RTL
+    direction of its containing paragraph, the <code>&lt;textarea></code>.
+    </code>
+  </div>
+
   <h2 id=conformance><span class=secno>10. </span> Conformance</h2>
 
   <h3 id=conventions><span class=secno>10.1. </span> Document Conventions</h3>
@@ -3309,7 +3321,7 @@ <h3 id=testing><span class=secno>10.5. </span>Non-Experimental
    W3C are subject to review and correction by the CSS Working Group.
 
   <p>Further information on submitting testcases and implementation reports
-   can be found from on the CSS Working Group's website at <a
+   can be found from on the CSS Working Group’s website at <a
    href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
    Questions should be directed to the <a
    href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>