1.1 --- a/css-ruby/Overview.src.html Wed Sep 11 19:04:16 2013 +0200 1.2 +++ b/css-ruby/Overview.src.html Wed Sep 11 14:27:17 2013 -0700 1.3 @@ -225,7 +225,7 @@ 1.4 and “columns” (each <i>ruby base</i> and its corresponding <i>ruby annotations</i>). 1.5 1.6 <p>Consecutive bases and annotations are grouped together into <dfn>ruby segments</dfn>. 1.7 - Within a <i>ruby segment</i>, a <i>ruby annotation</i> may span multiple <i>ruby bases<i>. 1.8 + Within a <i>ruby segment</i>, a <i>ruby annotation</i> may span multiple <i>ruby bases</i>. 1.9 1.10 <p class="note">In HTML, a single <code><ruby></code> element may contain multiple <i>ruby segments</i>. 1.11 (In the XHTML Ruby model, a single <code><ruby></code> element can only contain one <i>ruby segment</i>.) 1.12 @@ -373,15 +373,15 @@ 1.13 pairing begins with the deepest <i>ruby container</i>, 1.14 then expands out, 1.15 treating each <i>ruby container</i> nested within another <i>ruby container</i> 1.16 - as a <i>ruby base</i>, 1.17 + essentially as a single <i>ruby base</i> in the outer <i>ruby container</i>, 1.18 and associating each <i>ruby annotation</i> 1.19 - associated with the nested <i>ruby container</i> 1.20 + paired with the nested <i>ruby container</i> 1.21 as being associated with (spanning) all of its <i>ruby bases</i>. 1.22 1.23 <p>Using nested <i>ruby containers</i> thus allows the representation 1.24 of complex spanning relationships. 1.25 1.26 - <p class="issue">This shouldn't belong in Level 1. But HTML5 allows it, so we have to handle it. Yay HTML5. 1.27 + <p class="issue">This has to be Level 1 because HTML5 allows it, so we have to handle it. Yay HTML5. 1.28 1.29 <h3 id="autohide"> 1.30 Autohiding Annotations</h3> 1.31 @@ -431,7 +431,7 @@ 1.32 otherwise ruby only works for CJK. 1.33 1.34 <p><i>Collapsible</i> white space within a ruby structure is discarded 1.35 - at the beginning and end of a <i>ruby container</i>, 1.36 + at the beginning and end of a <i>ruby container</i>, <i>ruby annotation container</i>, or <i>ruby base container</i>, 1.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. 1.38 Between <i>ruby segments</i>, between <i>ruby bases</i>, and between <i>ruby annotations</i>, however, 1.39 white space is not discarded. 1.40 @@ -456,7 +456,7 @@ 1.41 <pre> 1.42 <!-- --><ruby> 1.43 <!-- --> <rb>東</rb> <rb>京</rb> 1.44 -<!-- --> <rt>とう</rt> <rt>きょう</rt> 1.45 +<!-- --> <rt>とう</rt> <rt>きょう</rt> 1.46 <!-- --></ruby></pre> 1.47 </div> 1.48 1.49 @@ -522,10 +522,11 @@ 1.50 Inter-character ruby layout</h4> 1.51 1.52 <p>Inter-character annotations have special layout. 1.53 - When 'ruby-position' indicates ''inter-character'' annotations, the affected <i>annotation boxes</i> 1.54 + When 'ruby-position' indicates ''inter-character'' annotations, 1.55 + the affected <i>annotation boxes</i> 1.56 are spliced into and measured as part of the layout of the base level. 1.57 The <i>ruby base container</i> must be sized to include both the <i>base boxes</i> 1.58 - as well as the ''inter-character'' <i>annotation boxes</i> 1.59 + as well as the ''inter-character'' <i>annotation boxes</i>. 1.60 The affected <i>ruby annotation container</i> is similarly sized 1.61 so that its content box coincides with that of the <i>ruby base container</i>. 1.62 1.63 @@ -556,7 +557,7 @@ 1.64 Ruby box and line breaking</h3> 1.65 1.66 <p>When there is not enough space for an entire <i>ruby container</i> to fit on the line, 1.67 - the ruby may be broken wherever the base level allows a break. 1.68 + the ruby may be broken wherever all levels simultaneously allow a break. 1.69 Ruby most often breaks between base-annotation sets, 1.70 but if the line-breaking rules allow it, can also break within a <i>ruby base</i> 1.71 (and, in parallel, its associated <i>annotation boxes</i>). 1.72 @@ -588,7 +589,7 @@ 1.73 </div> 1.74 1.75 <p>Whether ruby can break between two adjacent <i>ruby bases</i> 1.76 - is controlled by normal line-breaking rules for the affected text, 1.77 + is controlled by normal line-breaking rules for the base text, 1.78 exactly as if the <i>ruby bases</i> were adjacent <i>inline</i> boxes. 1.79 (The annotations are ignored when determining soft wrap opportunities for the base level.) 1.80 1.81 @@ -932,7 +933,7 @@ 1.82 <p> 1.83 All <i>ruby annotation boxes</i> within the same <i>ruby segment</i> on the same line are concatenated, 1.84 and laid out as if their contents belonged to a single <i>ruby annotation box</i> 1.85 - spanning all their associated <i>ruby base boxes. 1.86 + spanning all their associated <i>ruby base boxes</i>. 1.87 This style renders similar to “group ruby” in [[JLREQ]], 1.88 except that <i>ruby annotations</i> are kept together with their respective <i>ruby bases</i> when breaking lines. 1.89 </p> 1.90 @@ -965,7 +966,7 @@ 1.91 </dd> 1.92 </dl> 1.93 1.94 -<h3 id="rubyalign"> 1.95 +<h3 id="ruby-align-property"><a name="rubyalign"></a> 1.96 Ruby Text Distribution: the 'ruby-align' property</h3> 1.97 1.98 <table class="propdef"> 1.99 @@ -997,28 +998,70 @@ 1.100 </table> 1.101 1.102 <p>This property specifies how text is distributed within the various ruby boxes 1.103 - when their text contents exactly fill their respective boxes. 1.104 + when their contents do not exactly fill their respective boxes. 1.105 1.106 <p>Values have the following meanings: 1.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> 1.108 <dl> 1.109 - <dt><dfn title="ruby-align:auto">''auto''</dfn></dt> 1.110 + <dt><dfn title="ruby-align:start">''start''</dfn></dt> 1.111 + <dd>The ruby content is aligned with the start edge of its box. 1.112 + <div class="figure"> 1.113 + <p><img 1.114 + alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base" 1.115 + width="145" height="91" src="images/ra-l.gif" /><img 1.116 + width="145" height="91" 1.117 + alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base" 1.118 + src="images/ra-l-rb.gif" /> 1.119 + <p class="caption">''start'' ruby alignment 1.120 + </div> 1.121 + </dd> 1.122 + 1.123 + <dt><dfn title="ruby-align:center">''center''</dfn></dt> 1.124 + <dd>The ruby content is centered within its box. 1.125 + <div class="figure"> 1.126 + <p><img width="145" height="91" 1.127 + alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base" 1.128 + src="images/ra-c.gif" /><img width="145" height="91" 1.129 + alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base" 1.130 + src="images/ra-c-rb.gif" /> 1.131 + <p class="caption">''center'' ruby alignment 1.132 + </div> 1.133 + </dd> 1.134 + 1.135 + <dt><dfn title="ruby-align:space-between">''space-between''</dfn></dt> 1.136 <dd> 1.137 - <p>The user agent determines how the ruby contents are aligned. 1.138 - This is the initial value. 1.139 - The behavior recommended by [[JLREQ]] is for wide-cell ruby to be aligned in the 'distribute-space' mode: 1.140 + <p>The ruby content expands as defined for normal text justification 1.141 + (as defined by 'text-justify'), 1.142 + <div class="figure"> 1.143 + <p><img width="145" height="91" 1.144 + alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base" 1.145 + src="images/ra-dl.gif" /><img width="145" height="91" 1.146 + alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base" 1.147 + src="images/ra-dl-rb.gif" /> 1.148 + <p class="caption">''space-between'' ruby alignment 1.149 + </div> 1.150 + </dd> 1.151 + 1.152 + <dt><dfn title="ruby-align:space-around">''space-around''</dfn></dt> 1.153 + <dd> 1.154 + <p>As for ''space-between'' 1.155 + except that there exists an extra <a href="http://www.w3.org/TR/css3-text/#expansion-opportunity"><i>expansion opportunity</i></a> 1.156 + whose space is distributed half before and half after the ruby content. 1.157 + <div class="example"> 1.158 + <p>Since a typical implementation will by default define expansion opportunities 1.159 + between every adjacent pair of CJK <i>characters</i> 1.160 + and not between adjacent pairs of Latin <i>characters</i>, 1.161 + this should result in the behavior recommended by [[JLREQ]]: 1.162 + for wide-cell ruby to be aligned in the 'distribute-space' mode... 1.163 <div class="figure"> 1.164 <p><img width="145" height="91" 1.165 alt="Diagram of glyph layout in auto aligned ruby when ruby text is shorter than base" 1.166 src="images/ra-ds.gif" /><img width="145" height="91" 1.167 alt="Diagram of glyph layout in auto aligned ruby when ruby text is longer than base" 1.168 - src="images/ra-ds-rb.gif" /></p> 1.169 - <p><b>Figure 4.2.1</b>: Wide-cell text in 'auto' ruby alignment is 1.170 - 'distribute-space' justified</p> 1.171 + src="images/ra-ds-rb.gif" /> 1.172 + <p class="caption">Wide-cell text in ''space-around'' ruby alignment is distributed 1.173 </div> 1.174 - 1.175 - <p>The recommended behavior for narrow-cell glyph ruby is to be 1.176 - aligned in the 'center' mode.</p> 1.177 + <p>... and narrow-cell glyph ruby to be aligned in the 'center' mode. 1.178 <div class="figure"> 1.179 <p><img 1.180 alt="Diagram of glyph layout in auto aligned ruby when halfwidth ruby text is shorter than base" 1.181 @@ -1026,115 +1069,11 @@ 1.182 src="images/ra-c-h.gif" /><img 1.183 alt="Diagram of character layout in auto aligned ruby when ruby text is longer than narrow-width base" 1.184 width="145" height="91" 1.185 - src="images/ra-c-rb-h.gif" /></p> 1.186 - <p><b>Figure 4.2.2</b>: Narrow-width ruby text in 'auto' ruby alignment 1.187 - is centered</p> 1.188 + src="images/ra-c-rb-h.gif" /> 1.189 + <p class="caption">Narrow-width ruby text in ''space-around'' ruby alignment is centered 1.190 </div> 1.191 - </dd> 1.192 - 1.193 - <dt><dfn title="ruby-align:start">''start''</dfn></dt> 1.194 - <dd>The ruby annotation content is aligned with the start edge of the base. 1.195 - <div class="figure"> 1.196 - <p><img 1.197 - alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base" 1.198 - width="145" height="91" src="images/ra-l.gif" /><img 1.199 - width="145" height="91" 1.200 - alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base" 1.201 - src="images/ra-l-rb.gif" /></p> 1.202 - <p><b>Figure 4.2.3</b>: Start ruby alignment</p> 1.203 </div> 1.204 </dd> 1.205 - 1.206 - <dt><dfn title="ruby-align:center">''center''</dfn></dt> 1.207 - <dd>The ruby text content is centered within the width of the base. If the 1.208 - length of the base is smaller than the length of the ruby text, then the 1.209 - base is centered within the width of the ruby text. 1.210 - 1.211 - <div class="figure"> 1.212 - <p><img width="145" height="91" 1.213 - alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base" 1.214 - src="images/ra-c.gif" /><img width="145" height="91" 1.215 - alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base" 1.216 - src="images/ra-c-rb.gif" /></p> 1.217 - <p><b>Figure 4.2.4</b>: Center ruby alignment</p> 1.218 - </div> 1.219 - </dd> 1.220 - 1.221 - <!-- 1.222 - <dt><strong>right</strong></dt> 1.223 - <dd>The ruby text content is aligned with the end edge of the base. 1.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> 1.225 -<div class="figure"> 1.226 - <p><img class="example" width="145" height="91" 1.227 - alt="Diagram of glyph layout in right aligned ruby when ruby text is shorter than base" 1.228 - src="images/ra-r.gif" /><img class="example" width="145" height="91" 1.229 - alt="Diagram of glyph layout in right aligned ruby when ruby text is longer than base" 1.230 - src="images/ra-r-rb.gif" /></p> 1.231 - <p><b>Figure 4.2.5</b>: End ruby alignment</p> 1.232 -</div> 1.233 - </dd> 1.234 - --> 1.235 - 1.236 - <dt><dfn title="ruby-align:distribute-letter">''distribute-letter''</dfn></dt> 1.237 - <dd>If the width of the ruby text is smaller than that of the base, then 1.238 - the ruby text contents are evenly distributed across the width of the 1.239 - base, with the first and last ruby text glyphs lining up with the 1.240 - corresponding first and last base glyphs. If the width of the ruby text 1.241 - is at least the width of the base, then the letters of the base are 1.242 - evenly distributed across the width of the ruby text. 1.243 - 1.244 - <div class="figure"> 1.245 - <p><img width="145" height="91" 1.246 - alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base" 1.247 - src="images/ra-dl.gif" /><img width="145" height="91" 1.248 - alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base" 1.249 - src="images/ra-dl-rb.gif" /></p> 1.250 - <p><b>Figure 4.2.6</b>: Distribute-letter ruby alignment</p> 1.251 - </div> 1.252 - </dd> 1.253 - 1.254 - <dt><dfn title="ruby-align:distribute-space">''distribute-space''</dfn></dt> 1.255 - <dd>If the width of the ruby text is smaller than that of the base, then 1.256 - the ruby text contents are evenly distributed across the width of the 1.257 - base, with a certain amount of white space preceding the first and 1.258 - following the last character in the ruby text. That amount of white 1.259 - space is normally equal to half the amount of inter-character space of 1.260 - the ruby text. If the width of the ruby text is at least the width of 1.261 - the base, then the same type of space distribution applies to the base. 1.262 - In other words, if the base is shorter than the ruby text, the base is 1.263 - distribute-space aligned. This type of alignment 1.264 - is described by [[JLREQ]]. 1.265 - 1.266 - <div class="figure"> 1.267 - <p><img width="145" height="91" 1.268 - alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is shorter than base" 1.269 - src="images/ra-ds.gif" /><img width="145" height="91" 1.270 - alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is longer than base" 1.271 - src="images/ra-ds-rb.gif" /></p> 1.272 - <p><b>Figure 4.2.7</b>: Distribute-space ruby alignment</p> 1.273 - </div> 1.274 - </dd> 1.275 - 1.276 - <!-- 1.277 - <dt><strong>line-edge</strong></dt> 1.278 - <dd>If the ruby text is not adjacent to a line edge, it is aligned as in 1.279 - 'auto'. If it is adjacent to a line edge, then it is still aligned as in 1.280 - auto, but the side of the ruby text that touches the end of the line is 1.281 - lined up with the corresponding edge of the base. This type of alignment 1.282 - is described by [[JLREQ]]. This type of alignment is 1.283 - relevant only to the scenario where the ruby text is longer than the 1.284 - ruby base. In the other scenarios, this is just 'auto'. 1.285 - <div class="figure"> 1.286 - <p><img class="example" width="146" height="109" 1.287 - alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base" 1.288 - src="images/ra-le-l.gif" /><img class="example" width="146" 1.289 - height="110" 1.290 - alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base" 1.291 - src="images/ra-le-r.gif" /></p> 1.292 - <p><b>Figure 4.2.8</b>: Line edge ruby alignment</p> 1.293 - </div> 1.294 - </dd> 1.295 - --> 1.296 </dl> 1.297 1.298 <p>For a complex ruby with spanning elements, one additional consideration is