[css-ruby] Organize ruby overhang information together

Thu, 20 Jun 2013 16:48:33 -0700

author
fantasai <fantasai.cvs@inkedblade.net>
date
Thu, 20 Jun 2013 16:48:33 -0700
changeset 8527
47abcae337d2
parent 8526
eae28530e7d7
child 8528
10a7863032b6

[css-ruby] Organize ruby overhang information together

css-ruby/Overview.html file | annotate | diff | comparison | revisions
css-ruby/Overview.src.html file | annotate | diff | comparison | revisions
     1.1 --- a/css-ruby/Overview.html	Thu Jun 20 15:32:56 2013 -0700
     1.2 +++ b/css-ruby/Overview.html	Thu Jun 20 16:48:33 2013 -0700
     1.3 @@ -232,8 +232,14 @@
     1.4        property</a>
     1.5      </ul>
     1.6  
     1.7 -   <li><a href="#rubyover"><span class=secno>4. </span> Ruby Overhang and
     1.8 -    Edge Effects</a>
     1.9 +   <li><a href="#edge-effects"><span class=secno>4. </span> Edge Effects</a>
    1.10 +    <ul class=toc>
    1.11 +     <li><a href="#ruby-overhang"><span class=secno>4.1. </span> Overhanging
    1.12 +      Ruby</a>
    1.13 +
    1.14 +     <li><a href="#line-edge"><span class=secno>4.2. </span> Line-edge
    1.15 +      Alignment</a>
    1.16 +    </ul>
    1.17  
    1.18     <li class=no-num><a href="#default-stylesheet"> Appendix A: Default Style
    1.19      Sheet</a>
    1.20 @@ -652,165 +658,6 @@
    1.21  
    1.22    <h3 id=box-model><span class=secno>2.5. </span> Ruby box model</h3>
    1.23  
    1.24 -  <p>In the following description, the elements specified by Ruby Annotation
    1.25 -   <a href="#RUBY" rel=biblioentry>[RUBY]<!--{{RUBY}}--></a> are used to
    1.26 -   describe the box model. As mentioned earlier, a user agent can obtain the
    1.27 -   same results by using the Ruby specific ‘<code
    1.28 -   class=property>display</code>’ property values.
    1.29 -
    1.30 -  <p>For a user agent that supports the ruby markup, the ruby structure
    1.31 -   consists of three or more boxes. The outermost container is the <a
    1.32 -   href="http://www.w3.org/TR/ruby/#ruby"><samp>ruby</samp></a> element
    1.33 -   itself. In the simple case, it is a container for two non-overlapping
    1.34 -   boxes: the ruby text box (<a
    1.35 -   href="http://www.w3.org/TR/ruby/#rt"><samp>rt</samp></a> element) and the
    1.36 -   ruby base box (<a href="http://www.w3.org/TR/ruby/#rb"><samp>rb</samp></a>
    1.37 -   element). The positioning of these two boxes relative to each other is
    1.38 -   controlled by the <a href="#rubypos">‘<code
    1.39 -   class=property>ruby-position</code>’</a> property.
    1.40 -
    1.41 -  <div class=figure> <img
    1.42 -   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"
    1.43 -   class=example height=93 src="images/r-box-t.gif" width=223>
    1.44 -   <p><b>Figure 3.2.1</b>: Ruby box model (simple case)
    1.45 -  </div>
    1.46 -
    1.47 -  <p>In the case of complex ruby, the ruby element is a container for two or
    1.48 -   three non-overlapping boxes: one ruby base collection (<a
    1.49 -   href="http://www.w3.org/TR/ruby/#rbc"><samp>rbc</samp></a> element), and
    1.50 -   one or two ruby text collections (<a
    1.51 -   href="http://www.w3.org/TR/ruby/#rtc"><samp>rtc</samp></a> element). The
    1.52 -   <samp>rbc</samp> element is itself a container for one or several ruby
    1.53 -   base box (<samp>rb</samp> element), while each <samp>rtc</samp> element is
    1.54 -   a container for one or several ruby text box (rt element). The position of
    1.55 -   the <samp>rtc</samp> element in relation to the related <samp>rbc</samp>
    1.56 -   element is controlled by the <a href="#rubypos">‘<code
    1.57 -   class=property>ruby-position</code>’</a> property. The two following
    1.58 -   figures show examples of these complex ruby.
    1.59 -
    1.60 -  <div class=figure> <img
    1.61 -   alt="Diagram of a group ruby with a full ruby    text above and partial ruby text below"
    1.62 -   height=170 src="images/r-box-g.gif" width=408>
    1.63 -   <p><b>Figure 3.2.2</b>: Ruby box model (complex ruby with an empty rt
    1.64 -    element after)
    1.65 -  </div>
    1.66 -
    1.67 -  <p>In the example above, the ruby text after (below) the ruby bases
    1.68 -   contains two <samp>rt</samp> elements with the first one being empty, the
    1.69 -   empty <samp>rt</samp> element corresponds to the first part of the ruby
    1.70 -   base collection (the first part is identified by the first <samp>rb</samp>
    1.71 -   element within the <samp> rbc</samp> element).
    1.72 -
    1.73 -  <div class=figure> <img
    1.74 -   alt="Diagram of a group ruby with a spanning    ruby text above and partial ruby text below"
    1.75 -   height=173 src="images/r-box-h.gif" width=400>
    1.76 -   <p><b>Figure 3.2.3</b>: Ruby box model (complex ruby with a spanning ruby
    1.77 -    text element)
    1.78 -  </div>
    1.79 -
    1.80 -  <p>In the example above, the ruby text before (above) the ruby bases spans
    1.81 -   the whole ruby base collection. The ruby text after (below) the ruby bases
    1.82 -   still contain two <samp>rt</samp> elements, one of which is empty. The
    1.83 -   spanning behavior of <samp>rt</samp> text elements is controlled by the <a
    1.84 -   href="http://www.w3.org/TR/ruby/#ruby"><samp>rbspan</samp></a> attribute
    1.85 -   in a way similar to the <samp>colspan</samp> attribute used for table
    1.86 -   column.
    1.87 -
    1.88 -  <p class=issue><span class=issuehead>Issue: </span> The examples above
    1.89 -   contain the term ‘<code class=css>group ruby</code>’, which is not
    1.90 -   used elsewhere in this specification. It appears to be used in a way that
    1.91 -   is different to the use of the term in JLREQ. I propose to replace it with
    1.92 -   just ‘<a href="#ruby"><code class=property>ruby</code></a>’.
    1.93 -
    1.94 -  <p class=note><span class=note-label>Note:</span> The visual description of
    1.95 -   the ruby elements does not refer necessarily to the logical orders of the
    1.96 -   elements
    1.97 -
    1.98 -  <p>The width of the ruby box is by default determined by its widest child
    1.99 -   element, whose width in turn is determined by its content. The width of
   1.100 -   all direct children of the <a href="#ruby"><samp>ruby</samp></a> element
   1.101 -   is the width of the widest children. In this respect, the ruby box is much
   1.102 -   like a two or three row <samp>table</samp> element, with the following
   1.103 -   exceptions:
   1.104 -
   1.105 -  <ul>
   1.106 -   <li>the ruby box is an inline element, like an image, even though it
   1.107 -    itself, like a table, is a container of other boxes
   1.108 -
   1.109 -   <li>the equivalent of the cells: the <samp>rb</samp> element and the
   1.110 -    <samp>rt</samp> text element can only contain inline-level elements.
   1.111 -
   1.112 -   <li>the content of each ‘<code class=property>cell</code>’ is always
   1.113 -    measured at its maximum width
   1.114 -
   1.115 -   <li>unlike a table, a ruby element doesn't have to fit in a line, the ruby
   1.116 -    box may be split into several boxes at line boundary, depending of the
   1.117 -    spanning of the ruby texts. This is however only possible for the complex
   1.118 -    ruby and can only happen at the boundary of non spanning elements.
   1.119 -
   1.120 -   <li>both the ruby text and the ruby base boxes may overlap with adjacent
   1.121 -    text (outside of the ruby element) if an appropriate <a
   1.122 -    href="#rubyover">‘<code class=property>ruby-overhang</code>’</a>
   1.123 -    parameter is set via CSS. Note however that the actual content of the
   1.124 -    ruby base cannot overlap with that adjacent text. The distribution of the
   1.125 -    content of the ruby base within the ruby base box is controlled by the <a
   1.126 -    href="#rubyalign">‘<code class=property>ruby-align</code>’</a>
   1.127 -    property.
   1.128 -  </ul>
   1.129 -
   1.130 -  <p>If the ruby text is not allowed to overhang, then the ruby behaves like
   1.131 -   a traditional box, i.e. only its contents are rendered within its
   1.132 -   boundaries and adjacent elements do not cross the box boundary:
   1.133 -
   1.134 -  <div class=figure>
   1.135 -   <p><img
   1.136 -    alt="Diagram showing the ruby boxes interacting with adjacent text"
   1.137 -    class=example height=91 src="images/ro-n.gif" width=220>
   1.138 -
   1.139 -   <p><b>Figure 3.2.4</b>: Simple ruby whose text is not allowed to overhang
   1.140 -    adjacent text
   1.141 -  </div>
   1.142 -
   1.143 -  <p>However, if ruby text is allowed to overhang adjacent elements and it
   1.144 -   happens to be wider than its base, then the adjacent content is partially
   1.145 -   rendered within the area of the ruby base box, while the ruby text may be
   1.146 -   partially overlapping with the upper blank parts of the adjacent content:
   1.147 -
   1.148 -  <div class=figure>
   1.149 -   <p><img
   1.150 -    alt="Diagram showing the ruby boxes interacting with adjacent text"
   1.151 -    class=example height=91 src="images/ro-a.gif" width=177>
   1.152 -
   1.153 -   <p><b>Figure 3.2.5</b>: Simple ruby whose text is allowed to overhang
   1.154 -    adjacent text
   1.155 -  </div>
   1.156 -
   1.157 -  <p>The ruby text related to a ruby base can never overhang another ruby
   1.158 -   base.
   1.159 -
   1.160 -  <p>The alignment of the contents of the base or the ruby text is not
   1.161 -   affected by the overhanging behavior. The alignment is achieved the same
   1.162 -   way regardless of the overhang behavior setting and it is computed before
   1.163 -   the space available for overlap is determined. It is controlled by the <a
   1.164 -   href="#rubyalign">‘<code class=property>ruby-align</code>’</a>
   1.165 -   property.
   1.166 -
   1.167 -  <p>The exact circumstances in which the ruby text will overhang other
   1.168 -   elements, and to what degree it will do so, will be controlled by the <a
   1.169 -   href="#rubyover">‘<code class=property>ruby-overhang</code>’</a>
   1.170 -   property.
   1.171 -
   1.172 -  <p>This entire logic applies the same way in vertical ideographic layout,
   1.173 -   only the dimension in which it works in such a layout is vertical, instead
   1.174 -   of horizontal.
   1.175 -
   1.176 -  <p class=note><span class=note-label>Note:</span> Because the purpose of
   1.177 -   the XHTML <samp>rp</samp> element <a href="#RUBY"
   1.178 -   rel=biblioentry>[RUBY]<!--{{RUBY}}--></a> is to allow pre-existing user
   1.179 -   agents to parenthesize ruby text content, an XHTML user agent should use a
   1.180 -   styling rule for these elements that avoids rendering them such as 
   1.181 -   <samp>rp {display: none}</samp>.
   1.182 -
   1.183    <h3 id=ruby-line-height><span class=secno>2.6. </span> Ruby box and line
   1.184     stacking</h3>
   1.185  
   1.186 @@ -1401,16 +1248,62 @@
   1.187     This ratio is computed by taking into consideration the widest element
   1.188     within each column.
   1.189  
   1.190 -  <h2 id=rubyover><span class=secno>4. </span> Ruby Overhang and Edge Effects</h2>
   1.191 +  <h2 id=edge-effects><span class=secno>4. </span> Edge Effects</h2>
   1.192 +
   1.193 +  <h3 id=ruby-overhang><span class=secno>4.1. </span> Overhanging Ruby</h3>
   1.194  
   1.195    <p> When <a href="#ruby-annotation-box"><i>ruby annotation box</i></a> is
   1.196     longer than its corresponding <a href="#ruby-base-box"><i>ruby base
   1.197     box</i></a>, the <a href="#ruby-annotation-box"><i>ruby annotation
   1.198     box</i></a> may partially overhang adjacent boxes.
   1.199  
   1.200 -  <p> This level of the specificaiton does not define how much the overhang
   1.201 +  <p> This level of the specification does not define how much the overhang
   1.202     may be allowed, and under what conditions.
   1.203  
   1.204 +  <p>If the ruby text is not allowed to overhang, then the ruby behaves like
   1.205 +   a traditional inline box, i.e. only its own contents are rendered within
   1.206 +   its boundaries and adjacent elements do not cross the box boundary:
   1.207 +
   1.208 +  <div class=figure>
   1.209 +   <p><img
   1.210 +    alt="Diagram showing the ruby boxes interacting with adjacent text"
   1.211 +    src="images/ro-n.gif">
   1.212 +
   1.213 +   <p class=caption>Simple ruby whose text is not allowed to overhang
   1.214 +    adjacent text
   1.215 +  </div>
   1.216 +
   1.217 +  <p>However, if <a href="#ruby-annotation-box"><i>ruby annotation</i></a>
   1.218 +   content is allowed to overhang adjacent elements and it happens to be
   1.219 +   wider than its base, then the adjacent content is partially rendered
   1.220 +   within the area of the <a href="#ruby-container-box"><i>ruby container
   1.221 +   box</i></a>, while the <a href="#ruby-annotation-box"><i>ruby
   1.222 +   annotation</i></a> may partially overlap the upper blank parts of the
   1.223 +   adjacent content:
   1.224 +
   1.225 +  <div class=figure>
   1.226 +   <p><img
   1.227 +    alt="Diagram showing the ruby boxes interacting with adjacent text"
   1.228 +    src="images/ro-a.gif">
   1.229 +
   1.230 +   <p class=caption>Simple ruby whose text is allowed to overhang adjacent
   1.231 +    text
   1.232 +  </div>
   1.233 +
   1.234 +  <p>The <a href="#ruby-annotation-box"><i>ruby annotations</i></a> related
   1.235 +   to a <a href="#ruby-base-box"><i>ruby base</i></a> must never overhang
   1.236 +   another <a href="#ruby-base-box"><i>ruby base</i></a>.
   1.237 +
   1.238 +  <p>The alignment of the contents of the base or the ruby text is not
   1.239 +   affected by overhanging behavior. The alignment is achieved the same way
   1.240 +   regardless of the overhang behavior setting and it is computed before the
   1.241 +   space available for overlap is determined. It is controlled by the ‘<a
   1.242 +   href="#ruby-align"><code class=property>ruby-align</code></a>’ property.
   1.243 +
   1.244 +  <p>This entire logic applies the same way in vertical ideographic layout,
   1.245 +   only the dimension in which it works in such a layout is vertical, instead
   1.246 +   of horizontal.
   1.247 +
   1.248    <div class=example>
   1.249     <p> The user agent may use <a href="#JIS4051"
   1.250      rel=biblioentry>[JIS4051]<!--{{JIS4051}}--></a> recommendation of using
   1.251 @@ -1420,23 +1313,27 @@
   1.252      rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>.
   1.253    </div>
   1.254  
   1.255 -  <p> When such <a href="#ruby-annotation-box"><i>ruby annotation box</i></a>
   1.256 -   is at the start or end edge of a line, user agent may align the side of
   1.257 -   the ruby text that touches the edge of the line to the corresponding edge
   1.258 -   of the base. This type of alignment is described by <a href="#JLREQ"
   1.259 +  <h3 id=line-edge><span class=secno>4.2. </span> Line-edge Alignment</h3>
   1.260 +
   1.261 +  <p> When a <a href="#ruby-annotation-box"><i>ruby annotation box</i></a>
   1.262 +   that is longer than its <a href="#ruby-base-box"><i>ruby base</i></a> is
   1.263 +   at the start or end edge of a line, the user agent <em>may</em> force the
   1.264 +   side of the <a href="#ruby-annotation-box"><i>ruby annotation</i></a> that
   1.265 +   touches the edge of the line to align to the corresponding edge of the
   1.266 +   base. This type of alignment is described by <a href="#JLREQ"
   1.267     rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>.
   1.268  
   1.269 -  <p> This level of the specificaiton does not provide a mechanism to control
   1.270 +  <p> This level of the specification does not provide a mechanism to control
   1.271     this behavior.
   1.272  
   1.273    <div class=figure>
   1.274     <p><img
   1.275      alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base"
   1.276 -    height=109 src="images/ra-le-l.gif" width=146><img
   1.277 +    src="images/ra-le-l.gif"> <img
   1.278      alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base"
   1.279 -    height=110 src="images/ra-le-r.gif" width=146>
   1.280 -
   1.281 -   <p><b>Figure 4.2.8</b>: Line edge ruby alignment
   1.282 +    src="images/ra-le-r.gif">
   1.283 +
   1.284 +   <p class=caption>Line-edge alignment
   1.285    </div>
   1.286    <!--
   1.287  <h3 id="rubyover">
     2.1 --- a/css-ruby/Overview.src.html	Thu Jun 20 15:32:56 2013 -0700
     2.2 +++ b/css-ruby/Overview.src.html	Thu Jun 20 16:48:33 2013 -0700
     2.3 @@ -389,147 +389,6 @@
     2.4  <h3 id="box-model">
     2.5  Ruby box model</h3>
     2.6  
     2.7 -<p>In the following description, the elements specified by   Ruby 
     2.8 -Annotation [[RUBY]] are used to describe the box model. As mentioned
     2.9 -earlier, a user agent can obtain the same results by using the Ruby specific 'display' 
    2.10 -property values. </p>
    2.11 -
    2.12 -<p>For a user agent that supports the ruby markup, the ruby structure consists of three or more
    2.13 -boxes. The outermost container is the <a
    2.14 -href="http://www.w3.org/TR/ruby/#ruby"><samp>ruby</samp></a> element itself.
    2.15 -In the simple case, it is a container for two non-overlapping boxes: the ruby
    2.16 -text box (<a href="http://www.w3.org/TR/ruby/#rt"><samp>rt</samp></a> element)
    2.17 -and the ruby base box (<a
    2.18 -href="http://www.w3.org/TR/ruby/#rb"><samp>rb</samp></a> element). The
    2.19 -positioning of these two boxes relative to each other is controlled by the <a
    2.20 -href="#rubypos">'ruby-position'</a> property.</p>
    2.21 -
    2.22 -<div class="figure">
    2.23 -<img class="example" width="223" height="93"
    2.24 -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"
    2.25 -src="images/r-box-t.gif" />
    2.26 -
    2.27 -<p><b>Figure 3.2.1</b>: Ruby box model (simple case)</p>
    2.28 -</div>
    2.29 -
    2.30 -<p>In the case of complex ruby, the ruby element is a container for two or
    2.31 -three non-overlapping boxes: one ruby base collection (<a
    2.32 -href="http://www.w3.org/TR/ruby/#rbc"><samp>rbc</samp></a> element), and one
    2.33 -or two ruby text collections (<a
    2.34 -href="http://www.w3.org/TR/ruby/#rtc"><samp>rtc</samp></a> element). The
    2.35 -<samp>rbc</samp> element is itself a container for one or several ruby base
    2.36 -box (<samp>rb</samp> element), while each <samp>rtc</samp> element is a
    2.37 -container for one or several ruby text box (rt element). The position of the
    2.38 -<samp>rtc</samp> element in relation to the related <samp>rbc</samp> element
    2.39 -is controlled by the <a href="#rubypos">'ruby-position'</a> property. The two
    2.40 -following figures show examples of these complex ruby.</p>
    2.41 -
    2.42 -<div class="figure">
    2.43 -<img src="images/r-box-g.gif"
    2.44 -alt="Diagram of a group ruby with a full ruby    text above and partial ruby text below" width="408" height="170" />
    2.45 -
    2.46 -<p><b>Figure 3.2.2</b>: Ruby box model (complex ruby with an empty rt element
    2.47 -after)</p>
    2.48 -</div>
    2.49 -
    2.50 -<p>In the example above, the ruby text after (below) the ruby bases contains two <samp>rt</samp> elements with the first one
    2.51 -being empty, the empty <samp>rt</samp> element corresponds to the first part
    2.52 -of the ruby base collection (the first part is identified by the first <samp>rb</samp>  element
    2.53 -within the <samp> rbc</samp> element).</p>
    2.54 -
    2.55 -<div class="figure">
    2.56 -<img src="images/r-box-h.gif"
    2.57 -alt="Diagram of a group ruby with a spanning    ruby text above and partial ruby text below" width="400" height="173" />
    2.58 -
    2.59 -<p><b>Figure 3.2.3</b>: Ruby box model (complex ruby with a spanning ruby text
    2.60 -element)</p>
    2.61 -</div>
    2.62 -
    2.63 -<p>In the example above, the ruby text before (above) the ruby bases spans the whole ruby base collection. The 
    2.64 -ruby text after (below) the ruby bases still contain two <samp>rt</samp> elements, one of
    2.65 -which is empty. The spanning behavior of <samp>rt</samp> text elements is
    2.66 -controlled by the <a
    2.67 -href="http://www.w3.org/TR/ruby/#ruby"><samp>rbspan</samp></a> attribute in a
    2.68 -way similar to the <samp>colspan</samp> attribute used for table column.</p>
    2.69 -
    2.70 -<p class="issue"><span class="issuehead">Issue:&nbsp;</span> The examples above contain the term 'group ruby', 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 'ruby'.</p>
    2.71 -<p class="note"><span class="note-label">Note:</span> The visual description of the ruby elements does not refer 
    2.72 -necessarily to the logical orders of the elements</p>
    2.73 -
    2.74 -<p>The width of the ruby box is by default determined by its widest child
    2.75 -element, whose width in turn is determined by its content. The width of all direct
    2.76 -children of the <samp>ruby</samp> element is the width of the widest children. In this respect, the ruby
    2.77 -box is much like a two or three row <samp>table</samp> element, with the
    2.78 -following exceptions:</p>
    2.79 -<ul>
    2.80 -  <li>the ruby box is an inline element, like an image, even though it itself,
    2.81 -    like a table, is a container of other boxes</li>
    2.82 -  <li>the equivalent of the cells: the <samp>rb</samp> element and the
    2.83 -    <samp>rt</samp> text element can only contain inline-level elements.</li>
    2.84 -  <li>the content of each 'cell' is always measured at its maximum width</li>
    2.85 -  <li>unlike a table, a ruby element doesn't have to fit in a line, the ruby
    2.86 -    box may be split into several boxes at line boundary, depending of the
    2.87 -    spanning of the ruby texts. This is however only possible for the complex
    2.88 -    ruby and can only happen at the boundary of non spanning elements.</li>
    2.89 -  <li>both the ruby text and the ruby base boxes may overlap with adjacent
    2.90 -    text (outside of the ruby element) if an appropriate <a
    2.91 -    href="#rubyover">'ruby-overhang'</a> parameter is set via CSS. Note
    2.92 -    however that the actual content of the ruby base cannot overlap with that
    2.93 -    adjacent text. The distribution of the content of the ruby base within the
    2.94 -    ruby base box is controlled by the <a href="#rubyalign">'ruby-align'</a>
    2.95 -    property.</li>
    2.96 -</ul>
    2.97 -
    2.98 -<p>If the ruby text is not allowed to overhang, then the ruby behaves like a
    2.99 -traditional box, i.e. only its contents are rendered within its boundaries and
   2.100 -adjacent elements do not cross the box boundary:</p>
   2.101 -
   2.102 -<div class="figure">
   2.103 -<p><img class="example" width="220" height="91"
   2.104 -alt="Diagram showing the ruby boxes interacting with adjacent text"
   2.105 -src="images/ro-n.gif" /></p>
   2.106 -
   2.107 -<p><b>Figure 3.2.4</b>: Simple ruby whose text is not allowed to overhang
   2.108 -adjacent text</p>
   2.109 -</div>
   2.110 -
   2.111 -<p>However, if ruby text is allowed to overhang adjacent elements and it
   2.112 -happens to be wider than its base, then the adjacent content is partially
   2.113 -rendered within the area of the ruby base box, while the ruby text may be
   2.114 -partially overlapping with the upper blank parts of the adjacent content:</p>
   2.115 -
   2.116 -<div class="figure">
   2.117 -<p><img class="example" width="177" height="91"
   2.118 -alt="Diagram showing the ruby boxes interacting with adjacent text"
   2.119 -src="images/ro-a.gif" /></p>
   2.120 -
   2.121 -<p><b>Figure 3.2.5</b>: Simple ruby whose text is allowed to overhang adjacent
   2.122 -text</p>
   2.123 -</div>
   2.124 -
   2.125 -<p>The ruby text related to a ruby base can never overhang another ruby
   2.126 -base.</p>
   2.127 -
   2.128 -<p>The alignment of the contents of the base or the ruby text is not affected
   2.129 -by the overhanging behavior. The alignment is achieved the same way regardless
   2.130 -of the overhang behavior setting and it is computed before the space available
   2.131 -for overlap is determined. It is controlled by the <a
   2.132 -href="#rubyalign">'ruby-align'</a> property.</p>
   2.133 -
   2.134 -<p>The exact circumstances in which the ruby text will overhang other
   2.135 -elements, and to what degree it will do so, will be controlled by the <a
   2.136 -href="#rubyover">'ruby-overhang'</a> property.</p>
   2.137 -
   2.138 -<p>This entire logic applies the same way in vertical ideographic layout, only
   2.139 -the dimension in which it works in such a layout is vertical, instead of
   2.140 -horizontal.</p>
   2.141 -
   2.142 -<p class="note"><span class="note-label">Note:</span> Because the purpose of the XHTML <samp>rp</samp> element
   2.143 -[[RUBY]] is to allow pre-existing user agents
   2.144 -to parenthesize ruby text content, an XHTML user agent should use a styling rule 
   2.145 -for these elements that avoids rendering them such as&nbsp; <samp>rp {display: 
   2.146 -none}</samp>.</p>
   2.147 -
   2.148  <h3 id="ruby-line-height">
   2.149  Ruby box and line stacking</h3>
   2.150  
   2.151 @@ -991,17 +850,56 @@
   2.152  		elements. This ratio is computed by taking into consideration the widest
   2.153  		element within each column.</p>
   2.154  
   2.155 -<h2 id="rubyover">
   2.156 -Ruby Overhang and Edge Effects</h2>
   2.157 +<h2 id="edge-effects">
   2.158 +Edge Effects</h2>
   2.159 +
   2.160 +<h3 id="ruby-overhang">
   2.161 +Overhanging Ruby</h3>
   2.162  
   2.163  	<p>
   2.164  		When <i>ruby annotation box</i> is longer than its corresponding <i>ruby base box</i>,
   2.165  		the <i>ruby annotation box</i> may partially overhang adjacent boxes.
   2.166  	</p>
   2.167  	<p>
   2.168 -		This level of the specificaiton does not define
   2.169 +		This level of the specification does not define
   2.170  		how much the overhang may be allowed, and under what conditions.
   2.171  	</p>
   2.172 +
   2.173 +	<p>If the ruby text is not allowed to overhang,
   2.174 +	then the ruby behaves like a traditional inline box,
   2.175 +	i.e. only its own contents are rendered within its boundaries
   2.176 +	and adjacent elements do not cross the box boundary:
   2.177 +
   2.178 +	<div class="figure">
   2.179 +		<p><img src="images/ro-n.gif"
   2.180 +		        alt="Diagram showing the ruby boxes interacting with adjacent text">
   2.181 +		<p class="caption">Simple ruby whose text is not allowed to overhang adjacent text
   2.182 +	</div>
   2.183 +
   2.184 +	<p>However, if <i>ruby annotation</i> content is allowed to overhang adjacent elements
   2.185 +	and it happens to be wider than its base,
   2.186 +	then the adjacent content is partially rendered within the area of the <i>ruby container box</i>,
   2.187 +	while the <i>ruby annotation</i> may partially overlap the upper blank parts of the adjacent content:
   2.188 +
   2.189 +	<div class="figure">
   2.190 +	<p><img src="images/ro-a.gif"
   2.191 +		      alt="Diagram showing the ruby boxes interacting with adjacent text">
   2.192 +	<p class="caption">Simple ruby whose text is allowed to overhang adjacent text
   2.193 +	</div>
   2.194 +
   2.195 +	<p>The <i>ruby annotations</i> related to a <i>ruby base</i>
   2.196 +	must never overhang another <i>ruby base</i>.
   2.197 +
   2.198 +	<p>The alignment of the contents of the base or the ruby text
   2.199 +	is not affected by overhanging behavior.
   2.200 +	The alignment is achieved the same way regardless of the overhang behavior setting
   2.201 +	and it is computed before the space available for overlap is determined.
   2.202 +	It is controlled by the 'ruby-align' property.
   2.203 +
   2.204 +	<p>This entire logic applies the same way in vertical ideographic layout,
   2.205 +	only the dimension in which it works in such a layout is vertical,
   2.206 +	instead of horizontal.
   2.207 +
   2.208  	<div class="example">
   2.209  	<p>
   2.210  		The user agent may use [[JIS4051]] recommendation of
   2.211 @@ -1010,23 +908,25 @@
   2.212  	</p>
   2.213  	</div>
   2.214  
   2.215 +<h3 id="line-edge">
   2.216 +Line-edge Alignment</h3>
   2.217 +
   2.218  	<p>
   2.219 -		When such <i>ruby annotation box</i> is at the start or end edge of a line,
   2.220 -		user agent may align the side of the ruby text that touches the edge of the line
   2.221 -		to the corresponding edge of the base.
   2.222 +		When a <i>ruby annotation box</i> that is longer than its <i>ruby base</i>
   2.223 +		is at the start or end edge of a line,
   2.224 +		the user agent <em>may</em> force the side of the <i>ruby annotation</i> that touches the edge of the line
   2.225 +		to align to the corresponding edge of the base.
   2.226  		This type of alignment is described by [[JLREQ]].
   2.227  	</p>
   2.228  	<p>
   2.229 -		This level of the specificaiton does not provide a mechanism to control this behavior.
   2.230 +		This level of the specification does not provide a mechanism to control this behavior.
   2.231  	</p>
   2.232  	<div class="figure">
   2.233 -		<p><img width="146" height="109"
   2.234 -			alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base"
   2.235 -			src="images/ra-le-l.gif" /><img width="146"
   2.236 -			height="110"
   2.237 -			alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base"
   2.238 -			src="images/ra-le-r.gif" /></p>
   2.239 -		<p><b>Figure 4.2.8</b>: Line edge ruby alignment</p>
   2.240 +		<p><img src="images/ra-le-l.gif"
   2.241 +			alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base">
   2.242 +			<img src="images/ra-le-r.gif"
   2.243 +			alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base">
   2.244 +		<p class="caption">Line-edge alignment
   2.245  	</div>
   2.246  
   2.247  	<!--

mercurial