1.1 --- a/css-ruby/Overview.src.html Thu Jun 20 15:32:56 2013 -0700
1.2 +++ b/css-ruby/Overview.src.html Thu Jun 20 16:48:33 2013 -0700
1.3 @@ -389,147 +389,6 @@
1.4 <h3 id="box-model">
1.5 Ruby box model</h3>
1.6
1.7 -<p>In the following description, the elements specified by Ruby
1.8 -Annotation [[RUBY]] are used to describe the box model. As mentioned
1.9 -earlier, a user agent can obtain the same results by using the Ruby specific 'display'
1.10 -property values. </p>
1.11 -
1.12 -<p>For a user agent that supports the ruby markup, the ruby structure consists of three or more
1.13 -boxes. The outermost container is the <a
1.14 -href="http://www.w3.org/TR/ruby/#ruby"><samp>ruby</samp></a> element itself.
1.15 -In the simple case, it is a container for two non-overlapping boxes: the ruby
1.16 -text box (<a href="http://www.w3.org/TR/ruby/#rt"><samp>rt</samp></a> element)
1.17 -and the ruby base box (<a
1.18 -href="http://www.w3.org/TR/ruby/#rb"><samp>rb</samp></a> element). The
1.19 -positioning of these two boxes relative to each other is controlled by the <a
1.20 -href="#rubypos">'ruby-position'</a> property.</p>
1.21 -
1.22 -<div class="figure">
1.23 -<img class="example" width="223" height="93"
1.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"
1.25 -src="images/r-box-t.gif" />
1.26 -
1.27 -<p><b>Figure 3.2.1</b>: Ruby box model (simple case)</p>
1.28 -</div>
1.29 -
1.30 -<p>In the case of complex ruby, the ruby element is a container for two or
1.31 -three non-overlapping boxes: one ruby base collection (<a
1.32 -href="http://www.w3.org/TR/ruby/#rbc"><samp>rbc</samp></a> element), and one
1.33 -or two ruby text collections (<a
1.34 -href="http://www.w3.org/TR/ruby/#rtc"><samp>rtc</samp></a> element). The
1.35 -<samp>rbc</samp> element is itself a container for one or several ruby base
1.36 -box (<samp>rb</samp> element), while each <samp>rtc</samp> element is a
1.37 -container for one or several ruby text box (rt element). The position of the
1.38 -<samp>rtc</samp> element in relation to the related <samp>rbc</samp> element
1.39 -is controlled by the <a href="#rubypos">'ruby-position'</a> property. The two
1.40 -following figures show examples of these complex ruby.</p>
1.41 -
1.42 -<div class="figure">
1.43 -<img src="images/r-box-g.gif"
1.44 -alt="Diagram of a group ruby with a full ruby text above and partial ruby text below" width="408" height="170" />
1.45 -
1.46 -<p><b>Figure 3.2.2</b>: Ruby box model (complex ruby with an empty rt element
1.47 -after)</p>
1.48 -</div>
1.49 -
1.50 -<p>In the example above, the ruby text after (below) the ruby bases contains two <samp>rt</samp> elements with the first one
1.51 -being empty, the empty <samp>rt</samp> element corresponds to the first part
1.52 -of the ruby base collection (the first part is identified by the first <samp>rb</samp> element
1.53 -within the <samp> rbc</samp> element).</p>
1.54 -
1.55 -<div class="figure">
1.56 -<img src="images/r-box-h.gif"
1.57 -alt="Diagram of a group ruby with a spanning ruby text above and partial ruby text below" width="400" height="173" />
1.58 -
1.59 -<p><b>Figure 3.2.3</b>: Ruby box model (complex ruby with a spanning ruby text
1.60 -element)</p>
1.61 -</div>
1.62 -
1.63 -<p>In the example above, the ruby text before (above) the ruby bases spans the whole ruby base collection. The
1.64 -ruby text after (below) the ruby bases still contain two <samp>rt</samp> elements, one of
1.65 -which is empty. The spanning behavior of <samp>rt</samp> text elements is
1.66 -controlled by the <a
1.67 -href="http://www.w3.org/TR/ruby/#ruby"><samp>rbspan</samp></a> attribute in a
1.68 -way similar to the <samp>colspan</samp> attribute used for table column.</p>
1.69 -
1.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>
1.71 -<p class="note"><span class="note-label">Note:</span> The visual description of the ruby elements does not refer
1.72 -necessarily to the logical orders of the elements</p>
1.73 -
1.74 -<p>The width of the ruby box is by default determined by its widest child
1.75 -element, whose width in turn is determined by its content. The width of all direct
1.76 -children of the <samp>ruby</samp> element is the width of the widest children. In this respect, the ruby
1.77 -box is much like a two or three row <samp>table</samp> element, with the
1.78 -following exceptions:</p>
1.79 -<ul>
1.80 - <li>the ruby box is an inline element, like an image, even though it itself,
1.81 - like a table, is a container of other boxes</li>
1.82 - <li>the equivalent of the cells: the <samp>rb</samp> element and the
1.83 - <samp>rt</samp> text element can only contain inline-level elements.</li>
1.84 - <li>the content of each 'cell' is always measured at its maximum width</li>
1.85 - <li>unlike a table, a ruby element doesn't have to fit in a line, the ruby
1.86 - box may be split into several boxes at line boundary, depending of the
1.87 - spanning of the ruby texts. This is however only possible for the complex
1.88 - ruby and can only happen at the boundary of non spanning elements.</li>
1.89 - <li>both the ruby text and the ruby base boxes may overlap with adjacent
1.90 - text (outside of the ruby element) if an appropriate <a
1.91 - href="#rubyover">'ruby-overhang'</a> parameter is set via CSS. Note
1.92 - however that the actual content of the ruby base cannot overlap with that
1.93 - adjacent text. The distribution of the content of the ruby base within the
1.94 - ruby base box is controlled by the <a href="#rubyalign">'ruby-align'</a>
1.95 - property.</li>
1.96 -</ul>
1.97 -
1.98 -<p>If the ruby text is not allowed to overhang, then the ruby behaves like a
1.99 -traditional box, i.e. only its contents are rendered within its boundaries and
1.100 -adjacent elements do not cross the box boundary:</p>
1.101 -
1.102 -<div class="figure">
1.103 -<p><img class="example" width="220" height="91"
1.104 -alt="Diagram showing the ruby boxes interacting with adjacent text"
1.105 -src="images/ro-n.gif" /></p>
1.106 -
1.107 -<p><b>Figure 3.2.4</b>: Simple ruby whose text is not allowed to overhang
1.108 -adjacent text</p>
1.109 -</div>
1.110 -
1.111 -<p>However, if ruby text is allowed to overhang adjacent elements and it
1.112 -happens to be wider than its base, then the adjacent content is partially
1.113 -rendered within the area of the ruby base box, while the ruby text may be
1.114 -partially overlapping with the upper blank parts of the adjacent content:</p>
1.115 -
1.116 -<div class="figure">
1.117 -<p><img class="example" width="177" height="91"
1.118 -alt="Diagram showing the ruby boxes interacting with adjacent text"
1.119 -src="images/ro-a.gif" /></p>
1.120 -
1.121 -<p><b>Figure 3.2.5</b>: Simple ruby whose text is allowed to overhang adjacent
1.122 -text</p>
1.123 -</div>
1.124 -
1.125 -<p>The ruby text related to a ruby base can never overhang another ruby
1.126 -base.</p>
1.127 -
1.128 -<p>The alignment of the contents of the base or the ruby text is not affected
1.129 -by the overhanging behavior. The alignment is achieved the same way regardless
1.130 -of the overhang behavior setting and it is computed before the space available
1.131 -for overlap is determined. It is controlled by the <a
1.132 -href="#rubyalign">'ruby-align'</a> property.</p>
1.133 -
1.134 -<p>The exact circumstances in which the ruby text will overhang other
1.135 -elements, and to what degree it will do so, will be controlled by the <a
1.136 -href="#rubyover">'ruby-overhang'</a> property.</p>
1.137 -
1.138 -<p>This entire logic applies the same way in vertical ideographic layout, only
1.139 -the dimension in which it works in such a layout is vertical, instead of
1.140 -horizontal.</p>
1.141 -
1.142 -<p class="note"><span class="note-label">Note:</span> Because the purpose of the XHTML <samp>rp</samp> element
1.143 -[[RUBY]] is to allow pre-existing user agents
1.144 -to parenthesize ruby text content, an XHTML user agent should use a styling rule
1.145 -for these elements that avoids rendering them such as <samp>rp {display:
1.146 -none}</samp>.</p>
1.147 -
1.148 <h3 id="ruby-line-height">
1.149 Ruby box and line stacking</h3>
1.150
1.151 @@ -991,17 +850,56 @@
1.152 elements. This ratio is computed by taking into consideration the widest
1.153 element within each column.</p>
1.154
1.155 -<h2 id="rubyover">
1.156 -Ruby Overhang and Edge Effects</h2>
1.157 +<h2 id="edge-effects">
1.158 +Edge Effects</h2>
1.159 +
1.160 +<h3 id="ruby-overhang">
1.161 +Overhanging Ruby</h3>
1.162
1.163 <p>
1.164 When <i>ruby annotation box</i> is longer than its corresponding <i>ruby base box</i>,
1.165 the <i>ruby annotation box</i> may partially overhang adjacent boxes.
1.166 </p>
1.167 <p>
1.168 - This level of the specificaiton does not define
1.169 + This level of the specification does not define
1.170 how much the overhang may be allowed, and under what conditions.
1.171 </p>
1.172 +
1.173 + <p>If the ruby text is not allowed to overhang,
1.174 + then the ruby behaves like a traditional inline box,
1.175 + i.e. only its own contents are rendered within its boundaries
1.176 + and adjacent elements do not cross the box boundary:
1.177 +
1.178 + <div class="figure">
1.179 + <p><img src="images/ro-n.gif"
1.180 + alt="Diagram showing the ruby boxes interacting with adjacent text">
1.181 + <p class="caption">Simple ruby whose text is not allowed to overhang adjacent text
1.182 + </div>
1.183 +
1.184 + <p>However, if <i>ruby annotation</i> content is allowed to overhang adjacent elements
1.185 + and it happens to be wider than its base,
1.186 + then the adjacent content is partially rendered within the area of the <i>ruby container box</i>,
1.187 + while the <i>ruby annotation</i> may partially overlap the upper blank parts of the adjacent content:
1.188 +
1.189 + <div class="figure">
1.190 + <p><img src="images/ro-a.gif"
1.191 + alt="Diagram showing the ruby boxes interacting with adjacent text">
1.192 + <p class="caption">Simple ruby whose text is allowed to overhang adjacent text
1.193 + </div>
1.194 +
1.195 + <p>The <i>ruby annotations</i> related to a <i>ruby base</i>
1.196 + must never overhang another <i>ruby base</i>.
1.197 +
1.198 + <p>The alignment of the contents of the base or the ruby text
1.199 + is not affected by overhanging behavior.
1.200 + The alignment is achieved the same way regardless of the overhang behavior setting
1.201 + and it is computed before the space available for overlap is determined.
1.202 + It is controlled by the 'ruby-align' property.
1.203 +
1.204 + <p>This entire logic applies the same way in vertical ideographic layout,
1.205 + only the dimension in which it works in such a layout is vertical,
1.206 + instead of horizontal.
1.207 +
1.208 <div class="example">
1.209 <p>
1.210 The user agent may use [[JIS4051]] recommendation of
1.211 @@ -1010,23 +908,25 @@
1.212 </p>
1.213 </div>
1.214
1.215 +<h3 id="line-edge">
1.216 +Line-edge Alignment</h3>
1.217 +
1.218 <p>
1.219 - When such <i>ruby annotation box</i> is at the start or end edge of a line,
1.220 - user agent may align the side of the ruby text that touches the edge of the line
1.221 - to the corresponding edge of the base.
1.222 + When a <i>ruby annotation box</i> that is longer than its <i>ruby base</i>
1.223 + is at the start or end edge of a line,
1.224 + the user agent <em>may</em> force the side of the <i>ruby annotation</i> that touches the edge of the line
1.225 + to align to the corresponding edge of the base.
1.226 This type of alignment is described by [[JLREQ]].
1.227 </p>
1.228 <p>
1.229 - This level of the specificaiton does not provide a mechanism to control this behavior.
1.230 + This level of the specification does not provide a mechanism to control this behavior.
1.231 </p>
1.232 <div class="figure">
1.233 - <p><img width="146" height="109"
1.234 - alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base"
1.235 - src="images/ra-le-l.gif" /><img width="146"
1.236 - height="110"
1.237 - alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base"
1.238 - src="images/ra-le-r.gif" /></p>
1.239 - <p><b>Figure 4.2.8</b>: Line edge ruby alignment</p>
1.240 + <p><img src="images/ra-le-l.gif"
1.241 + alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base">
1.242 + <img src="images/ra-le-r.gif"
1.243 + alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base">
1.244 + <p class="caption">Line-edge alignment
1.245 </div>
1.246
1.247 <!--
