changeset
[css-ruby] Remove 'auto', 'distribute-letter', and 'distribute-space' from 'ruby-align' in favor of 'space-around' and 'space-after' in conjunction with normal justification rules.
Wed, 11 Sep 2013 14:27:17 -0700
- author
- fantasai <fantasai.cvs@inkedblade.net>
- date
- Wed, 11 Sep 2013 14:27:17 -0700
- changeset 9108
- 7f542b3ebae3
- parent 9107
- 63e653cf87b3
- child 9109
- 932831c67e0a
[css-ruby] Remove 'auto', 'distribute-letter', and 'distribute-space' from 'ruby-align' in favor of 'space-around' and 'space-after' in conjunction with normal justification rules.
| 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 Wed Sep 11 19:04:16 2013 +0200 1.2 +++ b/css-ruby/Overview.html Wed Sep 11 14:27:17 2013 -0700 1.3 @@ -3,6 +3,7 @@ 1.4 Issues: 1.5 bidi 1.6 box layout/sizing 1.7 + clean up inter-character vs. parallel layout requirements 1.8 1.9 Redo all examples with consistent font. (M+ 2p?) 1.10 1.11 @@ -20,7 +21,7 @@ 1.12 1.13 <meta content="CSS Ruby Module Level 1" name=dcterms.title> 1.14 <meta content=text name=dcterms.type> 1.15 - <meta content=2013-07-11 name=dcterms.date> 1.16 + <meta content=2013-09-11 name=dcterms.date> 1.17 <meta content="Elika J. Etemad" name=dcterms.creator> 1.18 <meta content="Koji Ishii" name=dcterms.creator> 1.19 <meta content="Richard Ishida" name=dcterms.creator> 1.20 @@ -41,8 +42,8 @@ 1.21 <h1 class=p-name>CSS Ruby Module Level 1</h1> 1.22 1.23 <h2 class="no-num no-toc" id=longstatus-date->Editor's Draft <time 1.24 - class=dt-updated datetime=20130711>11 July 2013</time> 1.25 - <!-- for HTML4 doctype: <span class="value-title" title="20130711">11 July 2013</span></span> --></h2> 1.26 + class=dt-updated datetime=20130911>11 September 2013</time> 1.27 + <!-- for HTML4 doctype: <span class="value-title" title="20130911">11 September 2013</span></span> --></h2> 1.28 1.29 <dl> 1.30 <dt>This version: 1.31 @@ -231,7 +232,10 @@ 1.32 within bases</a> 1.33 </ul> 1.34 1.35 - <li><a href="#line-height"><span class=secno>2.9. </span> Ruby box and 1.36 + <li><a href="#ruby-bidi"><span class=secno>2.9. </span> Bidi 1.37 + Reordering</a> 1.38 + 1.39 + <li><a href="#line-height"><span class=secno>2.10. </span> Ruby box and 1.40 line stacking</a> 1.41 </ul> 1.42 1.43 @@ -245,8 +249,8 @@ 1.44 Ruby Annotations: the ‘<code class=property>ruby-merge</code>’ 1.45 property</a> 1.46 1.47 - <li><a href="#rubyalign"><span class=secno>3.3. </span> Ruby Text 1.48 - Distribution: the ‘<code class=property>ruby-align</code>’ 1.49 + <li><a href="#ruby-align-property"><span class=secno>3.3. </span> Ruby 1.50 + Text Distribution: the ‘<code class=property>ruby-align</code>’ 1.51 property</a> 1.52 </ul> 1.53 1.54 @@ -450,7 +454,7 @@ 1.55 <p>Consecutive bases and annotations are grouped together into <dfn 1.56 id=ruby-segments>ruby segments</dfn>. Within a <i>ruby segment</i>, a <a 1.57 href="#ruby-annotation-box"><i>ruby annotation</i></a> may span multiple 1.58 - <a href="#ruby-base-box"><i>ruby bases<i>. </i></i></a> 1.59 + <a href="#ruby-base-box"><i>ruby bases</i></a>. 1.60 1.61 <p class=note>In HTML, a single <code><ruby></code> element may 1.62 contain multiple <a href="#ruby-segments"><i>ruby segments</i></a>. (In 1.63 @@ -658,17 +662,19 @@ 1.64 href="#ruby-container-box"><i>ruby container</i></a>, then expands out, 1.65 treating each <a href="#ruby-container-box"><i>ruby container</i></a> 1.66 nested within another <a href="#ruby-container-box"><i>ruby 1.67 - container</i></a> as a <a href="#ruby-base-box"><i>ruby base</i></a>, and 1.68 - associating each <a href="#ruby-annotation-box"><i>ruby annotation</i></a> 1.69 - associated with the nested <a href="#ruby-container-box"><i>ruby 1.70 - container</i></a> as being associated with (spanning) all of its <a 1.71 - href="#ruby-base-box"><i>ruby bases</i></a>. 1.72 + container</i></a> essentially as a single <a href="#ruby-base-box"><i>ruby 1.73 + base</i></a> in the outer <a href="#ruby-container-box"><i>ruby 1.74 + container</i></a>, and associating each <a 1.75 + href="#ruby-annotation-box"><i>ruby annotation</i></a> paired with the 1.76 + nested <a href="#ruby-container-box"><i>ruby container</i></a> as being 1.77 + associated with (spanning) all of its <a href="#ruby-base-box"><i>ruby 1.78 + bases</i></a>. 1.79 1.80 <p>Using nested <a href="#ruby-container-box"><i>ruby containers</i></a> 1.81 thus allows the representation of complex spanning relationships. 1.82 1.83 - <p class=issue>This shouldn't belong in Level 1. But HTML5 allows it, so we 1.84 - have to handle it. Yay HTML5. 1.85 + <p class=issue>This has to be Level 1 because HTML5 allows it, so we have 1.86 + to handle it. Yay HTML5. 1.87 1.88 <h3 id=autohide><span class=secno>2.4. </span> Autohiding Annotations</h3> 1.89 1.90 @@ -727,14 +733,16 @@ 1.91 1.92 <p><i>Collapsible</i> white space within a ruby structure is discarded at 1.93 the beginning and end of a <a href="#ruby-container-box"><i>ruby 1.94 - container</i></a>, and at the beginning/end of a <a 1.95 - href="#ruby-annotation-box"><i>ruby annotation box</i></a> or <a 1.96 - href="#ruby-base-box"><i>ruby base box</i></a> if white space is not its 1.97 - only contents. Between <a href="#ruby-segments"><i>ruby segments</i></a>, 1.98 - between <a href="#ruby-base-box"><i>ruby bases</i></a>, and between <a 1.99 - href="#ruby-annotation-box"><i>ruby annotations</i></a>, however, white 1.100 - space is not discarded. If such white space is <i>collapsible</i>, it will 1.101 - collapse following the standard <a 1.102 + container</i></a>, <a href="#ruby-annotation-container-box"><i>ruby 1.103 + annotation container</i></a>, or <a 1.104 + href="#ruby-base-container-box"><i>ruby base container</i></a>, and at the 1.105 + beginning/end of a <a href="#ruby-annotation-box"><i>ruby annotation 1.106 + box</i></a> or <a href="#ruby-base-box"><i>ruby base box</i></a> if white 1.107 + space is not its only contents. Between <a href="#ruby-segments"><i>ruby 1.108 + segments</i></a>, between <a href="#ruby-base-box"><i>ruby bases</i></a>, 1.109 + and between <a href="#ruby-annotation-box"><i>ruby annotations</i></a>, 1.110 + however, white space is not discarded. If such white space is 1.111 + <i>collapsible</i>, it will collapse following the standard <a 1.112 href="http://www.w3.org/TR/css3-text/#white-space-rules">white space 1.113 processing rules</a>. <a href="#CSS3TEXT" 1.114 rel=biblioentry>[CSS3TEXT]<!--{{!CSS3TEXT}}--></a> Between <a 1.115 @@ -762,7 +770,7 @@ 1.116 <pre> 1.117 <!-- --><ruby> 1.118 <!-- --> <rb>東</rb> <rb>京</rb> 1.119 -<!-- --> <rt>とう</rt> <rt>きょう</rt> 1.120 +<!-- --> <rt>とう</rt> <rt>きょう</rt> 1.121 <!-- --></ruby></pre> 1.122 </div> 1.123 1.124 @@ -846,7 +854,7 @@ 1.125 the layout of the base level. The <a 1.126 href="#ruby-base-container-box"><i>ruby base container</i></a> must be 1.127 sized to include both the <i>base boxes</i> as well as the ‘<code 1.128 - class=css>inter-character</code>’ <i>annotation boxes</i> The affected 1.129 + class=css>inter-character</code>’ <i>annotation boxes</i>. The affected 1.130 <a href="#ruby-annotation-container-box"><i>ruby annotation 1.131 container</i></a> is similarly sized so that its content box coincides 1.132 with that of the <a href="#ruby-base-container-box"><i>ruby base 1.133 @@ -879,10 +887,11 @@ 1.134 1.135 <p>When there is not enough space for an entire <a 1.136 href="#ruby-container-box"><i>ruby container</i></a> to fit on the line, 1.137 - the ruby may be broken wherever the base level allows a break. Ruby most 1.138 - often breaks between base-annotation sets, but if the line-breaking rules 1.139 - allow it, can also break within a <a href="#ruby-base-box"><i>ruby 1.140 - base</i></a> (and, in parallel, its associated <i>annotation boxes</i>). 1.141 + the ruby may be broken wherever all levels simultaneously allow a break. 1.142 + Ruby most often breaks between base-annotation sets, but if the 1.143 + line-breaking rules allow it, can also break within a <a 1.144 + href="#ruby-base-box"><i>ruby base</i></a> (and, in parallel, its 1.145 + associated <i>annotation boxes</i>). 1.146 1.147 <p>Whenever ruby breaks across lines, <a 1.148 href="#ruby-annotation-box"><i>ruby annotations</i></a> must stay with 1.149 @@ -920,7 +929,7 @@ 1.150 1.151 <p>Whether ruby can break between two adjacent <a 1.152 href="#ruby-base-box"><i>ruby bases</i></a> is controlled by normal 1.153 - line-breaking rules for the affected text, exactly as if the <a 1.154 + line-breaking rules for the base text, exactly as if the <a 1.155 href="#ruby-base-box"><i>ruby bases</i></a> were adjacent <i>inline</i> 1.156 boxes. (The annotations are ignored when determining soft wrap 1.157 opportunities for the base level.) 1.158 @@ -954,12 +963,92 @@ 1.159 1.160 <h4 id=break-within><span class=secno>2.8.2. </span> Breaking within bases</h4> 1.161 1.162 - <p class=issue>Fill in this section... 1.163 + <p>For longer base texts, it is sometimes appropriate to allow breaking 1.164 + within a base-annotation pair. For example, if an English sentence is 1.165 + annotated with its Japanese translation, allowing the text to wrap allows 1.166 + for reasonable line breaking behavior in the paragraph. 1.167 + 1.168 + <p class=issue> Insert scanned example so people don't think this is just 1.169 + the ramblings of an insane spec-writer. 1.170 + 1.171 + <p>Line-breaking within a <a href="#ruby-base-box"><i>ruby base</i></a> is 1.172 + only allowed if the ‘<code class=property>white-space</code>’ property 1.173 + of the <a href="#ruby-base-box"><i>ruby base</i></a> and all its parallel 1.174 + <i>annotations</i> allow it, and there exists a <i>soft wrap 1.175 + opportunity</i> <em>within</em> (i.e. not at the start or end) the content 1.176 + of each base/annotation box. Since there is no structural correspondance 1.177 + between fragments of content within <a href="#ruby-base-box"><i>ruby 1.178 + bases</i></a> and <i>annotations</i>, the UA may break at any set of 1.179 + opportunities; but it is recommended that the UA attempt to proportionally 1.180 + balance the amount of content inside each fragment. 1.181 1.182 <p>There are no line breaking opportunities within ‘<code 1.183 class=css>inter-character</code>’ <i>annotations</i>. 1.184 1.185 - <h3 id=line-height><span class=secno>2.9. </span> Ruby box and line 1.186 + <p>Ruby alignment takes place within each fragment, after line-breaking. 1.187 + 1.188 + <h3 id=ruby-bidi><span class=secno>2.9. </span> Bidi Reordering</h3> 1.189 + 1.190 + <p class=issue>The easiest thing would be to treat each <a 1.191 + href="#ruby-base-box"><i>ruby base</i></a> as an embedding of its ‘<code 1.192 + class=property>direction</code>’. But this means that implicit bidi 1.193 + reordering is scoped to within a single base. <!-- 1.194 + 1.195 + <p>The Unicode bidirectional algorithm orders logically-stored text for visual presentation 1.196 + when characters from scripts of opposing directionalities are mixed 1.197 + within a single paragraph. 1.198 + (See [[CSS3-WRITING-MODES]] for a more in-depth discussion of bidirectional text in CSS.) 1.199 + Bidi reordering of ruby-annotation pairs is controlled by the ordering of the base text, as follows: 1.200 + 1.201 +<h4 id="bidi-B">Proposal A</h4> 1.202 + 1.203 + <p class="note">This proposal is simpler, but will require more frequent tagging of mixed-directionality content. 1.204 + 1.205 + <p>To avoid the interference of the <i>annotations</i> in the ordering of base text, 1.206 + all annotations are ignored for the purpose of resolving neutral characters in the base level. 1.207 + 1.208 + <p>To preserve the correspondance of <i>ruby annotations</i> 1.209 + to their respective <i>ruby bases</i>, 1.210 + a few restrictions are imposed: 1.211 + <ul> 1.212 + <li>The contents of a <i>ruby base</i> or <i>ruby annotation</i> must remain contiguous. 1.213 + To this end, the contents of each <i>ruby base</i> and <i>ruby annotation</i> are treated as if within a <i>bidi isolation</i>. 1.214 + <li>For the purpose of ordering <i>ruby bases</i> within a <i>ruby container</i>, 1.215 + each <i>ruby base</i> is treated as a strong character of its specified 'direction'. 1.216 + (<i>Ruby annotations</i> are positioned with respect to their <i>bases</i>, 1.217 + so are affected by reordering, but do not themselves participate in reordering.) 1.218 + <li>All <i>bases</i> spanned by a single <i>annotation</i> must remain contiguous. 1.219 + To this end, the embedding level of all bases spanned by a spanning <i>annotation</i> 1.220 + is increased by two prior to reordering. 1.221 + </ul> 1.222 + 1.223 +<h4 id="bidi-B">Proposal B</h4> 1.224 + 1.225 + <p class="note">This preserves some aspects of implicit bidi. 1.226 + For example, annotating each half of "first-second" would not cause the word to reverse itself to "second-first" within an opposite-order paragraph. 1.227 + 1.228 + <p>To avoid the interference of the <i>annotations</i> in the ordering of the base text, 1.229 + all annotations are ignored for the purpose of resolving neutral characters in the base text; 1.230 + and the base text is resolved exactly as if each <i>ruby base</i> were 1.231 + just a normal <i>inline box</i> embedded in the <i>ruby container</i>'s inline formatting context. 1.232 + 1.233 + <p>Furthermore, to preserve the correspondance of <i>ruby annotations</i> 1.234 + to their respective <i>ruby bases</i>, 1.235 + a few restrictions are imposed: 1.236 + <ul> 1.237 + <li>The contents of a <i>ruby base</i> must remain contiguous. 1.238 + <li>All <i>bases</i> spanned by a single <i>annotation</i> must remain contiguous. 1.239 + </ul> 1.240 + <p>To this end, the text of <i>ruby base</i> boxes that are not <i>bidi-isolated</i> 1.241 + must have its embedding level increased by two; 1.242 + and if an <i>annotation</i> spans more than one <i>ruby base</i>, 1.243 + the spanned text's embedding level 1.244 + (or the embedding level assigned to the isolation, if the <i>ruby base</i> is <i>bidi-isolated</i>) 1.245 + is further increased by two. 1.246 + 1.247 +--> 1.248 + 1.249 + <h3 id=line-height><span class=secno>2.10. </span> Ruby box and line 1.250 stacking</h3> 1.251 1.252 <p>The ‘<code class=property>line-height</code>’ property controls 1.253 @@ -1276,12 +1365,12 @@ 1.254 within the same <i>ruby segment</i> on the same line are concatenated, 1.255 and laid out as if their contents belonged to a single <a 1.256 href="#ruby-annotation-box"><i>ruby annotation box</i></a> spanning all 1.257 - their associated <i>ruby base boxes. This style renders similar to 1.258 - “group ruby” in <a href="#JLREQ" 1.259 + their associated <a href="#ruby-base-box"><i>ruby base boxes</i></a>. 1.260 + This style renders similar to “group ruby” in <a href="#JLREQ" 1.261 rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>, except that <a 1.262 href="#ruby-annotation-box"><i>ruby annotations</i></a> are kept 1.263 together with their respective <a href="#ruby-base-box"><i>ruby 1.264 - bases</i></a> when breaking lines. </i> 1.265 + bases</i></a> when breaking lines. 1.266 1.267 <div class=example> 1.268 <p>The following two markups render the same both characters fit on one 1.269 @@ -1315,9 +1404,9 @@ 1.270 </div> 1.271 </dl> 1.272 1.273 - <h3 id=rubyalign><span class=secno>3.3. </span> Ruby Text Distribution: the 1.274 - ‘<a href="#ruby-align"><code class=property>ruby-align</code></a>’ 1.275 - property</h3> 1.276 + <h3 id=ruby-align-property><span class=secno>3.3. </span><a 1.277 + name=rubyalign></a> Ruby Text Distribution: the ‘<a 1.278 + href="#ruby-align"><code class=property>ruby-align</code></a>’ property</h3> 1.279 1.280 <table class=propdef> 1.281 <tbody> 1.282 @@ -1364,7 +1453,7 @@ 1.283 </table> 1.284 1.285 <p>This property specifies how text is distributed within the various ruby 1.286 - boxes when their text contents exactly fill their respective boxes. 1.287 + boxes when their contents do not exactly fill their respective boxes. 1.288 1.289 <p>Values have the following meanings: 1.290 1.291 @@ -1376,46 +1465,10 @@ 1.292 ruby-alignment property. And that ruby-align become a shorthand. 1.293 1.294 <dl> 1.295 - <dt><dfn id=auto0 title="ruby-align:auto">‘<code 1.296 - class=css>auto</code>’</dfn> 1.297 - 1.298 - <dd> 1.299 - <p>The user agent determines how the ruby contents are aligned. This is 1.300 - the initial value. The behavior recommended by <a href="#JLREQ" 1.301 - rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> is for wide-cell ruby to be 1.302 - aligned in the ‘<code class=property>distribute-space</code>’ mode: 1.303 - 1.304 - <div class=figure> 1.305 - <p><img 1.306 - alt="Diagram of glyph layout in auto aligned ruby when ruby text is shorter than base" 1.307 - height=91 src="images/ra-ds.gif" width=145><img 1.308 - alt="Diagram of glyph layout in auto aligned ruby when ruby text is longer than base" 1.309 - height=91 src="images/ra-ds-rb.gif" width=145> 1.310 - 1.311 - <p><b>Figure 4.2.1</b>: Wide-cell text in ‘<code 1.312 - class=property>auto</code>’ ruby alignment is ‘<code 1.313 - class=property>distribute-space</code>’ justified 1.314 - </div> 1.315 - 1.316 - <p>The recommended behavior for narrow-cell glyph ruby is to be aligned 1.317 - in the ‘<code class=property>center</code>’ mode. 1.318 - 1.319 - <div class=figure> 1.320 - <p><img 1.321 - alt="Diagram of glyph layout in auto aligned ruby when halfwidth ruby text is shorter than base" 1.322 - height=91 src="images/ra-c-h.gif" width=145><img 1.323 - alt="Diagram of character layout in auto aligned ruby when ruby text is longer than narrow-width base" 1.324 - height=91 src="images/ra-c-rb-h.gif" width=145> 1.325 - 1.326 - <p><b>Figure 4.2.2</b>: Narrow-width ruby text in ‘<code 1.327 - class=property>auto</code>’ ruby alignment is centered 1.328 - </div> 1.329 - 1.330 <dt><dfn id=start title="ruby-align:start">‘<code 1.331 class=css>start</code>’</dfn> 1.332 1.333 - <dd>The ruby annotation content is aligned with the start edge of the 1.334 - base. 1.335 + <dd>The ruby content is aligned with the start edge of its box. 1.336 <div class=figure> 1.337 <p><img 1.338 alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base" 1.339 @@ -1423,15 +1476,13 @@ 1.340 alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base" 1.341 height=91 src="images/ra-l-rb.gif" width=145> 1.342 1.343 - <p><b>Figure 4.2.3</b>: Start ruby alignment 1.344 + <p class=caption>‘<code class=css>start</code>’ ruby alignment 1.345 </div> 1.346 1.347 <dt><dfn id=center title="ruby-align:center">‘<code 1.348 class=css>center</code>’</dfn> 1.349 1.350 - <dd>The ruby text content is centered within the width of the base. If the 1.351 - length of the base is smaller than the length of the ruby text, then the 1.352 - base is centered within the width of the ruby text. 1.353 + <dd>The ruby content is centered within its box. 1.354 <div class=figure> 1.355 <p><img 1.356 alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base" 1.357 @@ -1439,34 +1490,16 @@ 1.358 alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base" 1.359 height=91 src="images/ra-c-rb.gif" width=145> 1.360 1.361 - <p><b>Figure 4.2.4</b>: Center ruby alignment 1.362 + <p class=caption>‘<code class=css>center</code>’ ruby alignment 1.363 </div> 1.364 - </dd> 1.365 - <!-- 1.366 - <dt><strong>right</strong></dt> 1.367 - <dd>The ruby text content is aligned with the end edge of the base. 1.368 - <p class="issue"><span class="issuehead">Issue: </span> The i18n WG feels that end and right should not be synonymous, and proposed to drop right (there is no left/right in overhang)? See <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&hdr-1-name=subject&hdr-1-query=[CSS3+Ruby]%20left/start+and+right/end&hdr-2-name=from&hdr-2-query=&hdr-3-name=message-id&hdr-3-query=&index-grp=Member__FULL+Public__FULL&index-type=t&type-index=public-i18n-core%40w3.org&resultsperpage=20&sortby=date">this thread</a>.</p> 1.369 -<div class="figure"> 1.370 - <p><img class="example" width="145" height="91" 1.371 - alt="Diagram of glyph layout in right aligned ruby when ruby text is shorter than base" 1.372 - src="images/ra-r.gif" /><img class="example" width="145" height="91" 1.373 - alt="Diagram of glyph layout in right aligned ruby when ruby text is longer than base" 1.374 - src="images/ra-r-rb.gif" /></p> 1.375 - <p><b>Figure 4.2.5</b>: End ruby alignment</p> 1.376 -</div> 1.377 - </dd> 1.378 - --> 1.379 - 1.380 - <dt><dfn id=distribute-letter 1.381 - title="ruby-align:distribute-letter">‘<code 1.382 - class=css>distribute-letter</code>’</dfn> 1.383 - 1.384 - <dd>If the width of the ruby text is smaller than that of the base, then 1.385 - the ruby text contents are evenly distributed across the width of the 1.386 - base, with the first and last ruby text glyphs lining up with the 1.387 - corresponding first and last base glyphs. If the width of the ruby text 1.388 - is at least the width of the base, then the letters of the base are 1.389 - evenly distributed across the width of the ruby text. 1.390 + 1.391 + <dt><dfn id=space-between title="ruby-align:space-between">‘<code 1.392 + class=css>space-between</code>’</dfn> 1.393 + 1.394 + <dd> 1.395 + <p>The ruby content expands as defined for normal text justification (as 1.396 + defined by ‘<code class=property>text-justify</code>’), 1.397 + 1.398 <div class=figure> 1.399 <p><img 1.400 alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base" 1.401 @@ -1474,52 +1507,54 @@ 1.402 alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base" 1.403 height=91 src="images/ra-dl-rb.gif" width=145> 1.404 1.405 - <p><b>Figure 4.2.6</b>: Distribute-letter ruby alignment 1.406 + <p class=caption>‘<code class=css>space-between</code>’ ruby 1.407 + alignment 1.408 </div> 1.409 1.410 - <dt><dfn id=distribute-space title="ruby-align:distribute-space">‘<code 1.411 - class=css>distribute-space</code>’</dfn> 1.412 - 1.413 - <dd>If the width of the ruby text is smaller than that of the base, then 1.414 - the ruby text contents are evenly distributed across the width of the 1.415 - base, with a certain amount of white space preceding the first and 1.416 - following the last character in the ruby text. That amount of white space 1.417 - is normally equal to half the amount of inter-character space of the ruby 1.418 - text. If the width of the ruby text is at least the width of the base, 1.419 - then the same type of space distribution applies to the base. In other 1.420 - words, if the base is shorter than the ruby text, the base is 1.421 - distribute-space aligned. This type of alignment is described by <a 1.422 - href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>. 1.423 - <div class=figure> 1.424 - <p><img 1.425 - alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is shorter than base" 1.426 - height=91 src="images/ra-ds.gif" width=145><img 1.427 - alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is longer than base" 1.428 - height=91 src="images/ra-ds-rb.gif" width=145> 1.429 - 1.430 - <p><b>Figure 4.2.7</b>: Distribute-space ruby alignment 1.431 + <dt><dfn id=space-around title="ruby-align:space-around">‘<code 1.432 + class=css>space-around</code>’</dfn> 1.433 + 1.434 + <dd> 1.435 + <p>As for ‘<code class=css>space-between</code>’ except that there 1.436 + exists an extra <a 1.437 + href="http://www.w3.org/TR/css3-text/#expansion-opportunity"><i>expansion 1.438 + opportunity</i></a> whose space is distributed half before and half 1.439 + after the ruby content. 1.440 + 1.441 + <div class=example> 1.442 + <p>Since a typical implementation will by default define expansion 1.443 + opportunities between every adjacent pair of CJK <i>characters</i> and 1.444 + not between adjacent pairs of Latin <i>characters</i>, this should 1.445 + result in the behavior recommended by <a href="#JLREQ" 1.446 + rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>: for wide-cell ruby to be 1.447 + aligned in the ‘<code class=property>distribute-space</code>’ 1.448 + mode... 1.449 + 1.450 + <div class=figure> 1.451 + <p><img 1.452 + alt="Diagram of glyph layout in auto aligned ruby when ruby text is shorter than base" 1.453 + height=91 src="images/ra-ds.gif" width=145><img 1.454 + alt="Diagram of glyph layout in auto aligned ruby when ruby text is longer than base" 1.455 + height=91 src="images/ra-ds-rb.gif" width=145> 1.456 + 1.457 + <p class=caption>Wide-cell text in ‘<code 1.458 + class=css>space-around</code>’ ruby alignment is distributed 1.459 + </div> 1.460 + 1.461 + <p>... and narrow-cell glyph ruby to be aligned in the ‘<code 1.462 + class=property>center</code>’ mode. 1.463 + 1.464 + <div class=figure> 1.465 + <p><img 1.466 + alt="Diagram of glyph layout in auto aligned ruby when halfwidth ruby text is shorter than base" 1.467 + height=91 src="images/ra-c-h.gif" width=145><img 1.468 + alt="Diagram of character layout in auto aligned ruby when ruby text is longer than narrow-width base" 1.469 + height=91 src="images/ra-c-rb-h.gif" width=145> 1.470 + 1.471 + <p class=caption>Narrow-width ruby text in ‘<code 1.472 + class=css>space-around</code>’ ruby alignment is centered 1.473 + </div> 1.474 </div> 1.475 - </dd> 1.476 - <!-- 1.477 - <dt><strong>line-edge</strong></dt> 1.478 - <dd>If the ruby text is not adjacent to a line edge, it is aligned as in 1.479 - 'auto'. If it is adjacent to a line edge, then it is still aligned as in 1.480 - auto, but the side of the ruby text that touches the end of the line is 1.481 - lined up with the corresponding edge of the base. This type of alignment 1.482 - is described by [[JLREQ]]. This type of alignment is 1.483 - relevant only to the scenario where the ruby text is longer than the 1.484 - ruby base. In the other scenarios, this is just 'auto'. 1.485 - <div class="figure"> 1.486 - <p><img class="example" width="146" height="109" 1.487 - alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base" 1.488 - src="images/ra-le-l.gif" /><img class="example" width="146" 1.489 - height="110" 1.490 - alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base" 1.491 - src="images/ra-le-r.gif" /></p> 1.492 - <p><b>Figure 4.2.8</b>: Line edge ruby alignment</p> 1.493 - </div> 1.494 - </dd> 1.495 - --> 1.496 </dl> 1.497 1.498 <p>For a complex ruby with spanning elements, one additional consideration 1.499 @@ -1796,7 +1831,8 @@ 1.500 <!-- -->rb { display: ruby-base; white-space: nowrap; } 1.501 <!-- -->rt { display: ruby-text; white-space: nowrap; font-size: 50%; } 1.502 <!-- -->rbc { display: ruby-base-container; } 1.503 -<!-- -->rtc { display: ruby-text-container; }</pre> 1.504 +<!-- -->rtc { display: ruby-text-container; } 1.505 +<!-- -->ruby, rb, rt, rbc, rtc { unicode-bidi: isolate; }</pre> 1.506 1.507 <p>Additional rules for UAs supporting the relevant features of <a 1.508 href="#CSS3-TEXT-DECOR" 1.509 @@ -2166,20 +2202,20 @@ 1.510 <dt id=CSS3-TEXT-DECOR>[CSS3-TEXT-DECOR] 1.511 1.512 <dd>Elika J. Etemad; Koji Ishii. <a 1.513 - href="http://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/"><cite>CSS 1.514 - Text Decoration Module Level 3.</cite></a> 3 January 2013. W3C Working 1.515 - Draft. (Work in progress.) URL: <a 1.516 - href="http://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/">http://www.w3.org/TR/2013/WD-css-text-decor-3-20130103/</a> 1.517 + href="http://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/"><cite>CSS 1.518 + Text Decoration Module Level 3.</cite></a> 1 August 2013. W3C Candidate 1.519 + Recommendation. (Work in progress.) URL: <a 1.520 + href="http://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/">http://www.w3.org/TR/2013/CR-css-text-decor-3-20130801/</a> 1.521 </dd> 1.522 <!----> 1.523 1.524 <dt id=CSS3VAL>[CSS3VAL] 1.525 1.526 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a 1.527 - href="http://www.w3.org/TR/2013/CR-css3-values-20130404/"><cite>CSS 1.528 - Values and Units Module Level 3.</cite></a> 4 April 2013. W3C Candidate 1.529 + href="http://www.w3.org/TR/2013/CR-css3-values-20130730/"><cite>CSS 1.530 + Values and Units Module Level 3.</cite></a> 30 July 2013. W3C Candidate 1.531 Recommendation. (Work in progress.) URL: <a 1.532 - href="http://www.w3.org/TR/2013/CR-css3-values-20130404/">http://www.w3.org/TR/2013/CR-css3-values-20130404/</a> 1.533 + href="http://www.w3.org/TR/2013/CR-css3-values-20130730/">http://www.w3.org/TR/2013/CR-css3-values-20130730/</a> 1.534 </dd> 1.535 <!----> 1.536 1.537 @@ -2240,16 +2276,13 @@ 1.538 <li>ruby-align, <a href="#ruby-align" 1.539 title="section 3.3."><strong>3.3.</strong></a> 1.540 1.541 - <li>ruby-align:auto, <a href="#auto0" 1.542 - title="section 3.3."><strong>3.3.</strong></a> 1.543 - 1.544 <li>ruby-align:center, <a href="#center" 1.545 title="section 3.3."><strong>3.3.</strong></a> 1.546 1.547 - <li>ruby-align:distribute-letter, <a href="#distribute-letter" 1.548 + <li>ruby-align:space-around, <a href="#space-around" 1.549 title="section 3.3."><strong>3.3.</strong></a> 1.550 1.551 - <li>ruby-align:distribute-space, <a href="#distribute-space" 1.552 + <li>ruby-align:space-between, <a href="#space-between" 1.553 title="section 3.3."><strong>3.3.</strong></a> 1.554 1.555 <li>ruby-align:start, <a href="#start"
2.1 --- a/css-ruby/Overview.src.html Wed Sep 11 19:04:16 2013 +0200 2.2 +++ b/css-ruby/Overview.src.html Wed Sep 11 14:27:17 2013 -0700 2.3 @@ -225,7 +225,7 @@ 2.4 and “columns” (each <i>ruby base</i> and its corresponding <i>ruby annotations</i>). 2.5 2.6 <p>Consecutive bases and annotations are grouped together into <dfn>ruby segments</dfn>. 2.7 - Within a <i>ruby segment</i>, a <i>ruby annotation</i> may span multiple <i>ruby bases<i>. 2.8 + Within a <i>ruby segment</i>, a <i>ruby annotation</i> may span multiple <i>ruby bases</i>. 2.9 2.10 <p class="note">In HTML, a single <code><ruby></code> element may contain multiple <i>ruby segments</i>. 2.11 (In the XHTML Ruby model, a single <code><ruby></code> element can only contain one <i>ruby segment</i>.) 2.12 @@ -373,15 +373,15 @@ 2.13 pairing begins with the deepest <i>ruby container</i>, 2.14 then expands out, 2.15 treating each <i>ruby container</i> nested within another <i>ruby container</i> 2.16 - as a <i>ruby base</i>, 2.17 + essentially as a single <i>ruby base</i> in the outer <i>ruby container</i>, 2.18 and associating each <i>ruby annotation</i> 2.19 - associated with the nested <i>ruby container</i> 2.20 + paired with the nested <i>ruby container</i> 2.21 as being associated with (spanning) all of its <i>ruby bases</i>. 2.22 2.23 <p>Using nested <i>ruby containers</i> thus allows the representation 2.24 of complex spanning relationships. 2.25 2.26 - <p class="issue">This shouldn't belong in Level 1. But HTML5 allows it, so we have to handle it. Yay HTML5. 2.27 + <p class="issue">This has to be Level 1 because HTML5 allows it, so we have to handle it. Yay HTML5. 2.28 2.29 <h3 id="autohide"> 2.30 Autohiding Annotations</h3> 2.31 @@ -431,7 +431,7 @@ 2.32 otherwise ruby only works for CJK. 2.33 2.34 <p><i>Collapsible</i> white space within a ruby structure is discarded 2.35 - at the beginning and end of a <i>ruby container</i>, 2.36 + at the beginning and end of a <i>ruby container</i>, <i>ruby annotation container</i>, or <i>ruby base container</i>, 2.37 and at the beginning/end of a <i>ruby annotation box</i> or <i>ruby base box</i> if white space is not its only contents. 2.38 Between <i>ruby segments</i>, between <i>ruby bases</i>, and between <i>ruby annotations</i>, however, 2.39 white space is not discarded. 2.40 @@ -456,7 +456,7 @@ 2.41 <pre> 2.42 <!-- --><ruby> 2.43 <!-- --> <rb>東</rb> <rb>京</rb> 2.44 -<!-- --> <rt>とう</rt> <rt>きょう</rt> 2.45 +<!-- --> <rt>とう</rt> <rt>きょう</rt> 2.46 <!-- --></ruby></pre> 2.47 </div> 2.48 2.49 @@ -522,10 +522,11 @@ 2.50 Inter-character ruby layout</h4> 2.51 2.52 <p>Inter-character annotations have special layout. 2.53 - When 'ruby-position' indicates ''inter-character'' annotations, the affected <i>annotation boxes</i> 2.54 + When 'ruby-position' indicates ''inter-character'' annotations, 2.55 + the affected <i>annotation boxes</i> 2.56 are spliced into and measured as part of the layout of the base level. 2.57 The <i>ruby base container</i> must be sized to include both the <i>base boxes</i> 2.58 - as well as the ''inter-character'' <i>annotation boxes</i> 2.59 + as well as the ''inter-character'' <i>annotation boxes</i>. 2.60 The affected <i>ruby annotation container</i> is similarly sized 2.61 so that its content box coincides with that of the <i>ruby base container</i>. 2.62 2.63 @@ -556,7 +557,7 @@ 2.64 Ruby box and line breaking</h3> 2.65 2.66 <p>When there is not enough space for an entire <i>ruby container</i> to fit on the line, 2.67 - the ruby may be broken wherever the base level allows a break. 2.68 + the ruby may be broken wherever all levels simultaneously allow a break. 2.69 Ruby most often breaks between base-annotation sets, 2.70 but if the line-breaking rules allow it, can also break within a <i>ruby base</i> 2.71 (and, in parallel, its associated <i>annotation boxes</i>). 2.72 @@ -588,7 +589,7 @@ 2.73 </div> 2.74 2.75 <p>Whether ruby can break between two adjacent <i>ruby bases</i> 2.76 - is controlled by normal line-breaking rules for the affected text, 2.77 + is controlled by normal line-breaking rules for the base text, 2.78 exactly as if the <i>ruby bases</i> were adjacent <i>inline</i> boxes. 2.79 (The annotations are ignored when determining soft wrap opportunities for the base level.) 2.80 2.81 @@ -932,7 +933,7 @@ 2.82 <p> 2.83 All <i>ruby annotation boxes</i> within the same <i>ruby segment</i> on the same line are concatenated, 2.84 and laid out as if their contents belonged to a single <i>ruby annotation box</i> 2.85 - spanning all their associated <i>ruby base boxes. 2.86 + spanning all their associated <i>ruby base boxes</i>. 2.87 This style renders similar to “group ruby” in [[JLREQ]], 2.88 except that <i>ruby annotations</i> are kept together with their respective <i>ruby bases</i> when breaking lines. 2.89 </p> 2.90 @@ -965,7 +966,7 @@ 2.91 </dd> 2.92 </dl> 2.93 2.94 -<h3 id="rubyalign"> 2.95 +<h3 id="ruby-align-property"><a name="rubyalign"></a> 2.96 Ruby Text Distribution: the 'ruby-align' property</h3> 2.97 2.98 <table class="propdef"> 2.99 @@ -997,28 +998,70 @@ 2.100 </table> 2.101 2.102 <p>This property specifies how text is distributed within the various ruby boxes 2.103 - when their text contents exactly fill their respective boxes. 2.104 + when their contents do not exactly fill their respective boxes. 2.105 2.106 <p>Values have the following meanings: 2.107 <p class="issue"><span class="issuehead">Issue: </span> Tony Graham has <a href="http://www.w3.org/Style/XSL/Group/FO/wiki/Ruby#Treat_CSS3_.22ruby-align.22_As_Shorthand.3F">suggested </a>that distribute-letter and distribute-space be values of a ruby-group-distribution property, and line-edge be moved to a ruby-alignment-edge property, and that the rest be gathered under a ruby-alignment property. And that ruby-align become a shorthand.</p> 2.108 <dl> 2.109 - <dt><dfn title="ruby-align:auto">''auto''</dfn></dt> 2.110 + <dt><dfn title="ruby-align:start">''start''</dfn></dt> 2.111 + <dd>The ruby content is aligned with the start edge of its box. 2.112 + <div class="figure"> 2.113 + <p><img 2.114 + alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base" 2.115 + width="145" height="91" src="images/ra-l.gif" /><img 2.116 + width="145" height="91" 2.117 + alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base" 2.118 + src="images/ra-l-rb.gif" /> 2.119 + <p class="caption">''start'' ruby alignment 2.120 + </div> 2.121 + </dd> 2.122 + 2.123 + <dt><dfn title="ruby-align:center">''center''</dfn></dt> 2.124 + <dd>The ruby content is centered within its box. 2.125 + <div class="figure"> 2.126 + <p><img width="145" height="91" 2.127 + alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base" 2.128 + src="images/ra-c.gif" /><img width="145" height="91" 2.129 + alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base" 2.130 + src="images/ra-c-rb.gif" /> 2.131 + <p class="caption">''center'' ruby alignment 2.132 + </div> 2.133 + </dd> 2.134 + 2.135 + <dt><dfn title="ruby-align:space-between">''space-between''</dfn></dt> 2.136 <dd> 2.137 - <p>The user agent determines how the ruby contents are aligned. 2.138 - This is the initial value. 2.139 - The behavior recommended by [[JLREQ]] is for wide-cell ruby to be aligned in the 'distribute-space' mode: 2.140 + <p>The ruby content expands as defined for normal text justification 2.141 + (as defined by 'text-justify'), 2.142 + <div class="figure"> 2.143 + <p><img width="145" height="91" 2.144 + alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base" 2.145 + src="images/ra-dl.gif" /><img width="145" height="91" 2.146 + alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base" 2.147 + src="images/ra-dl-rb.gif" /> 2.148 + <p class="caption">''space-between'' ruby alignment 2.149 + </div> 2.150 + </dd> 2.151 + 2.152 + <dt><dfn title="ruby-align:space-around">''space-around''</dfn></dt> 2.153 + <dd> 2.154 + <p>As for ''space-between'' 2.155 + except that there exists an extra <a href="http://www.w3.org/TR/css3-text/#expansion-opportunity"><i>expansion opportunity</i></a> 2.156 + whose space is distributed half before and half after the ruby content. 2.157 + <div class="example"> 2.158 + <p>Since a typical implementation will by default define expansion opportunities 2.159 + between every adjacent pair of CJK <i>characters</i> 2.160 + and not between adjacent pairs of Latin <i>characters</i>, 2.161 + this should result in the behavior recommended by [[JLREQ]]: 2.162 + for wide-cell ruby to be aligned in the 'distribute-space' mode... 2.163 <div class="figure"> 2.164 <p><img width="145" height="91" 2.165 alt="Diagram of glyph layout in auto aligned ruby when ruby text is shorter than base" 2.166 src="images/ra-ds.gif" /><img width="145" height="91" 2.167 alt="Diagram of glyph layout in auto aligned ruby when ruby text is longer than base" 2.168 - src="images/ra-ds-rb.gif" /></p> 2.169 - <p><b>Figure 4.2.1</b>: Wide-cell text in 'auto' ruby alignment is 2.170 - 'distribute-space' justified</p> 2.171 + src="images/ra-ds-rb.gif" /> 2.172 + <p class="caption">Wide-cell text in ''space-around'' ruby alignment is distributed 2.173 </div> 2.174 - 2.175 - <p>The recommended behavior for narrow-cell glyph ruby is to be 2.176 - aligned in the 'center' mode.</p> 2.177 + <p>... and narrow-cell glyph ruby to be aligned in the 'center' mode. 2.178 <div class="figure"> 2.179 <p><img 2.180 alt="Diagram of glyph layout in auto aligned ruby when halfwidth ruby text is shorter than base" 2.181 @@ -1026,115 +1069,11 @@ 2.182 src="images/ra-c-h.gif" /><img 2.183 alt="Diagram of character layout in auto aligned ruby when ruby text is longer than narrow-width base" 2.184 width="145" height="91" 2.185 - src="images/ra-c-rb-h.gif" /></p> 2.186 - <p><b>Figure 4.2.2</b>: Narrow-width ruby text in 'auto' ruby alignment 2.187 - is centered</p> 2.188 + src="images/ra-c-rb-h.gif" /> 2.189 + <p class="caption">Narrow-width ruby text in ''space-around'' ruby alignment is centered 2.190 </div> 2.191 - </dd> 2.192 - 2.193 - <dt><dfn title="ruby-align:start">''start''</dfn></dt> 2.194 - <dd>The ruby annotation content is aligned with the start edge of the base. 2.195 - <div class="figure"> 2.196 - <p><img 2.197 - alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base" 2.198 - width="145" height="91" src="images/ra-l.gif" /><img 2.199 - width="145" height="91" 2.200 - alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base" 2.201 - src="images/ra-l-rb.gif" /></p> 2.202 - <p><b>Figure 4.2.3</b>: Start ruby alignment</p> 2.203 </div> 2.204 </dd> 2.205 - 2.206 - <dt><dfn title="ruby-align:center">''center''</dfn></dt> 2.207 - <dd>The ruby text content is centered within the width of the base. If the 2.208 - length of the base is smaller than the length of the ruby text, then the 2.209 - base is centered within the width of the ruby text. 2.210 - 2.211 - <div class="figure"> 2.212 - <p><img width="145" height="91" 2.213 - alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base" 2.214 - src="images/ra-c.gif" /><img width="145" height="91" 2.215 - alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base" 2.216 - src="images/ra-c-rb.gif" /></p> 2.217 - <p><b>Figure 4.2.4</b>: Center ruby alignment</p> 2.218 - </div> 2.219 - </dd> 2.220 - 2.221 - <!-- 2.222 - <dt><strong>right</strong></dt> 2.223 - <dd>The ruby text content is aligned with the end edge of the base. 2.224 - <p class="issue"><span class="issuehead">Issue: </span> The i18n WG feels that end and right should not be synonymous, and proposed to drop right (there is no left/right in overhang)? See <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&hdr-1-name=subject&hdr-1-query=[CSS3+Ruby]%20left/start+and+right/end&hdr-2-name=from&hdr-2-query=&hdr-3-name=message-id&hdr-3-query=&index-grp=Member__FULL+Public__FULL&index-type=t&type-index=public-i18n-core%40w3.org&resultsperpage=20&sortby=date">this thread</a>.</p> 2.225 -<div class="figure"> 2.226 - <p><img class="example" width="145" height="91" 2.227 - alt="Diagram of glyph layout in right aligned ruby when ruby text is shorter than base" 2.228 - src="images/ra-r.gif" /><img class="example" width="145" height="91" 2.229 - alt="Diagram of glyph layout in right aligned ruby when ruby text is longer than base" 2.230 - src="images/ra-r-rb.gif" /></p> 2.231 - <p><b>Figure 4.2.5</b>: End ruby alignment</p> 2.232 -</div> 2.233 - </dd> 2.234 - --> 2.235 - 2.236 - <dt><dfn title="ruby-align:distribute-letter">''distribute-letter''</dfn></dt> 2.237 - <dd>If the width of the ruby text is smaller than that of the base, then 2.238 - the ruby text contents are evenly distributed across the width of the 2.239 - base, with the first and last ruby text glyphs lining up with the 2.240 - corresponding first and last base glyphs. If the width of the ruby text 2.241 - is at least the width of the base, then the letters of the base are 2.242 - evenly distributed across the width of the ruby text. 2.243 - 2.244 - <div class="figure"> 2.245 - <p><img width="145" height="91" 2.246 - alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base" 2.247 - src="images/ra-dl.gif" /><img width="145" height="91" 2.248 - alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base" 2.249 - src="images/ra-dl-rb.gif" /></p> 2.250 - <p><b>Figure 4.2.6</b>: Distribute-letter ruby alignment</p> 2.251 - </div> 2.252 - </dd> 2.253 - 2.254 - <dt><dfn title="ruby-align:distribute-space">''distribute-space''</dfn></dt> 2.255 - <dd>If the width of the ruby text is smaller than that of the base, then 2.256 - the ruby text contents are evenly distributed across the width of the 2.257 - base, with a certain amount of white space preceding the first and 2.258 - following the last character in the ruby text. That amount of white 2.259 - space is normally equal to half the amount of inter-character space of 2.260 - the ruby text. If the width of the ruby text is at least the width of 2.261 - the base, then the same type of space distribution applies to the base. 2.262 - In other words, if the base is shorter than the ruby text, the base is 2.263 - distribute-space aligned. This type of alignment 2.264 - is described by [[JLREQ]]. 2.265 - 2.266 - <div class="figure"> 2.267 - <p><img width="145" height="91" 2.268 - alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is shorter than base" 2.269 - src="images/ra-ds.gif" /><img width="145" height="91" 2.270 - alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is longer than base" 2.271 - src="images/ra-ds-rb.gif" /></p> 2.272 - <p><b>Figure 4.2.7</b>: Distribute-space ruby alignment</p> 2.273 - </div> 2.274 - </dd> 2.275 - 2.276 - <!-- 2.277 - <dt><strong>line-edge</strong></dt> 2.278 - <dd>If the ruby text is not adjacent to a line edge, it is aligned as in 2.279 - 'auto'. If it is adjacent to a line edge, then it is still aligned as in 2.280 - auto, but the side of the ruby text that touches the end of the line is 2.281 - lined up with the corresponding edge of the base. This type of alignment 2.282 - is described by [[JLREQ]]. This type of alignment is 2.283 - relevant only to the scenario where the ruby text is longer than the 2.284 - ruby base. In the other scenarios, this is just 'auto'. 2.285 - <div class="figure"> 2.286 - <p><img class="example" width="146" height="109" 2.287 - alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base" 2.288 - src="images/ra-le-l.gif" /><img class="example" width="146" 2.289 - height="110" 2.290 - alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base" 2.291 - src="images/ra-le-r.gif" /></p> 2.292 - <p><b>Figure 4.2.8</b>: Line edge ruby alignment</p> 2.293 - </div> 2.294 - </dd> 2.295 - --> 2.296 </dl> 2.297 2.298 <p>For a complex ruby with spanning elements, one additional consideration is
