[css-ruby] Organize ruby overhang information together

Author: fantasai

css-ruby/Overview.html

@@ -232,8 +232,14 @@ <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
       property</a>
     </ul>
 
-   <li><a href="#rubyover"><span class=secno>4. </span> Ruby Overhang and
-    Edge Effects</a>
+   <li><a href="#edge-effects"><span class=secno>4. </span> Edge Effects</a>
+    <ul class=toc>
+     <li><a href="#ruby-overhang"><span class=secno>4.1. </span> Overhanging
+      Ruby</a>
+
+     <li><a href="#line-edge"><span class=secno>4.2. </span> Line-edge
+      Alignment</a>
+    </ul>
 
    <li class=no-num><a href="#default-stylesheet"> Appendix A: Default Style
     Sheet</a>
@@ -652,165 +658,6 @@ <h3 id=box-model><span class=secno>2.4. </span> Generating Ruby Structure</h3>
 
   <h3 id=box-model><span class=secno>2.5. </span> Ruby box model</h3>
 
-  <p>In the following description, the elements specified by Ruby Annotation
-   <a href="#RUBY" rel=biblioentry>[RUBY]<!--{{RUBY}}--></a> are used to
-   describe the box model. As mentioned earlier, a user agent can obtain the
-   same results by using the Ruby specific ‘<code
-   class=property>display</code>’ property values.
-
-  <p>For a user agent that supports the ruby markup, the ruby structure
-   consists of three or more boxes. The outermost container is the <a
-   href="http://www.w3.org/TR/ruby/#ruby"><samp>ruby</samp></a> element
-   itself. In the simple case, it is a container for two non-overlapping
-   boxes: the ruby text box (<a
-   href="http://www.w3.org/TR/ruby/#rt"><samp>rt</samp></a> element) and the
-   ruby base box (<a href="http://www.w3.org/TR/ruby/#rb"><samp>rb</samp></a>
-   element). The positioning of these two boxes relative to each other is
-   controlled by the <a href="#rubypos">‘<code
-   class=property>ruby-position</code>’</a> property.
-
-  <div class=figure> <img
-   alt="Diagram of the ruby box model    consisting of two boxes, one on top of the other, enclosed within a third box representing the ruby element"
-   class=example height=93 src="images/r-box-t.gif" width=223>
-   <p><b>Figure 3.2.1</b>: Ruby box model (simple case)
-  </div>
-
-  <p>In the case of complex ruby, the ruby element is a container for two or
-   three non-overlapping boxes: one ruby base collection (<a
-   href="http://www.w3.org/TR/ruby/#rbc"><samp>rbc</samp></a> element), and
-   one or two ruby text collections (<a
-   href="http://www.w3.org/TR/ruby/#rtc"><samp>rtc</samp></a> element). The
-   <samp>rbc</samp> element is itself a container for one or several ruby
-   base box (<samp>rb</samp> element), while each <samp>rtc</samp> element is
-   a container for one or several ruby text box (rt element). The position of
-   the <samp>rtc</samp> element in relation to the related <samp>rbc</samp>
-   element is controlled by the <a href="#rubypos">‘<code
-   class=property>ruby-position</code>’</a> property. The two following
-   figures show examples of these complex ruby.
-
-  <div class=figure> <img
-   alt="Diagram of a group ruby with a full ruby    text above and partial ruby text below"
-   height=170 src="images/r-box-g.gif" width=408>
-   <p><b>Figure 3.2.2</b>: Ruby box model (complex ruby with an empty rt
-    element after)
-  </div>
-
-  <p>In the example above, the ruby text after (below) the ruby bases
-   contains two <samp>rt</samp> elements with the first one being empty, the
-   empty <samp>rt</samp> element corresponds to the first part of the ruby
-   base collection (the first part is identified by the first <samp>rb</samp>
-   element within the <samp> rbc</samp> element).
-
-  <div class=figure> <img
-   alt="Diagram of a group ruby with a spanning    ruby text above and partial ruby text below"
-   height=173 src="images/r-box-h.gif" width=400>
-   <p><b>Figure 3.2.3</b>: Ruby box model (complex ruby with a spanning ruby
-    text element)
-  </div>
-
-  <p>In the example above, the ruby text before (above) the ruby bases spans
-   the whole ruby base collection. The ruby text after (below) the ruby bases
-   still contain two <samp>rt</samp> elements, one of which is empty. The
-   spanning behavior of <samp>rt</samp> text elements is controlled by the <a
-   href="http://www.w3.org/TR/ruby/#ruby"><samp>rbspan</samp></a> attribute
-   in a way similar to the <samp>colspan</samp> attribute used for table
-   column.
-
-  <p class=issue><span class=issuehead>Issue: </span> The examples above
-   contain the term ‘<code class=css>group ruby</code>’, which is not
-   used elsewhere in this specification. It appears to be used in a way that
-   is different to the use of the term in JLREQ. I propose to replace it with
-   just ‘<a href="#ruby"><code class=property>ruby</code></a>’.
-
-  <p class=note><span class=note-label>Note:</span> The visual description of
-   the ruby elements does not refer necessarily to the logical orders of the
-   elements
-
-  <p>The width of the ruby box is by default determined by its widest child
-   element, whose width in turn is determined by its content. The width of
-   all direct children of the <a href="#ruby"><samp>ruby</samp></a> element
-   is the width of the widest children. In this respect, the ruby box is much
-   like a two or three row <samp>table</samp> element, with the following
-   exceptions:
-
-  <ul>
-   <li>the ruby box is an inline element, like an image, even though it
-    itself, like a table, is a container of other boxes
-
-   <li>the equivalent of the cells: the <samp>rb</samp> element and the
-    <samp>rt</samp> text element can only contain inline-level elements.
-
-   <li>the content of each ‘<code class=property>cell</code>’ is always
-    measured at its maximum width
-
-   <li>unlike a table, a ruby element doesn't have to fit in a line, the ruby
-    box may be split into several boxes at line boundary, depending of the
-    spanning of the ruby texts. This is however only possible for the complex
-    ruby and can only happen at the boundary of non spanning elements.
-
-   <li>both the ruby text and the ruby base boxes may overlap with adjacent
-    text (outside of the ruby element) if an appropriate <a
-    href="#rubyover">‘<code class=property>ruby-overhang</code>’</a>
-    parameter is set via CSS. Note however that the actual content of the
-    ruby base cannot overlap with that adjacent text. The distribution of the
-    content of the ruby base within the ruby base box is controlled by the <a
-    href="#rubyalign">‘<code class=property>ruby-align</code>’</a>
-    property.
-  </ul>
-
-  <p>If the ruby text is not allowed to overhang, then the ruby behaves like
-   a traditional box, i.e. only its contents are rendered within its
-   boundaries and adjacent elements do not cross the box boundary:
-
-  <div class=figure>
-   <p><img
-    alt="Diagram showing the ruby boxes interacting with adjacent text"
-    class=example height=91 src="images/ro-n.gif" width=220>
-
-   <p><b>Figure 3.2.4</b>: Simple ruby whose text is not allowed to overhang
-    adjacent text
-  </div>
-
-  <p>However, if ruby text is allowed to overhang adjacent elements and it
-   happens to be wider than its base, then the adjacent content is partially
-   rendered within the area of the ruby base box, while the ruby text may be
-   partially overlapping with the upper blank parts of the adjacent content:
-
-  <div class=figure>
-   <p><img
-    alt="Diagram showing the ruby boxes interacting with adjacent text"
-    class=example height=91 src="images/ro-a.gif" width=177>
-
-   <p><b>Figure 3.2.5</b>: Simple ruby whose text is allowed to overhang
-    adjacent text
-  </div>
-
-  <p>The ruby text related to a ruby base can never overhang another ruby
-   base.
-
-  <p>The alignment of the contents of the base or the ruby text is not
-   affected by the overhanging behavior. The alignment is achieved the same
-   way regardless of the overhang behavior setting and it is computed before
-   the space available for overlap is determined. It is controlled by the <a
-   href="#rubyalign">‘<code class=property>ruby-align</code>’</a>
-   property.
-
-  <p>The exact circumstances in which the ruby text will overhang other
-   elements, and to what degree it will do so, will be controlled by the <a
-   href="#rubyover">‘<code class=property>ruby-overhang</code>’</a>
-   property.
-
-  <p>This entire logic applies the same way in vertical ideographic layout,
-   only the dimension in which it works in such a layout is vertical, instead
-   of horizontal.
-
-  <p class=note><span class=note-label>Note:</span> Because the purpose of
-   the XHTML <samp>rp</samp> element <a href="#RUBY"
-   rel=biblioentry>[RUBY]<!--{{RUBY}}--></a> is to allow pre-existing user
-   agents to parenthesize ruby text content, an XHTML user agent should use a
-   styling rule for these elements that avoids rendering them such as 
-   <samp>rp {display: none}</samp>.
-
   <h3 id=ruby-line-height><span class=secno>2.6. </span> Ruby box and line
    stacking</h3>
 
@@ -1401,16 +1248,62 @@ <h3 id=rubyalign><span class=secno>3.3. </span> Ruby Text Distribution: the
    This ratio is computed by taking into consideration the widest element
    within each column.
 
-  <h2 id=rubyover><span class=secno>4. </span> Ruby Overhang and Edge Effects</h2>
+  <h2 id=edge-effects><span class=secno>4. </span> Edge Effects</h2>
+
+  <h3 id=ruby-overhang><span class=secno>4.1. </span> Overhanging Ruby</h3>
 
   <p> When <a href="#ruby-annotation-box"><i>ruby annotation box</i></a> is
    longer than its corresponding <a href="#ruby-base-box"><i>ruby base
    box</i></a>, the <a href="#ruby-annotation-box"><i>ruby annotation
    box</i></a> may partially overhang adjacent boxes.
 
-  <p> This level of the specificaiton does not define how much the overhang
+  <p> This level of the specification does not define how much the overhang
    may be allowed, and under what conditions.
 
+  <p>If the ruby text is not allowed to overhang, then the ruby behaves like
+   a traditional inline box, i.e. only its own contents are rendered within
+   its boundaries and adjacent elements do not cross the box boundary:
+
+  <div class=figure>
+   <p><img
+    alt="Diagram showing the ruby boxes interacting with adjacent text"
+    src="images/ro-n.gif">
+
+   <p class=caption>Simple ruby whose text is not allowed to overhang
+    adjacent text
+  </div>
+
+  <p>However, if <a href="#ruby-annotation-box"><i>ruby annotation</i></a>
+   content is allowed to overhang adjacent elements and it happens to be
+   wider than its base, then the adjacent content is partially rendered
+   within the area of the <a href="#ruby-container-box"><i>ruby container
+   box</i></a>, while the <a href="#ruby-annotation-box"><i>ruby
+   annotation</i></a> may partially overlap the upper blank parts of the
+   adjacent content:
+
+  <div class=figure>
+   <p><img
+    alt="Diagram showing the ruby boxes interacting with adjacent text"
+    src="images/ro-a.gif">
+
+   <p class=caption>Simple ruby whose text is allowed to overhang adjacent
+    text
+  </div>
+
+  <p>The <a href="#ruby-annotation-box"><i>ruby annotations</i></a> related
+   to a <a href="#ruby-base-box"><i>ruby base</i></a> must never overhang
+   another <a href="#ruby-base-box"><i>ruby base</i></a>.
+
+  <p>The alignment of the contents of the base or the ruby text is not
+   affected by overhanging behavior. The alignment is achieved the same way
+   regardless of the overhang behavior setting and it is computed before the
+   space available for overlap is determined. It is controlled by the ‘<a
+   href="#ruby-align"><code class=property>ruby-align</code></a>’ property.
+
+  <p>This entire logic applies the same way in vertical ideographic layout,
+   only the dimension in which it works in such a layout is vertical, instead
+   of horizontal.
+
   <div class=example>
    <p> The user agent may use <a href="#JIS4051"
     rel=biblioentry>[JIS4051]<!--{{JIS4051}}--></a> recommendation of using
@@ -1420,23 +1313,27 @@ <h2 id=rubyover><span class=secno>4. </span> Ruby Overhang and Edge Effects</h2>
     rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>.
   </div>
 
-  <p> When such <a href="#ruby-annotation-box"><i>ruby annotation box</i></a>
-   is at the start or end edge of a line, user agent may align the side of
-   the ruby text that touches the edge of the line to the corresponding edge
-   of the base. This type of alignment is described by <a href="#JLREQ"
+  <h3 id=line-edge><span class=secno>4.2. </span> Line-edge Alignment</h3>
+
+  <p> When a <a href="#ruby-annotation-box"><i>ruby annotation box</i></a>
+   that is longer than its <a href="#ruby-base-box"><i>ruby base</i></a> is
+   at the start or end edge of a line, the user agent <em>may</em> force the
+   side of the <a href="#ruby-annotation-box"><i>ruby annotation</i></a> that
+   touches the edge of the line to align to the corresponding edge of the
+   base. This type of alignment is described by <a href="#JLREQ"
    rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>.
 
-  <p> This level of the specificaiton does not provide a mechanism to control
+  <p> This level of the specification does not provide a mechanism to control
    this behavior.
 
   <div class=figure>
    <p><img
     alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base"
-    height=109 src="images/ra-le-l.gif" width=146><img
+    src="images/ra-le-l.gif"> <img
     alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base"
-    height=110 src="images/ra-le-r.gif" width=146>
+    src="images/ra-le-r.gif">
 
-   <p><b>Figure 4.2.8</b>: Line edge ruby alignment
+   <p class=caption>Line-edge alignment
   </div>
   <!--
 <h3 id="rubyover">