Thu, 20 Jun 2013 16:48:33 -0700
[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: </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 <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 <!--