[css-ruby] ruby-position and ruby-align updated, ruby-overhang and ruby-span removed

Tue, 18 Jun 2013 22:44:44 +0900

author
kojiishi
date
Tue, 18 Jun 2013 22:44:44 +0900
changeset 8496
bce44a2a6438
parent 8495
35cc65add450
child 8497
0a74bdd0d743

[css-ruby] ruby-position and ruby-align updated, ruby-overhang and ruby-span removed

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	Tue Jun 18 15:44:16 2013 +0200
     1.2 +++ b/css-ruby/Overview.html	Tue Jun 18 22:44:44 2013 +0900
     1.3 @@ -204,12 +204,6 @@
     1.4  
     1.5       <li><a href="#rubyalign"><span class=secno>3.2. </span> Ruby alignment:
     1.6        the ‘<code class=property>ruby-align</code>’ property</a>
     1.7 -
     1.8 -     <li><a href="#rubyover"><span class=secno>3.3. </span> Ruby overhanging:
     1.9 -      the ‘<code class=property>ruby-overhang</code>’ property</a>
    1.10 -
    1.11 -     <li><a href="#rubyspan"><span class=secno>3.4. </span> Ruby annotation
    1.12 -      spanning: the ‘<code class=property>ruby-span</code>’ property</a>
    1.13      </ul>
    1.14  
    1.15     <li><a href="#profiles"><span class=secno>4. </span> Profiles</a>
    1.16 @@ -728,14 +722,14 @@
    1.17         <td><dfn id=ruby-position>ruby-position</dfn>
    1.18  
    1.19        <tr>
    1.20 -       <th>Value:
    1.21 +       <th><a href="#values">Value</a>:
    1.22  
    1.23 -       <td>before | after | inter-character | inline
    1.24 +       <td>[ over | under | inter-character ] && [ right | left ]
    1.25  
    1.26        <tr>
    1.27         <th>Initial:
    1.28  
    1.29 -       <td>before
    1.30 +       <td>over right
    1.31  
    1.32        <tr>
    1.33         <th>Applies to:
    1.34 @@ -801,61 +795,67 @@
    1.35       one</a>.
    1.36  
    1.37      <dl>
    1.38 -     <dt><strong>before</strong>
    1.39 +     <dt><dfn id=over title="ruby-position:over">‘<code
    1.40 +      class=css>over</code>’</dfn>
    1.41  
    1.42 -     <dd>The ruby text appears before the base. This is the most common
    1.43 -      setting used in ideographic East Asian writing systems. This is the
    1.44 -      initial value.
    1.45 +     <dd>The ruby text appears over the base in horizontal text. This is the
    1.46 +      most common setting used in ideographic East Asian writing systems.
    1.47 +      This is the initial value.
    1.48        <div class=figure>
    1.49         <p> <img
    1.50          alt="Diagram of ruby glyph layout in horizontal mode with ruby text appearing above the base"
    1.51 -        class=example height=33 src="images/shinkansen-top.gif" width=140>
    1.52 +        height=33 src="images/shinkansen-top.gif" width=140>
    1.53  
    1.54         <p><b>Figure 4.1.1</b>: Top ruby in horizontal layout applied to
    1.55          Japanese text
    1.56        </div>
    1.57  
    1.58 -      <p>If the base appears in a vertical-ideographic layout mode, the ruby
    1.59 -       appears on the right side of the base and is rendered in the same
    1.60 -       layout mode as the base (i.e. vertical-ideographic).
    1.61 +     <dt><dfn id=right title="ruby-position:right">‘<code
    1.62 +      class=css>right</code>’</dfn>
    1.63  
    1.64 +     <dd>The ruby text appears on the right side of the base in vertical
    1.65 +      text.
    1.66        <div class=figure>
    1.67         <p> <img
    1.68          alt="Diagram of ruby glyph layout in vertical mode with ruby text apearing vertically on the right of the base"
    1.69 -        class=example height=141 src="images/shinkansen-right.gif" width=33>
    1.70 +        height=141 src="images/shinkansen-right.gif" width=33>
    1.71  
    1.72         <p><b>Figure 4.1.2</b>: Top ruby in vertical ideographic layout
    1.73          applied to Japanese text
    1.74        </div>
    1.75  
    1.76 -     <dt><strong>after</strong>
    1.77 +     <dt><dfn id=under title="ruby-position:under">‘<code
    1.78 +      class=css>under</code>’</dfn>
    1.79  
    1.80 -     <dd>The ruby text appears after the base. This is a relatively rare
    1.81 -      setting used in ideographic East Asian writing systems, most easily
    1.82 -      found in educational text.
    1.83 +     <dd>The ruby text appears under the base in horizontal text. This is a
    1.84 +      relatively rare setting used in ideographic East Asian writing systems,
    1.85 +      most easily found in educational text.
    1.86        <div class=figure>
    1.87         <p> <img
    1.88          alt="Diagram of ruby glyph layout in horizontal mode with ruby text appearing below the base"
    1.89 -        class=example height=36 src="images/shinkansen-bottom.gif" width=142>
    1.90 +        height=36 src="images/shinkansen-bottom.gif" width=142>
    1.91  
    1.92         <p><b>Figure 4.1.3</b>: Bottom ruby in horizontal layout applied to
    1.93          Japanese text
    1.94        </div>
    1.95  
    1.96 -      <p>If the base appears in a vertical ideographic mode, the bottom ruby
    1.97 -       appears on the left side of the base and is rendered in the same
    1.98 -       layout mode as the base (i.e. vertical).
    1.99 +     <dt><dfn id=left title="ruby-position:left">‘<code
   1.100 +      class=css>left</code>’</dfn>
   1.101 +
   1.102 +     <dd>The ruby text appears on the left side of the base in vertical text.
   1.103  
   1.104        <div class=figure>
   1.105         <p> <img
   1.106          alt="Diagram of ruby glyph layout in vertical mode with ruby text apearing vertically on the left of the base"
   1.107 -        class=example height=141 src="images/shinkansen-left.gif" width=37>
   1.108 +        height=141 src="images/shinkansen-left.gif" width=37>
   1.109  
   1.110         <p><b>Figure 4.1.4</b>: Bottom ruby in vertical ideographic layout
   1.111          applied to Japanese text
   1.112        </div>
   1.113  
   1.114 -     <dt><strong>inter-character</strong>
   1.115 +     <dt><dfn id=inter-character
   1.116 +      title="ruby-position:inter-character">‘<code
   1.117 +      class=css>inter-character</code>’</dfn>
   1.118  
   1.119       <dd>
   1.120        <p class=issue><span class=issuehead>Issue: </span> We replaced
   1.121 @@ -871,19 +871,16 @@
   1.122         href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20Vertical+layout+not+enough+for+bopomofo&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">this
   1.123         thread</a> following a request from the i18n WG.
   1.124  
   1.125 -      <p>The ruby text appears on the right of the base. Unlike ‘<code
   1.126 -       class=property>before</code>’ and ‘<code
   1.127 -       class=property>after</code>’, this value is visual and is not
   1.128 -       relative to the text flow direction.
   1.129 +      <p>The ruby text appears on the right of the base in horizontal text.
   1.130  
   1.131        <p>This value is provided for the special case of traditional Chinese
   1.132         as used especially in Taiwan: ruby (made of <a
   1.133         href="#g-bopomofo"><span lang=zh>bopomofo</span></a> glyphs) in that
   1.134         context appears vertically along the right side of the base glyph,
   1.135 -       whether the layout of the base characters is vertical or horizontal:
   1.136 +       even when the layout of the base characters is horizontal:
   1.137  
   1.138        <div class=figure>
   1.139 -       <p><img alt="Example of Taiwanese-style ruby" class=example height=42
   1.140 +       <p><img alt="Example of Taiwanese-style ruby" height=42
   1.141          src="images/bopomofo.gif" width=138>
   1.142  
   1.143         <p><b>Figure 4.1.5</b>: "<span lang=zh>Bopomofo</span>" ruby in
   1.144 @@ -910,26 +907,16 @@
   1.145  
   1.146        <p>It is not defined how a user-agent should handle ruby text that is
   1.147         not bopomofo when the value of ruby-position is set to ‘<code
   1.148 -       class=property>right</code>’.</p>
   1.149 -      <!-- See Taiwanese requirements doc for EPUB at http://epub-revision.googlecode.com/files/EGLS_TW_eng.ppt -->
   1.150 -
   1.151 -     <dt><strong>inline</strong>
   1.152 -
   1.153 -     <dd>
   1.154 -      <p>Ruby text follows the ruby base with no special styling. The value
   1.155 -       can be used to disable ruby text positioning.
   1.156 -
   1.157 -      <p>If the author has used the XHTML <samp>rp</samp> element <a
   1.158 -       href="#RUBY" rel=biblioentry>[RUBY]<!--{{RUBY}}--></a> they should set
   1.159 -       the <samp>display</samp> value for that element to
   1.160 -       <samp>inline</samp>, so that the ruby text is distinguishable from the
   1.161 -       base text. If no <samp>rp</samp> element has been used, the author can
   1.162 -       use the <samp>content</samp> property with the <samp>:before</samp>
   1.163 -       and <samp>:after</samp> pseudo-elements to set off the ruby text.
   1.164 -
   1.165 -      <p class=issue><span class=issuehead>Issue: </span> Here is a <a
   1.166 -       href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20inline+value+description+missing&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">request
   1.167 -       </a>for this section to be added, from the i18n WG..
   1.168 +       class=property>inter-character</code>’.</p>
   1.169 +      <!-- See Taiwanese requirements doc for EPUB at http://epub-revision.googlecode.com/files/EGLS_TW_eng.ppt --></dd>
   1.170 +     <!--
   1.171 +<dt><strong>inline</strong></dt>
   1.172 +<dd>
   1.173 +<p>Ruby text follows the ruby base with no special styling.  The value can be used to disable  ruby text positioning.</p>
   1.174 +<p>If the author has used the XHTML <samp>rp</samp> element [[RUBY]] they should set the <samp>display</samp> value for that element to <samp>inline</samp>, so that the ruby text is distinguishable from the base text.  If no <samp>rp</samp> element has been used, the author can use the <samp>content</samp> property with the <samp>:before</samp> and <samp>:after</samp> pseudo-elements to set off the ruby text. </p>
   1.175 +<p class="issue"><span class="issuehead">Issue: </span> Here is a <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20inline+value+description+missing&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">request </a>for this section to be added, from the i18n WG..</p>
   1.176 +</dd>
   1.177 +		-->
   1.178      </dl>
   1.179  
   1.180      <p>If two rtc elements are set with the same ruby-position value, (for
   1.181 @@ -948,10 +935,9 @@
   1.182         <td><dfn id=ruby-align>ruby-align</dfn>
   1.183  
   1.184        <tr>
   1.185 -       <th>Value:
   1.186 +       <th><a href="#values">Value</a>:
   1.187  
   1.188 -       <td>auto | start | left | center | end | right | distribute-letter |
   1.189 -        distribute-space | line-edge
   1.190 +       <td>auto | start | center | distribute-letter | distribute-space
   1.191  
   1.192        <tr>
   1.193         <th>Initial:
   1.194 @@ -1006,19 +992,22 @@
   1.195       ruby-alignment property. And that ruby-align become a shorthand.
   1.196  
   1.197      <dl>
   1.198 -     <dt><strong>auto</strong>
   1.199 +     <dt><dfn id=auto title="ruby-align:auto">‘<code
   1.200 +      class=css>auto</code>’</dfn>
   1.201  
   1.202 -     <dd>The user agent determines how the ruby contents are aligned. This is
   1.203 -      the initial value. The behavior recommended by <a href="#JLREQ"
   1.204 -      rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> is for wide-cell ruby to be
   1.205 -      aligned in the ‘<code class=property>distribute-space</code>’ mode:
   1.206 +     <dd>
   1.207 +      <p>The user agent determines how the ruby contents are aligned. This is
   1.208 +       the initial value. The behavior recommended by <a href="#JLREQ"
   1.209 +       rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> is for wide-cell ruby to
   1.210 +       be aligned in the ‘<code class=property>distribute-space</code>’
   1.211 +       mode:
   1.212  
   1.213        <div class=figure>
   1.214         <p><img
   1.215          alt="Diagram of glyph layout in auto aligned ruby when ruby text is shorter than base"
   1.216 -        class=example height=91 src="images/ra-ds.gif" width=145><img
   1.217 +        height=91 src="images/ra-ds.gif" width=145><img
   1.218          alt="Diagram of glyph layout in auto aligned ruby when ruby text is longer than base"
   1.219 -        class=example height=91 src="images/ra-ds-rb.gif" width=145>
   1.220 +        height=91 src="images/ra-ds-rb.gif" width=145>
   1.221  
   1.222         <p><b>Figure 4.2.1</b>: Wide-cell text in ‘<code
   1.223          class=property>auto</code>’ ruby alignment is ‘<code
   1.224 @@ -1031,15 +1020,16 @@
   1.225        <div class=figure>
   1.226         <p><img
   1.227          alt="Diagram of glyph layout in auto aligned ruby when halfwidth ruby text is shorter than base"
   1.228 -        class=example height=91 src="images/ra-c-h.gif" width=145><img
   1.229 +        height=91 src="images/ra-c-h.gif" width=145><img
   1.230          alt="Diagram of character layout in auto aligned ruby when ruby text is longer than narrow-width base"
   1.231 -        class=example height=91 src="images/ra-c-rb-h.gif" width=145>
   1.232 +        height=91 src="images/ra-c-rb-h.gif" width=145>
   1.233  
   1.234         <p><b>Figure 4.2.2</b>: Narrow-width ruby text in ‘<code
   1.235          class=property>auto</code>’ ruby alignment is centered
   1.236        </div>
   1.237  
   1.238 -     <dt><strong>left</strong>
   1.239 +     <dt><dfn id=start title="ruby-align:start">‘<code
   1.240 +      class=css>start</code>’</dfn>
   1.241  
   1.242       <dd>The ruby text content is aligned with the start edge of the base.
   1.243        <p class=issue><span class=issuehead>Issue: </span> The i18n WG feels
   1.244 @@ -1051,14 +1041,15 @@
   1.245        <div class=figure>
   1.246         <p><img
   1.247          alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base"
   1.248 -        class=example height=91 src="images/ra-l.gif" width=145><img
   1.249 +        height=91 src="images/ra-l.gif" width=145><img
   1.250          alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base"
   1.251 -        class=example height=91 src="images/ra-l-rb.gif" width=145>
   1.252 +        height=91 src="images/ra-l-rb.gif" width=145>
   1.253  
   1.254         <p><b>Figure 4.2.3</b>: Start ruby alignment
   1.255        </div>
   1.256  
   1.257 -     <dt><strong>center</strong>
   1.258 +     <dt><dfn id=center title="ruby-align:center">‘<code
   1.259 +      class=css>center</code>’</dfn>
   1.260  
   1.261       <dd>The ruby text content is centered within the width of the base. If
   1.262        the length of the base is smaller than the length of the ruby text,
   1.263 @@ -1066,33 +1057,31 @@
   1.264        <div class=figure>
   1.265         <p><img
   1.266          alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base"
   1.267 -        class=example height=91 src="images/ra-c.gif" width=145><img
   1.268 +        height=91 src="images/ra-c.gif" width=145><img
   1.269          alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base"
   1.270 -        class=example height=91 src="images/ra-c-rb.gif" width=145>
   1.271 +        height=91 src="images/ra-c-rb.gif" width=145>
   1.272  
   1.273         <p><b>Figure 4.2.4</b>: Center ruby alignment
   1.274        </div>
   1.275 +     </dd>
   1.276 +     <!--
   1.277 +  <dt><strong>right</strong></dt>
   1.278 +    <dd>The ruby text content is aligned with the end edge of the base.
   1.279 +    	<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=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20left/start+and+right/end&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">this thread</a>.</p>
   1.280 +<div class="figure">
   1.281 +	<p><img class="example" width="145" height="91"
   1.282 +      alt="Diagram of glyph layout in right aligned ruby when ruby text is shorter than base"
   1.283 +      src="images/ra-r.gif" /><img class="example" width="145" height="91"
   1.284 +      alt="Diagram of glyph layout in right aligned ruby when ruby text is longer than base"
   1.285 +      src="images/ra-r-rb.gif" /></p>
   1.286 +	<p><b>Figure 4.2.5</b>: End ruby alignment</p>
   1.287 +</div>
   1.288 +    </dd>
   1.289 +		-->
   1.290  
   1.291 -     <dt><strong>right</strong>
   1.292 -
   1.293 -     <dd>The ruby text content is aligned with the end edge of the base.
   1.294 -      <p class=issue><span class=issuehead>Issue: </span> The i18n WG feels
   1.295 -       that end and right should not be synonymous, and proposed to drop
   1.296 -       right (there is no left/right in overhang)? See <a
   1.297 -       href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20left/start+and+right/end&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">this
   1.298 -       thread</a>.
   1.299 -
   1.300 -      <div class=figure>
   1.301 -       <p><img
   1.302 -        alt="Diagram of glyph layout in right aligned ruby when ruby text is shorter than base"
   1.303 -        class=example height=91 src="images/ra-r.gif" width=145><img
   1.304 -        alt="Diagram of glyph layout in right aligned ruby when ruby text is longer than base"
   1.305 -        class=example height=91 src="images/ra-r-rb.gif" width=145>
   1.306 -
   1.307 -       <p><b>Figure 4.2.5</b>: End ruby alignment
   1.308 -      </div>
   1.309 -
   1.310 -     <dt><strong>distribute-letter</strong>
   1.311 +     <dt><dfn id=distribute-letter
   1.312 +      title="ruby-align:distribute-letter">‘<code
   1.313 +      class=css>distribute-letter</code>’</dfn>
   1.314  
   1.315       <dd>If the width of the ruby text is smaller than that of the base, then
   1.316        the ruby text contents are evenly distributed across the width of the
   1.317 @@ -1103,14 +1092,16 @@
   1.318        <div class=figure>
   1.319         <p><img
   1.320          alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base"
   1.321 -        class=example height=91 src="images/ra-dl.gif" width=145><img
   1.322 +        height=91 src="images/ra-dl.gif" width=145><img
   1.323          alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base"
   1.324 -        class=example height=91 src="images/ra-dl-rb.gif" width=145>
   1.325 +        height=91 src="images/ra-dl-rb.gif" width=145>
   1.326  
   1.327         <p><b>Figure 4.2.6</b>: Distribute-letter ruby alignment
   1.328        </div>
   1.329  
   1.330 -     <dt><strong>distribute-space</strong>
   1.331 +     <dt><dfn id=distribute-space
   1.332 +      title="ruby-align:distribute-space">‘<code
   1.333 +      class=css>distribute-space</code>’</dfn>
   1.334  
   1.335       <dd>If the width of the ruby text is smaller than that of the base, then
   1.336        the ruby text contents are evenly distributed across the width of the
   1.337 @@ -1125,33 +1116,33 @@
   1.338        <div class=figure>
   1.339         <p><img
   1.340          alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is shorter than base"
   1.341 -        class=example height=91 src="images/ra-ds.gif" width=145><img
   1.342 +        height=91 src="images/ra-ds.gif" width=145><img
   1.343          alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is longer than base"
   1.344 -        class=example height=91 src="images/ra-ds-rb.gif" width=145>
   1.345 +        height=91 src="images/ra-ds-rb.gif" width=145>
   1.346  
   1.347         <p><b>Figure 4.2.7</b>: Distribute-space ruby alignment
   1.348        </div>
   1.349 -
   1.350 -     <dt><strong>line-edge</strong>
   1.351 -
   1.352 -     <dd>If the ruby text is not adjacent to a line edge, it is aligned as in
   1.353 -      ‘<code class=property>auto</code>’. If it is adjacent to a line
   1.354 -      edge, then it is still aligned as in auto, but the side of the ruby
   1.355 -      text that touches the end of the line is lined up with the
   1.356 -      corresponding edge of the base. This type of alignment is described by
   1.357 -      <a href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>. This type
   1.358 -      of alignment is relevant only to the scenario where the ruby text is
   1.359 -      longer than the ruby base. In the other scenarios, this is just
   1.360 -      ‘<code class=property>auto</code>’.
   1.361 -      <div class=figure>
   1.362 -       <p><img
   1.363 -        alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base"
   1.364 -        class=example height=109 src="images/ra-le-l.gif" width=146><img
   1.365 -        alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base"
   1.366 -        class=example height=110 src="images/ra-le-r.gif" width=146>
   1.367 -
   1.368 -       <p><b>Figure 4.2.8</b>: Line edge ruby alignment
   1.369 +     </dd>
   1.370 +     <!--
   1.371 +  <dt><strong>line-edge</strong></dt>
   1.372 +    <dd>If the ruby text is not adjacent to a line edge, it is aligned as in
   1.373 +      'auto'. If it is adjacent to a line edge, then it is still aligned as in
   1.374 +      auto, but the side of the ruby text that touches the end of the line is
   1.375 +      lined up with the corresponding edge of the base. This type of alignment
   1.376 +      is described by [[JLREQ]]. This type of alignment is
   1.377 +      relevant only to the scenario where the ruby text is longer than the
   1.378 +      ruby base. In the other scenarios, this is just 'auto'.
   1.379 +		<div class="figure">
   1.380 +      <p><img class="example" width="146" height="109"
   1.381 +      alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base"
   1.382 +      src="images/ra-le-l.gif" /><img class="example" width="146"
   1.383 +      height="110"
   1.384 +      alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base"
   1.385 +      src="images/ra-le-r.gif" /></p>
   1.386 +      <p><b>Figure 4.2.8</b>: Line edge ruby alignment</p>
   1.387        </div>
   1.388 +    </dd>
   1.389 +		-->
   1.390      </dl>
   1.391  
   1.392      <p>For a complex ruby with spanning elements, one additional
   1.393 @@ -1161,211 +1152,145 @@
   1.394       class=property>spanned</code>’ elements, a ratio must be determined
   1.395       among the ‘<code class=property>columns</code>’ of spanned elements.
   1.396       This ratio is computed by taking into consideration the widest element
   1.397 -     within each column.
   1.398 +     within each column.</p>
   1.399 +    <!--
   1.400 +<h3 id="rubyover">
   1.401 +Ruby overhanging: the 'ruby-overhang' property</h3>
   1.402  
   1.403 -    <p>In the context of this property, the ‘<code
   1.404 -     class=property>left</code>’ and ‘<code
   1.405 -     class=property>right</code>’ values are synonymous with the ‘<code
   1.406 -     class=property>start</code>’ and ‘<code class=property>end</code>’
   1.407 -     values respectively. I.e. their meaning is relative according to the
   1.408 -     text layout flow. Most of the other CSS properties interpret ‘<code
   1.409 -     class=property>left</code>’ and ‘<code
   1.410 -     class=property>right</code>’ on an ‘<code
   1.411 -     class=property>absolute</code>’ term. See Appendix A of the <a
   1.412 -     href="#CSS3TEXT">CSS3 Text Module</a> for further details.
   1.413 +  <table class="propdef">
   1.414 +    <tr>
   1.415 +      <th>Name:
   1.416 +      <td><dfn>ruby-overhang</dfn>
   1.417 +    <tr>
   1.418 +      <th>Value:
   1.419 +      <td>auto | start | end | none
   1.420 +    <tr>
   1.421 +      <th>Initial:
   1.422 +      <td>none
   1.423 +    <tr>
   1.424 +      <th>Applies to:
   1.425 +      <td>the parent of elements with display: ruby-text
   1.426 +    <tr>
   1.427 +      <th>Inherited:
   1.428 +      <td>yes
   1.429 +    <tr>
   1.430 +      <th>Percentages:
   1.431 +      <td>N/A
   1.432 +    <tr>
   1.433 +      <th>Media:
   1.434 +      <td>visual
   1.435 +    <tr>
   1.436 +      <th>Computed value:
   1.437 +      <td>specified value (except for initial and inherit)
   1.438 +  </table>
   1.439  
   1.440 -    <h3 id=rubyover><span class=secno>3.3. </span> Ruby overhanging: the
   1.441 -     ‘<a href="#ruby-overhang"><code
   1.442 -     class=property>ruby-overhang</code></a>’ property</h3>
   1.443 +<p>This property determines whether, and on which side, ruby text is allowed
   1.444 +to partially overhang any adjacent text in addition to its own base, when the
   1.445 +ruby text is wider than the ruby base. Note that ruby text is never allowed to
   1.446 +overhang glyphs belonging to another ruby base. <span class="issue"><span class="issuehead">Issue: </span> This rule must be broken if we are to allow support for jukugo ruby.</span> Also the user agent is free to assume
   1.447 +a maximum amount by which ruby text may overhang adjacent text. The user agent may use
   1.448 +the [[JIS4051]] recommendation of using one ruby text character
   1.449 +length as the maximum overhang length. Detailed rules for how ruby text can overhang adjacent characters for Japanese are described by [[JLREQ]].</p>
   1.450  
   1.451 -    <table class=propdef>
   1.452 -     <tbody>
   1.453 -      <tr>
   1.454 -       <th>Name:
   1.455 +<p>Possible values:</p>
   1.456 +<dl>
   1.457 +  <dt><strong>auto</strong></dt>
   1.458 +    <dd>The ruby text can overhang text adjacent to the base on either side.   	  [[JLREQ]] and [[JIS4051]] specify the categories of characters that
   1.459 +      ruby text can overhang. The user agent is free to follow those recommendations or specify its own classes of
   1.460 +      characters to overhang. This is the initial value.
   1.461 +		<div class="figure">
   1.462 +      <p><img class="example" width="177" height="91"
   1.463 +      alt="Diagram of glyph layout in overhanging ruby" src="images/ro-a.gif" /></p>
   1.464 +      <p><b>Figure 4.3.1</b>: Ruby overhanging adjacent text</p>
   1.465 +      </div>
   1.466 +    </dd>
   1.467 +  <dt><strong>start</strong></dt>
   1.468 +    <dd>The ruby text can only overhang the text that precedes it. That means, for
   1.469 +      example, that ruby cannot overhang text that is to the right of it in
   1.470 +      horizontal LTR layout, and it cannot overhang text that is below it in
   1.471 +      vertical-ideographic layout.
   1.472 +		<div class="figure">
   1.473 +      <p><img class="example" width="199" height="91"
   1.474 +      alt="Diagram of glyph layout when ruby overhangs the preceding glyphs only"
   1.475 +      src="images/ro-s.gif" /></p>
   1.476 +      <p><b>Figure 4.3.2</b>: Ruby overhanging preceding text only</p>
   1.477 +      </div>
   1.478 +    </dd>
   1.479 +  <dt><strong>end</strong></dt>
   1.480 +    <dd>The ruby text can only overhang the text that follows it. That means, for
   1.481 +      example, that ruby cannot overhang text that is to the left of it in
   1.482 +      horizontal LTR layout, and it cannot overhang text that is above it in
   1.483 +      vertical-ideographic layout.
   1.484 +		<div class="figure">
   1.485 +      <p><img class="example" width="198" height="91"
   1.486 +      alt="Diagram of glyph layout when ruby overhangs the following characters only"
   1.487 +      src="images/ro-e.gif" /></p>
   1.488 +      <p><b>Figure 4.3.3</b>: Ruby overhanging following text only</p>
   1.489 +      </div>
   1.490 +    </dd>
   1.491 +  <dt><strong>none</strong></dt>
   1.492 +    <dd>The ruby text cannot overhang any text adjacent to its base, only its
   1.493 +      own base.
   1.494  
   1.495 -       <td><dfn id=ruby-overhang>ruby-overhang</dfn>
   1.496 +      <div class="figure">
   1.497 +      <p><img class="example" width="220" height="91"
   1.498 +      alt="Diagram of glyph layout in non-overhanging ruby"
   1.499 +      src="images/ro-n.gif" /></p>
   1.500 +      <p><b>Figure 4.3.4</b>: Ruby not allowed to overhang adjacent text</p>
   1.501 +      </div>
   1.502 +    </dd>
   1.503 +</dl>
   1.504  
   1.505 -      <tr>
   1.506 -       <th>Value:
   1.507 +<h3 id="rubyspan">
   1.508 +Ruby annotation spanning: the 'ruby-span' property</h3>
   1.509  
   1.510 -       <td>auto | start | end | none
   1.511 +  <table class="propdef">
   1.512 +    <tr>
   1.513 +      <th>Name:
   1.514 +      <td><dfn>ruby-span</dfn>
   1.515 +    <tr>
   1.516 +      <th>Value:
   1.517 +      <td>attr(x) |  none
   1.518 +    <tr>
   1.519 +      <th>Initial:
   1.520 +      <td>none
   1.521 +    <tr>
   1.522 +      <th>Applies to:
   1.523 +      <td>elements with display: ruby-text
   1.524 +    <tr>
   1.525 +      <th>Inherited:
   1.526 +      <td>no
   1.527 +    <tr>
   1.528 +      <th>Percentages:
   1.529 +      <td>N/A
   1.530 +    <tr>
   1.531 +      <th>Media:
   1.532 +      <td>visual
   1.533 +    <tr>
   1.534 +      <th>Computed value:
   1.535 +      <td>&lt;number&gt;
   1.536 +  </table>
   1.537  
   1.538 -      <tr>
   1.539 -       <th>Initial:
   1.540 +<p>This property controls the spanning behavior of annotation elements. </p>
   1.541  
   1.542 -       <td>none
   1.543 +<p class="note"><span class="note-label">Note:</span> A XHTML user agent may also use the <samp>rbspan</samp> 
   1.544 +attribute to get the same effect.</p>
   1.545  
   1.546 -      <tr>
   1.547 -       <th>Applies to:
   1.548 +<p>Possible values:</p>
   1.549  
   1.550 -       <td>the parent of elements with display: ruby-text
   1.551 +<dl>
   1.552 +  <dt><strong>attr(x)</strong></dt>
   1.553 +    <dd>The value of attribute 'x' as a string value. The string value is 
   1.554 +    evaluated as a &lt;number&gt; to determine the number of ruby base elements to be 
   1.555 +    spanned by the annotation element. If the &lt;number&gt; is '0', it is replaced by 
   1.556 +    '1'.The &lt;number&gt; is the computed value. </dd>
   1.557 +  <dt>none</dt>
   1.558 +  <dd>No spanning. The computed value is '1'.</dd>
   1.559 +</dl>
   1.560  
   1.561 -      <tr>
   1.562 -       <th>Inherited:
   1.563 -
   1.564 -       <td>yes
   1.565 -
   1.566 -      <tr>
   1.567 -       <th>Percentages:
   1.568 -
   1.569 -       <td>N/A
   1.570 -
   1.571 -      <tr>
   1.572 -       <th>Media:
   1.573 -
   1.574 -       <td>visual
   1.575 -
   1.576 -      <tr>
   1.577 -       <th>Computed value:
   1.578 -
   1.579 -       <td>specified value (except for initial and inherit)
   1.580 -    </table>
   1.581 -
   1.582 -    <p>This property determines whether, and on which side, ruby text is
   1.583 -     allowed to partially overhang any adjacent text in addition to its own
   1.584 -     base, when the ruby text is wider than the ruby base. Note that ruby
   1.585 -     text is never allowed to overhang glyphs belonging to another ruby base.
   1.586 -     <span class=issue><span class=issuehead>Issue: </span> This rule must
   1.587 -     be broken if we are to allow support for jukugo ruby.</span> Also the
   1.588 -     user agent is free to assume a maximum amount by which ruby text may
   1.589 -     overhang adjacent text. The user agent may use the <a href="#JIS4051"
   1.590 -     rel=biblioentry>[JIS4051]<!--{{JIS4051}}--></a> recommendation of using
   1.591 -     one ruby text character length as the maximum overhang length. Detailed
   1.592 -     rules for how ruby text can overhang adjacent characters for Japanese
   1.593 -     are described by <a href="#JLREQ"
   1.594 -     rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a>.
   1.595 -
   1.596 -    <p>Possible values:
   1.597 -
   1.598 -    <dl>
   1.599 -     <dt><strong>auto</strong>
   1.600 -
   1.601 -     <dd>The ruby text can overhang text adjacent to the base on either side.
   1.602 -      <a href="#JLREQ" rel=biblioentry>[JLREQ]<!--{{JLREQ}}--></a> and <a
   1.603 -      href="#JIS4051" rel=biblioentry>[JIS4051]<!--{{JIS4051}}--></a> specify
   1.604 -      the categories of characters that ruby text can overhang. The user
   1.605 -      agent is free to follow those recommendations or specify its own
   1.606 -      classes of characters to overhang. This is the initial value.
   1.607 -      <div class=figure>
   1.608 -       <p><img alt="Diagram of glyph layout in overhanging ruby"
   1.609 -        class=example height=91 src="images/ro-a.gif" width=177>
   1.610 -
   1.611 -       <p><b>Figure 4.3.1</b>: Ruby overhanging adjacent text
   1.612 -      </div>
   1.613 -
   1.614 -     <dt><strong>start</strong>
   1.615 -
   1.616 -     <dd>The ruby text can only overhang the text that precedes it. That
   1.617 -      means, for example, that ruby cannot overhang text that is to the right
   1.618 -      of it in horizontal LTR layout, and it cannot overhang text that is
   1.619 -      below it in vertical-ideographic layout.
   1.620 -      <div class=figure>
   1.621 -       <p><img
   1.622 -        alt="Diagram of glyph layout when ruby overhangs the preceding glyphs only"
   1.623 -        class=example height=91 src="images/ro-s.gif" width=199>
   1.624 -
   1.625 -       <p><b>Figure 4.3.2</b>: Ruby overhanging preceding text only
   1.626 -      </div>
   1.627 -
   1.628 -     <dt><strong>end</strong>
   1.629 -
   1.630 -     <dd>The ruby text can only overhang the text that follows it. That
   1.631 -      means, for example, that ruby cannot overhang text that is to the left
   1.632 -      of it in horizontal LTR layout, and it cannot overhang text that is
   1.633 -      above it in vertical-ideographic layout.
   1.634 -      <div class=figure>
   1.635 -       <p><img
   1.636 -        alt="Diagram of glyph layout when ruby overhangs the following characters only"
   1.637 -        class=example height=91 src="images/ro-e.gif" width=198>
   1.638 -
   1.639 -       <p><b>Figure 4.3.3</b>: Ruby overhanging following text only
   1.640 -      </div>
   1.641 -
   1.642 -     <dt><strong>none</strong>
   1.643 -
   1.644 -     <dd>The ruby text cannot overhang any text adjacent to its base, only
   1.645 -      its own base.
   1.646 -      <div class=figure>
   1.647 -       <p><img alt="Diagram of glyph layout in non-overhanging ruby"
   1.648 -        class=example height=91 src="images/ro-n.gif" width=220>
   1.649 -
   1.650 -       <p><b>Figure 4.3.4</b>: Ruby not allowed to overhang adjacent text
   1.651 -      </div>
   1.652 -    </dl>
   1.653 -
   1.654 -    <h3 id=rubyspan><span class=secno>3.4. </span> Ruby annotation spanning:
   1.655 -     the ‘<a href="#ruby-span"><code class=property>ruby-span</code></a>’
   1.656 -     property</h3>
   1.657 -
   1.658 -    <table class=propdef>
   1.659 -     <tbody>
   1.660 -      <tr>
   1.661 -       <th>Name:
   1.662 -
   1.663 -       <td><dfn id=ruby-span>ruby-span</dfn>
   1.664 -
   1.665 -      <tr>
   1.666 -       <th>Value:
   1.667 -
   1.668 -       <td>attr(x) | none
   1.669 -
   1.670 -      <tr>
   1.671 -       <th>Initial:
   1.672 -
   1.673 -       <td>none
   1.674 -
   1.675 -      <tr>
   1.676 -       <th>Applies to:
   1.677 -
   1.678 -       <td>elements with display: ruby-text
   1.679 -
   1.680 -      <tr>
   1.681 -       <th>Inherited:
   1.682 -
   1.683 -       <td>no
   1.684 -
   1.685 -      <tr>
   1.686 -       <th>Percentages:
   1.687 -
   1.688 -       <td>N/A
   1.689 -
   1.690 -      <tr>
   1.691 -       <th>Media:
   1.692 -
   1.693 -       <td>visual
   1.694 -
   1.695 -      <tr>
   1.696 -       <th>Computed value:
   1.697 -
   1.698 -       <td>&lt;number&gt;
   1.699 -    </table>
   1.700 -
   1.701 -    <p>This property controls the spanning behavior of annotation elements.
   1.702 -
   1.703 -    <p class=note><span class=note-label>Note:</span> A XHTML user agent may
   1.704 -     also use the <samp>rbspan</samp> attribute to get the same effect.
   1.705 -
   1.706 -    <p>Possible values:
   1.707 -
   1.708 -    <dl>
   1.709 -     <dt><strong>attr(x)</strong>
   1.710 -
   1.711 -     <dd>The value of attribute ‘<code class=property>x</code>’ as a
   1.712 -      string value. The string value is evaluated as a &lt;number&gt; to
   1.713 -      determine the number of ruby base elements to be spanned by the
   1.714 -      annotation element. If the &lt;number&gt; is '0', it is replaced by
   1.715 -      '1'.The &lt;number&gt; is the computed value.
   1.716 -
   1.717 -     <dt>none
   1.718 -
   1.719 -     <dd>No spanning. The computed value is '1'.
   1.720 -    </dl>
   1.721 -
   1.722 -    <p>The following example shows an XML example using the ‘<code
   1.723 -     class=property>display</code>’ property values associated with the
   1.724 -     ‘<code class=css>ruby structure and the </code>’ruby-span' property
   1.725 -
   1.726 -    <pre class=xml>myruby       { display: ruby; }
   1.727 +<p>The following example shows an XML example using the 'display' property 
   1.728 +values associated with the 'ruby structure and the 'ruby-span' property</p>
   1.729 +<pre class="xml">myruby       { display: ruby; }
   1.730  myrbc        { display: ruby-base-container; }
   1.731  myrb         { display: ruby-base; }
   1.732  myrtc.before { display: ruby-text-container; ruby-position: before}
   1.733 @@ -1388,11 +1313,8 @@
   1.734    &lt;/myrtc&gt;
   1.735  &lt;/myruby&gt;</pre>
   1.736  
   1.737 -    <p class=issue><span class=issuehead>Issue: </span> The i18n WG has
   1.738 -     requested the addition of a sample user agent default style sheet, as
   1.739 -     promised by Ruby Annotation section 3.4. See <a
   1.740 -     href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20Default+stylesheet&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">this
   1.741 -     thread</a>.
   1.742 +<p class="issue"><span class="issuehead">Issue: </span> The i18n WG has requested the addition of a sample user agent default style sheet, as promised by Ruby Annotation section 3.4. See <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20Default+stylesheet&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">this thread</a>.</p>
   1.743 +	-->
   1.744  
   1.745      <h2 id=profiles><span class=secno>4. </span> Profiles</h2>
   1.746  
   1.747 @@ -1700,6 +1622,21 @@
   1.748       <li>ruby-align, <a href="#ruby-align"
   1.749        title="section 3.2."><strong>3.2.</strong></a>
   1.750  
   1.751 +     <li>ruby-align:auto, <a href="#auto"
   1.752 +      title="section 3.2."><strong>3.2.</strong></a>
   1.753 +
   1.754 +     <li>ruby-align:center, <a href="#center"
   1.755 +      title="section 3.2."><strong>3.2.</strong></a>
   1.756 +
   1.757 +     <li>ruby-align:distribute-letter, <a href="#distribute-letter"
   1.758 +      title="section 3.2."><strong>3.2.</strong></a>
   1.759 +
   1.760 +     <li>ruby-align:distribute-space, <a href="#distribute-space"
   1.761 +      title="section 3.2."><strong>3.2.</strong></a>
   1.762 +
   1.763 +     <li>ruby-align:start, <a href="#start"
   1.764 +      title="section 3.2."><strong>3.2.</strong></a>
   1.765 +
   1.766       <li>ruby annotation, <a href="#ruby-annotation"
   1.767        title="section 2."><strong>2.</strong></a>
   1.768  
   1.769 @@ -1722,18 +1659,27 @@
   1.770       <li>ruby container box, <a href="#ruby-container-box"
   1.771        title="section 2.1."><strong>2.1.</strong></a>
   1.772  
   1.773 -     <li>ruby-overhang, <a href="#ruby-overhang"
   1.774 -      title="section 3.3."><strong>3.3.</strong></a>
   1.775 +     <li>ruby-position, <a href="#ruby-position"
   1.776 +      title="section 3.1."><strong>3.1.</strong></a>
   1.777  
   1.778 -     <li>ruby-position, <a href="#ruby-position"
   1.779 +     <li>ruby-position:inter-character, <a href="#inter-character"
   1.780 +      title="section 3.1."><strong>3.1.</strong></a>
   1.781 +
   1.782 +     <li>ruby-position:left, <a href="#left"
   1.783 +      title="section 3.1."><strong>3.1.</strong></a>
   1.784 +
   1.785 +     <li>ruby-position:over, <a href="#over"
   1.786 +      title="section 3.1."><strong>3.1.</strong></a>
   1.787 +
   1.788 +     <li>ruby-position:right, <a href="#right"
   1.789 +      title="section 3.1."><strong>3.1.</strong></a>
   1.790 +
   1.791 +     <li>ruby-position:under, <a href="#under"
   1.792        title="section 3.1."><strong>3.1.</strong></a>
   1.793  
   1.794       <li>ruby segments, <a href="#ruby-segments"
   1.795        title="section 2."><strong>2.</strong></a>
   1.796  
   1.797 -     <li>ruby-span, <a href="#ruby-span"
   1.798 -      title="section 3.4."><strong>3.4.</strong></a>
   1.799 -
   1.800       <li>style sheet
   1.801        <ul>
   1.802         <li>as conformance class, <a href="#style-sheet"
   1.803 @@ -1764,8 +1710,7 @@
   1.804        <tr>
   1.805         <th><a class=property href="#ruby-align">ruby-align</a>
   1.806  
   1.807 -       <td>auto | start | left | center | end | right | distribute-letter |
   1.808 -        distribute-space | line-edge
   1.809 +       <td>auto | start | center | distribute-letter | distribute-space
   1.810  
   1.811         <td>auto
   1.812  
   1.813 @@ -1778,26 +1723,11 @@
   1.814         <td>visual
   1.815  
   1.816        <tr>
   1.817 -       <th><a class=property href="#ruby-overhang">ruby-overhang</a>
   1.818 -
   1.819 -       <td>auto | start | end | none
   1.820 -
   1.821 -       <td>none
   1.822 -
   1.823 -       <td>the parent of elements with display: ruby-text
   1.824 -
   1.825 -       <td>yes
   1.826 -
   1.827 -       <td>N/A
   1.828 -
   1.829 -       <td>visual
   1.830 -
   1.831 -      <tr>
   1.832         <th><a class=property href="#ruby-position">ruby-position</a>
   1.833  
   1.834 -       <td>before | after | inter-character | inline
   1.835 +       <td>[ over | under | inter-character ] && [ right | left ]
   1.836  
   1.837 -       <td>before
   1.838 +       <td>over right
   1.839  
   1.840         <td>the parent of elements with display: ruby-text.
   1.841  
   1.842 @@ -1806,21 +1736,6 @@
   1.843         <td>N/A
   1.844  
   1.845         <td>visual
   1.846 -
   1.847 -      <tr>
   1.848 -       <th><a class=property href="#ruby-span">ruby-span</a>
   1.849 -
   1.850 -       <td>attr(x) | none
   1.851 -
   1.852 -       <td>none
   1.853 -
   1.854 -       <td>elements with display: ruby-text
   1.855 -
   1.856 -       <td>no
   1.857 -
   1.858 -       <td>N/A
   1.859 -
   1.860 -       <td>visual
   1.861      </table>
   1.862      <!--end-properties-->
   1.863    </dl>
     2.1 --- a/css-ruby/Overview.src.html	Tue Jun 18 15:44:16 2013 +0200
     2.2 +++ b/css-ruby/Overview.src.html	Tue Jun 18 22:44:44 2013 +0900
     2.3 @@ -481,132 +481,138 @@
     2.4  <h3 id="rubypos">
     2.5  Ruby positioning: the 'ruby-position' property</h3>
     2.6  
     2.7 -  <table class="propdef">
     2.8 -    <tr>
     2.9 -      <th>Name:
    2.10 -      <td><dfn>ruby-position</dfn>
    2.11 -          <tr>
    2.12 -            <th>Value:
    2.13 -            <td>before | after | inter-character | inline
    2.14 -          <tr>
    2.15 -            <th>Initial:
    2.16 -            <td>before
    2.17 -          <tr>
    2.18 -            <th>Applies to:
    2.19 -            <td>the parent of elements with display: ruby-text.
    2.20 -          <tr>
    2.21 -            <th>Inherited:
    2.22 -            <td>yes
    2.23 -          <tr>
    2.24 -            <th>Percentages:
    2.25 -            <td>N/A
    2.26 -          <tr>
    2.27 -            <th>Media:
    2.28 -            <td>visual
    2.29 -          <tr>
    2.30 -            <th>Computed value:
    2.31 -            <td>specified value (except for initial and inherit)
    2.32 -    <tr>
    2.33 -      <th>Animatable:
    2.34 -      <td>no
    2.35 -    <tr>
    2.36 -      <th>Canonical order:
    2.37 -      <td><abbr title="follows order of property value definition">per grammar</abbr>
    2.38 -  </table>
    2.39 -<p class="issue"><span class="issuehead">Issue:&nbsp;</span> We replaced 'right' with 'inter-character', since that was its original intended purpose and such removes potential ambiguity with 'inline' or 'before'.  Bopomofo ruby needs special handling by the implementation, if ruby is to always appear to the right. (Note that the user may also choose to position bopomofo ruby before the base, in which case they would use the normal 'before' setting.)</p>
    2.40 -<p>This property is used by the parent of elements with display: ruby-text to
    2.41 -  control the position of the ruby text with respect to its base. Such parents
    2.42 -  are typically either the <samp>ruby</samp> element itself (simple ruby) or the
    2.43 -  <samp>rtc</samp> element (complex ruby). This assures that all parts of a <samp>rtc</samp> 
    2.44 -element will be displayed in the same position. Possible values:</p>
    2.45 -<p class="issue"><span class="issuehead">Issue-107:&nbsp;</span> Roland Steiner has requested the addition of an auto value as default. See <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=ruby-position%3A+undesirable+default+value+%27before%27+for+complex+ruby&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;period_month=&amp;period_year=&amp;index-grp=Public__FULL&amp;index-type=t&amp;type-index=www-style&amp;resultsperpage=20&amp;sortby=date">this thread</a> and <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=Styling+of+complex+Ruby&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;period_month=&amp;period_year=&amp;index-grp=Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core&amp;resultsperpage=20&amp;sortby=date">this one</a>.</p>
    2.46 -<dl>
    2.47 -	<dt><strong>before</strong></dt>
    2.48 -    <dd>The ruby text appears before the base. This is the most common setting
    2.49 -      used in ideographic East Asian writing systems. This is the initial
    2.50 -      value.
    2.51 +	<table class="propdef">
    2.52 +		<tr>
    2.53 +			<th>Name:
    2.54 +			<td><dfn>ruby-position</dfn>
    2.55 +		<tr>
    2.56 +			<th><a href="#values">Value</a>:
    2.57 +			<td>[ over | under | inter-character ] && [ right | left ]
    2.58 +		<tr>
    2.59 +			<th>Initial:
    2.60 +			<td>over right
    2.61 +		<tr>
    2.62 +			<th>Applies to:
    2.63 +			<td>the parent of elements with display: ruby-text.
    2.64 +		<tr>
    2.65 +			<th>Inherited:
    2.66 +			<td>yes
    2.67 +		<tr>
    2.68 +			<th>Percentages:
    2.69 +			<td>N/A
    2.70 +		<tr>
    2.71 +			<th>Media:
    2.72 +			<td>visual
    2.73 +		<tr>
    2.74 +			<th>Computed value:
    2.75 +			<td>specified value (except for initial and inherit)
    2.76 +		<tr>
    2.77 +			<th>Animatable:
    2.78 +			<td>no
    2.79 +		<tr>
    2.80 +			<th>Canonical order:
    2.81 +			<td><abbr title="follows order of property value definition">per grammar</abbr>
    2.82 +	</table>
    2.83 +	<p class="issue"><span class="issuehead">Issue:&nbsp;</span> We replaced 'right' with 'inter-character', since that was its original intended purpose and such removes potential ambiguity with 'inline' or 'before'.  Bopomofo ruby needs special handling by the implementation, if ruby is to always appear to the right. (Note that the user may also choose to position bopomofo ruby before the base, in which case they would use the normal 'before' setting.)</p>
    2.84 +	<p>This property is used by the parent of elements with display: ruby-text to
    2.85 +		control the position of the ruby text with respect to its base. Such parents
    2.86 +		are typically either the <samp>ruby</samp> element itself (simple ruby) or the
    2.87 +		<samp>rtc</samp> element (complex ruby). This assures that all parts of a <samp>rtc</samp> 
    2.88 +		element will be displayed in the same position. Possible values:</p>
    2.89 +	<p class="issue"><span class="issuehead">Issue-107:&nbsp;</span> Roland Steiner has requested the addition of an auto value as default. See <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=ruby-position%3A+undesirable+default+value+%27before%27+for+complex+ruby&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;period_month=&amp;period_year=&amp;index-grp=Public__FULL&amp;index-type=t&amp;type-index=www-style&amp;resultsperpage=20&amp;sortby=date">this thread</a> and <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=Styling+of+complex+Ruby&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;period_month=&amp;period_year=&amp;index-grp=Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core&amp;resultsperpage=20&amp;sortby=date">this one</a>.</p>
    2.90 +	<dl>
    2.91 +		<dt><dfn title="ruby-position:over">''over''</dfn></dt>
    2.92 +		<dd>The ruby text appears over the base in horizontal text.
    2.93 +			This is the most common setting used in ideographic East Asian writing systems.
    2.94 +			This is the initial value.
    2.95  
    2.96 -      <div class="figure">
    2.97 -      <p>
    2.98 -      <img
    2.99 -      alt="Diagram of ruby glyph layout in horizontal mode with ruby text appearing above the base"
   2.100 -      class="example" src="images/shinkansen-top.gif" width="140" height="33" /></p>
   2.101 -      <p><b>Figure 4.1.1</b>: Top ruby in horizontal layout applied to
   2.102 -      Japanese text</p>
   2.103 -      </div>
   2.104 -      <p>If the base appears in a vertical-ideographic layout mode, the ruby
   2.105 -      appears on the right side of the base and is rendered in the same layout
   2.106 -      mode as the base (i.e. vertical-ideographic).</p>
   2.107 +			<div class="figure">
   2.108 +				<p>
   2.109 +				<img
   2.110 +					alt="Diagram of ruby glyph layout in horizontal mode with ruby text appearing above the base"
   2.111 +					src="images/shinkansen-top.gif" width="140" height="33" /></p>
   2.112 +				<p><b>Figure 4.1.1</b>: Top ruby in horizontal layout applied to
   2.113 +				Japanese text</p>
   2.114 +			</div>
   2.115 +		</dd>
   2.116  
   2.117 -      <div class="figure">
   2.118 -      <p>
   2.119 -      <img
   2.120 -      alt="Diagram of ruby glyph layout in vertical mode with ruby text apearing vertically on the right of the base"
   2.121 -      class="example" src="images/shinkansen-right.gif" width="33" height="141" /></p>
   2.122 -      <p><b>Figure 4.1.2</b>: Top ruby in vertical ideographic layout applied
   2.123 -      to Japanese text</p>
   2.124 -      </div>
   2.125 -</dd>
   2.126 -  <dt><strong>after</strong></dt>
   2.127 -    <dd>The ruby text appears after the base. This is a relatively rare
   2.128 -      setting used in ideographic East Asian writing systems, most easily
   2.129 -      found in educational text.
   2.130 +		<dt><dfn title="ruby-position:right">''right''</dfn></dt>
   2.131 +		<dd>The ruby text appears on the right side of the base in vertical text.
   2.132  
   2.133 -      <div class="figure">
   2.134 -      <p>
   2.135 -      <img
   2.136 -      alt="Diagram of ruby glyph layout in horizontal mode with ruby text appearing below the base"
   2.137 -      class="example" src="images/shinkansen-bottom.gif" width="142" height="36" /></p>
   2.138 -      <p><b>Figure 4.1.3</b>: Bottom ruby in horizontal layout applied to
   2.139 -      Japanese text</p>
   2.140 -      </div>
   2.141 -      <p>If the base appears in a vertical ideographic mode, the bottom ruby
   2.142 -      appears on the left side of the base and is rendered in the same layout
   2.143 -      mode as the base (i.e. vertical).</p>
   2.144 +			<div class="figure">
   2.145 +				<p>
   2.146 +				<img
   2.147 +					alt="Diagram of ruby glyph layout in vertical mode with ruby text apearing vertically on the right of the base"
   2.148 +					src="images/shinkansen-right.gif" width="33" height="141" /></p>
   2.149 +				<p><b>Figure 4.1.2</b>: Top ruby in vertical ideographic layout applied
   2.150 +				to Japanese text</p>
   2.151 +			</div>
   2.152 +		</dd>
   2.153  
   2.154 -      <div class="figure">
   2.155 -      <p>
   2.156 -      <img
   2.157 -      alt="Diagram of ruby glyph layout in vertical mode with ruby text apearing vertically on the left of the base"
   2.158 -      class="example" src="images/shinkansen-left.gif" width="37" height="141" /></p>
   2.159 -      <p><b>Figure 4.1.4</b>: Bottom ruby in vertical ideographic layout applied
   2.160 -      to Japanese text</p>
   2.161 -      </div>
   2.162 -    </dd>
   2.163 -  <dt><strong>inter-character</strong></dt>
   2.164 -    <dd>
   2.165 -	  <p class="issue"><span class="issuehead">Issue:&nbsp;</span> We replaced 'right' with 'inter-character', since that was its original intended purpose and such removes potential ambiguity with 'inline' or 'before'.  Bopomofo ruby needs special handling by the implementation, if ruby is to always appear to the right. (Note that the user may also choose to position bopomofo ruby before the base, in which case they would use the normal 'before' setting.)  See <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20Vertical+layout+not+enough+for+bopomofo&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">this thread</a> following a request from the i18n WG.</p>
   2.166 -	  <p>The ruby text appears on the right of the base. Unlike 'before' and
   2.167 -      'after', this value is visual and is not relative to the text flow direction.</p>
   2.168 +		<dt><dfn title="ruby-position:under">''under''</dfn></dt>
   2.169 +		<dd>The ruby text appears under the base in horizontal text.
   2.170 +			This is a relatively rare setting used in ideographic East Asian writing systems,
   2.171 +			most easily found in educational text.
   2.172  
   2.173 -      <p>This value is provided for the special case of traditional Chinese as used especially in
   2.174 -      Taiwan: ruby (made of <a href="#g-bopomofo"><span
   2.175 -      lang="zh">bopomofo</span></a> glyphs) in that context  appears vertically along
   2.176 -      the right side of the base glyph, whether the layout of the base characters is vertical or horizontal:</p>
   2.177 +			<div class="figure">
   2.178 +				<p>
   2.179 +				<img
   2.180 +					alt="Diagram of ruby glyph layout in horizontal mode with ruby text appearing below the base"
   2.181 +					src="images/shinkansen-bottom.gif" width="142" height="36" /></p>
   2.182 +				<p><b>Figure 4.1.3</b>: Bottom ruby in horizontal layout applied to Japanese text</p>
   2.183 +			</div>
   2.184 +		</dd>
   2.185  
   2.186 -      <div class="figure">
   2.187 -      <p><img alt="Example of Taiwanese-style ruby" class="example"
   2.188 -      width="138" height="42" src="images/bopomofo.gif" /></p>
   2.189 -      <p><b>Figure 4.1.5</b>: "<span lang="zh">Bopomofo</span>" ruby in
   2.190 -      traditional Chinese (ruby text shown in blue for clarity) in horizontal
   2.191 -      layout</p>
   2.192 -      </div>
   2.193 -      <p class="note"><span class="note-label">Note:</span> The bopomofo 
   2.194 -      transcription is written in the normal way as part of the ruby text. 
   2.195 -      The user agent is responsible for ensuring the correct relative alignment 
   2.196 -      and positioning of the glyphs, including those corresponding to the 
   2.197 -      tone marks, when displaying. Tone marks are spacing characters that occur in memory at the end of the ruby text for each base character. They are usually displayed in a separate column to the right of the bopomofo characters, and the height of the tone mark depends on the number of characters in the syllable. One tone mark, however, is placed above the bopomofo, not to the right of it.</p>
   2.198 -      <p class="note"><span class="note-label">Note:</span> To make bopomofo annotations appear before or after the base text, like annotations for most other East Asian writing systems, use the 'before' and 'after' values of ruby-position.</p>
   2.199 -	  <p>It is not defined how a user-agent should handle ruby text that is not bopomofo when the value of ruby-position is set to 'right'.</p>
   2.200 -    <!-- See Taiwanese requirements doc for EPUB at http://epub-revision.googlecode.com/files/EGLS_TW_eng.ppt -->
   2.201 -    </dd>
   2.202 +		<dt><dfn title="ruby-position:left">''left''</dfn></dt>
   2.203 +		<dd>The ruby text appears on the left side of the base in vertical text.
   2.204 +
   2.205 +			<div class="figure">
   2.206 +				<p>
   2.207 +				<img
   2.208 +					alt="Diagram of ruby glyph layout in vertical mode with ruby text apearing vertically on the left of the base"
   2.209 +					src="images/shinkansen-left.gif" width="37" height="141" /></p>
   2.210 +				<p><b>Figure 4.1.4</b>: Bottom ruby in vertical ideographic layout applied to Japanese text</p>
   2.211 +			</div>
   2.212 +		</dd>
   2.213 +
   2.214 +		<dt><dfn title="ruby-position:inter-character">''inter-character''</dfn></dt>
   2.215 +		<dd>
   2.216 +			<p class="issue"><span class="issuehead">Issue:&nbsp;</span> We replaced 'right' with 'inter-character', since that was its original intended purpose and such removes potential ambiguity with 'inline' or 'before'.  Bopomofo ruby needs special handling by the implementation, if ruby is to always appear to the right. (Note that the user may also choose to position bopomofo ruby before the base, in which case they would use the normal 'before' setting.)  See <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20Vertical+layout+not+enough+for+bopomofo&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">this thread</a> following a request from the i18n WG.</p>
   2.217 +			<p>The ruby text appears on the right of the base in horizontal text.
   2.218 +
   2.219 +			<p>This value is provided for the special case of traditional Chinese as used especially in
   2.220 +				Taiwan: ruby (made of <a href="#g-bopomofo"><span
   2.221 +				lang="zh">bopomofo</span></a> glyphs) in that context  appears vertically along
   2.222 +				the right side of the base glyph,
   2.223 +				even when the layout of the base characters is horizontal:</p>
   2.224 +
   2.225 +				<div class="figure">
   2.226 +					<p><img alt="Example of Taiwanese-style ruby"
   2.227 +						width="138" height="42" src="images/bopomofo.gif" /></p>
   2.228 +					<p><b>Figure 4.1.5</b>: "<span lang="zh">Bopomofo</span>" ruby in
   2.229 +						traditional Chinese (ruby text shown in blue for clarity) in horizontal
   2.230 +						layout</p>
   2.231 +				</div>
   2.232 +				<p class="note"><span class="note-label">Note:</span> The bopomofo 
   2.233 +				transcription is written in the normal way as part of the ruby text. 
   2.234 +				The user agent is responsible for ensuring the correct relative alignment 
   2.235 +				and positioning of the glyphs, including those corresponding to the 
   2.236 +				tone marks, when displaying. Tone marks are spacing characters that occur in memory at the end of the ruby text for each base character. They are usually displayed in a separate column to the right of the bopomofo characters, and the height of the tone mark depends on the number of characters in the syllable. One tone mark, however, is placed above the bopomofo, not to the right of it.</p>
   2.237 +				<p class="note"><span class="note-label">Note:</span> To make bopomofo annotations appear before or after the base text, like annotations for most other East Asian writing systems, use the 'before' and 'after' values of ruby-position.</p>
   2.238 +			<p>It is not defined how a user-agent should handle ruby text that is not bopomofo
   2.239 +				when the value of ruby-position is set to 'inter-character'.</p>
   2.240 +			<!-- See Taiwanese requirements doc for EPUB at http://epub-revision.googlecode.com/files/EGLS_TW_eng.ppt -->
   2.241 +		</dd>
   2.242 +
   2.243 +		<!--
   2.244  <dt><strong>inline</strong></dt>
   2.245  <dd>
   2.246  <p>Ruby text follows the ruby base with no special styling.  The value can be used to disable  ruby text positioning.</p>
   2.247  <p>If the author has used the XHTML <samp>rp</samp> element [[RUBY]] they should set the <samp>display</samp> value for that element to <samp>inline</samp>, so that the ruby text is distinguishable from the base text.  If no <samp>rp</samp> element has been used, the author can use the <samp>content</samp> property with the <samp>:before</samp> and <samp>:after</samp> pseudo-elements to set off the ruby text. </p>
   2.248  <p class="issue"><span class="issuehead">Issue:&nbsp;</span> Here is a <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20inline+value+description+missing&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">request </a>for this section to be added, from the i18n WG..</p>
   2.249  </dd>
   2.250 -</dl>
   2.251 +		-->
   2.252 +	</dl>
   2.253  
   2.254  <p>If two rtc elements are set with the same ruby-position value, (for example 
   2.255  both &#39;before&#39;), the relative position of the two elements is undefined. This 
   2.256 @@ -615,105 +621,110 @@
   2.257  <h3 id="rubyalign">
   2.258  Ruby alignment: the 'ruby-align' property</h3>
   2.259  
   2.260 -  <table class="propdef">
   2.261 -    <tr>
   2.262 -      <th>Name:
   2.263 -      <td><dfn>ruby-align</dfn>
   2.264 -    <tr>
   2.265 -      <th>Value:
   2.266 -      <td>auto | start | left | center | end | right | distribute-letter |
   2.267 -      distribute-space | line-edge
   2.268 -    <tr>
   2.269 -      <th>Initial:
   2.270 -      <td>auto
   2.271 -    <tr>
   2.272 -      <th>Applies to:
   2.273 -      <td>all elements and generated content
   2.274 -    <tr>
   2.275 -      <th>Inherited:
   2.276 -      <td>yes
   2.277 -    <tr>
   2.278 -      <th>Percentages:
   2.279 -      <td>N/A
   2.280 -    <tr>
   2.281 -      <th>Media:
   2.282 -      <td>visual
   2.283 -    <tr>
   2.284 -      <th>Computed value:
   2.285 -      <td>specified value (except for initial and inherit)
   2.286 -  </table>
   2.287 +	<table class="propdef">
   2.288 +		<tr>
   2.289 +			<th>Name:
   2.290 +			<td><dfn>ruby-align</dfn>
   2.291 +		<tr>
   2.292 +			<th><a href="#values">Value</a>:
   2.293 +			<td>auto | start | center |
   2.294 +				distribute-letter | distribute-space
   2.295 +		<tr>
   2.296 +			<th>Initial:
   2.297 +			<td>auto
   2.298 +		<tr>
   2.299 +			<th>Applies to:
   2.300 +			<td>all elements and generated content
   2.301 +		<tr>
   2.302 +			<th>Inherited:
   2.303 +			<td>yes
   2.304 +		<tr>
   2.305 +			<th>Percentages:
   2.306 +			<td>N/A
   2.307 +		<tr>
   2.308 +			<th>Media:
   2.309 +			<td>visual
   2.310 +		<tr>
   2.311 +			<th>Computed value:
   2.312 +			<td>specified value (except for initial and inherit)
   2.313 +	</table>
   2.314  
   2.315 -<p>This property can be used on any element to control the text alignment of
   2.316 -the ruby text and ruby base contents relative to each other. It applies to all
   2.317 -the rubys in the element. For simple ruby, the alignment is applied to the
   2.318 -ruby child element whose content is shorter: either the <a
   2.319 -href="http://www.w3.org/TR/ruby/#rb"><samp>rb</samp></a>   element or the <a
   2.320 -href="http://www.w3.org/TR/ruby/#rt"><samp>rt</samp></a> element [[RUBY]].
   2.321 -For complex ruby, the alignment is also applied to the
   2.322 -ruby child elements whose content is shorter: either the <samp>rb</samp>
   2.323 -element and/or one or two <samp>rt</samp> elements for each related ruby text
   2.324 -and ruby base element within the <samp>rtc</samp> and <samp>rbc</samp>
   2.325 -element.</p>
   2.326 +	<p>This property can be used on any element to control the text alignment of
   2.327 +		the ruby text and ruby base contents relative to each other. It applies to all
   2.328 +		the rubys in the element. For simple ruby, the alignment is applied to the
   2.329 +		ruby child element whose content is shorter: either the <a
   2.330 +		href="http://www.w3.org/TR/ruby/#rb"><samp>rb</samp></a>   element or the <a
   2.331 +		href="http://www.w3.org/TR/ruby/#rt"><samp>rt</samp></a> element [[RUBY]].
   2.332 +		For complex ruby, the alignment is also applied to the
   2.333 +		ruby child elements whose content is shorter: either the <samp>rb</samp>
   2.334 +		element and/or one or two <samp>rt</samp> elements for each related ruby text
   2.335 +		and ruby base element within the <samp>rtc</samp> and <samp>rbc</samp>
   2.336 +		element.</p>
   2.337  
   2.338 -<p>Possible values:</p>
   2.339 -<p class="issue"><span class="issuehead">Issue:&nbsp;</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.340 -<dl>
   2.341 -	<dt><strong>auto</strong></dt>
   2.342 -    <dd>The user agent determines how the ruby contents are aligned. This is
   2.343 -      the initial value. The behavior recommended by [[JLREQ]] is for  wide-cell ruby  to be aligned in the 'distribute-space' mode:
   2.344 -<div class="figure">
   2.345 -      <p><img class="example" width="145" height="91"
   2.346 -      alt="Diagram of glyph layout in auto aligned ruby when ruby text is shorter than base"
   2.347 -      src="images/ra-ds.gif" /><img class="example" width="145" height="91"
   2.348 -      alt="Diagram of glyph layout in auto aligned ruby when ruby text is longer than base"
   2.349 -      src="images/ra-ds-rb.gif" /></p>
   2.350 -      <p><b>Figure 4.2.1</b>: Wide-cell text in 'auto' ruby alignment is
   2.351 -      'distribute-space' justified</p>
   2.352 -      </div>
   2.353 -      <p>The recommended behavior for  narrow-cell glyph ruby is to be
   2.354 -      aligned in the 'center' mode.</p>
   2.355 +	<p>Possible values:</p>
   2.356 +	<p class="issue"><span class="issuehead">Issue:&nbsp;</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.357 +	<dl>
   2.358 +		<dt><dfn title="ruby-align:auto">''auto''</dfn></dt>
   2.359 +		<dd>
   2.360 +			<p>The user agent determines how the ruby contents are aligned.
   2.361 +				This is the initial value.
   2.362 +				The behavior recommended by [[JLREQ]] is for  wide-cell ruby  to be aligned in the 'distribute-space' mode:
   2.363 +				<div class="figure">
   2.364 +					<p><img width="145" height="91"
   2.365 +					alt="Diagram of glyph layout in auto aligned ruby when ruby text is shorter than base"
   2.366 +					src="images/ra-ds.gif" /><img width="145" height="91"
   2.367 +					alt="Diagram of glyph layout in auto aligned ruby when ruby text is longer than base"
   2.368 +					src="images/ra-ds-rb.gif" /></p>
   2.369 +					<p><b>Figure 4.2.1</b>: Wide-cell text in 'auto' ruby alignment is
   2.370 +					'distribute-space' justified</p>
   2.371 +				</div>
   2.372  
   2.373 -      <div class="figure">
   2.374 -      <p><img
   2.375 -      alt="Diagram of glyph layout in auto aligned ruby when halfwidth ruby text is shorter than base"
   2.376 -      class="example" width="145" height="91"
   2.377 -      src="images/ra-c-h.gif" /><img
   2.378 -      alt="Diagram of character layout in auto aligned ruby when ruby text is longer than narrow-width base"
   2.379 -      class="example" width="145" height="91"
   2.380 -      src="images/ra-c-rb-h.gif" /></p>
   2.381 -      <p><b>Figure 4.2.2</b>: Narrow-width ruby text in 'auto' ruby alignment
   2.382 -      is centered</p>
   2.383 -      </div>
   2.384 -    </dd>
   2.385 -  <dt><strong>left</strong></dt>
   2.386 -    <dd>The ruby text content is aligned with the start edge of the base.
   2.387 -	
   2.388 -	 <p class="issue"><span class="issuehead">Issue:&nbsp;</span> The i18n WG feels that start and left should not be synonymous, and proposed to drop left (there is no left/right in overhang)? See <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20left/start+and+right/end&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">this thread</a>.</p>
   2.389 +			<p>The recommended behavior for  narrow-cell glyph ruby is to be
   2.390 +				aligned in the 'center' mode.</p>
   2.391 +				<div class="figure">
   2.392 +					<p><img
   2.393 +					alt="Diagram of glyph layout in auto aligned ruby when halfwidth ruby text is shorter than base"
   2.394 +					width="145" height="91"
   2.395 +					src="images/ra-c-h.gif" /><img
   2.396 +					alt="Diagram of character layout in auto aligned ruby when ruby text is longer than narrow-width base"
   2.397 +					width="145" height="91"
   2.398 +					src="images/ra-c-rb-h.gif" /></p>
   2.399 +					<p><b>Figure 4.2.2</b>: Narrow-width ruby text in 'auto' ruby alignment
   2.400 +					is centered</p>
   2.401 +				</div>
   2.402 +		</dd>
   2.403  
   2.404 -      <div class="figure">
   2.405 -      <p><img
   2.406 -      alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base"
   2.407 -      class="example" width="145" height="91" src="images/ra-l.gif" /><img
   2.408 -      class="example" width="145" height="91"
   2.409 -      alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base"
   2.410 -      src="images/ra-l-rb.gif" /></p>
   2.411 -      <p><b>Figure 4.2.3</b>: Start ruby alignment</p>
   2.412 -      </div>
   2.413 -    </dd>
   2.414 -  <dt><strong>center</strong></dt>
   2.415 -    <dd>The ruby text content is centered within the width of the base. If the
   2.416 -      length of the base is smaller than the length of the ruby text, then the
   2.417 -      base is centered within the width of the ruby text.
   2.418 +		<dt><dfn title="ruby-align:start">''start''</dfn></dt>
   2.419 +		<dd>The ruby text content is aligned with the start edge of the base.
   2.420 +			<p class="issue"><span class="issuehead">Issue:&nbsp;</span> The i18n WG feels that start and left should not be synonymous, and proposed to drop left (there is no left/right in overhang)? See <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20left/start+and+right/end&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">this thread</a>.</p>
   2.421  
   2.422 -      <div class="figure">
   2.423 -      <p><img class="example" width="145" height="91"
   2.424 -      alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base"
   2.425 -      src="images/ra-c.gif" /><img class="example" width="145" height="91"
   2.426 -      alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base"
   2.427 -      src="images/ra-c-rb.gif" /></p>
   2.428 -      <p><b>Figure 4.2.4</b>: Center ruby alignment</p>
   2.429 -      </div>
   2.430 -    </dd>
   2.431 +			<div class="figure">
   2.432 +				<p><img
   2.433 +					alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base"
   2.434 +					width="145" height="91" src="images/ra-l.gif" /><img
   2.435 +					width="145" height="91"
   2.436 +					alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base"
   2.437 +					src="images/ra-l-rb.gif" /></p>
   2.438 +				<p><b>Figure 4.2.3</b>: Start ruby alignment</p>
   2.439 +			</div>
   2.440 +		</dd>
   2.441 +
   2.442 +		<dt><dfn title="ruby-align:center">''center''</dfn></dt>
   2.443 +		<dd>The ruby text content is centered within the width of the base. If the
   2.444 +			length of the base is smaller than the length of the ruby text, then the
   2.445 +			base is centered within the width of the ruby text.
   2.446 +
   2.447 +			<div class="figure">
   2.448 +				<p><img width="145" height="91"
   2.449 +					alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base"
   2.450 +					src="images/ra-c.gif" /><img width="145" height="91"
   2.451 +					alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base"
   2.452 +					src="images/ra-c-rb.gif" /></p>
   2.453 +				<p><b>Figure 4.2.4</b>: Center ruby alignment</p>
   2.454 +			</div>
   2.455 +		</dd>
   2.456 +
   2.457 +		<!--
   2.458    <dt><strong>right</strong></dt>
   2.459      <dd>The ruby text content is aligned with the end edge of the base.
   2.460      	<p class="issue"><span class="issuehead">Issue:&nbsp;</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=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20left/start+and+right/end&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">this thread</a>.</p>
   2.461 @@ -726,43 +737,49 @@
   2.462  	<p><b>Figure 4.2.5</b>: End ruby alignment</p>
   2.463  </div>
   2.464      </dd>
   2.465 -  <dt><strong>distribute-letter</strong></dt>
   2.466 -    <dd>If the width of the ruby text is smaller than that of the base, then
   2.467 -      the ruby text contents are evenly distributed across the width of the
   2.468 -      base, with the first and last ruby text glyphs lining up with the
   2.469 -      corresponding first and last base glyphs. If the width of the ruby text
   2.470 -      is at least the width of the base, then the letters of the base are
   2.471 -      evenly distributed across the width of the ruby text.
   2.472 +		-->
   2.473  
   2.474 -      <div class="figure">
   2.475 -      <p><img class="example" width="145" height="91"
   2.476 -      alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base"
   2.477 -      src="images/ra-dl.gif" /><img class="example" width="145" height="91"
   2.478 -      alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base"
   2.479 -      src="images/ra-dl-rb.gif" /></p>
   2.480 -      <p><b>Figure 4.2.6</b>: Distribute-letter ruby alignment</p>
   2.481 -      </div>
   2.482 -    </dd>
   2.483 -  <dt><strong>distribute-space</strong></dt>
   2.484 -    <dd>If the width of the ruby text is smaller than that of the base, then
   2.485 -      the ruby text contents are evenly distributed across the width of the
   2.486 -      base, with a certain amount of white space preceding the first and
   2.487 -      following the last character in the ruby text. That amount of white
   2.488 -      space is normally equal to half the amount of inter-character space of
   2.489 -      the ruby text. If the width of the ruby text is at least the width of
   2.490 -      the base, then the same type of space distribution applies to the base.
   2.491 -      In other words, if the base is shorter than the ruby text, the base is
   2.492 -      distribute-space aligned. This type of alignment
   2.493 -      is described by [[JLREQ]].
   2.494 -		<div class="figure">
   2.495 -      <p><img class="example" width="145" height="91"
   2.496 -      alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is shorter than base"
   2.497 -      src="images/ra-ds.gif" /><img class="example" width="145" height="91"
   2.498 -      alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is longer than base"
   2.499 -      src="images/ra-ds-rb.gif" /></p>
   2.500 -      <p><b>Figure 4.2.7</b>: Distribute-space ruby alignment</p>
   2.501 -      </div>
   2.502 -    </dd>
   2.503 +		<dt><dfn title="ruby-align:distribute-letter">''distribute-letter''</dfn></dt>
   2.504 +		<dd>If the width of the ruby text is smaller than that of the base, then
   2.505 +			the ruby text contents are evenly distributed across the width of the
   2.506 +			base, with the first and last ruby text glyphs lining up with the
   2.507 +			corresponding first and last base glyphs. If the width of the ruby text
   2.508 +			is at least the width of the base, then the letters of the base are
   2.509 +			evenly distributed across the width of the ruby text.
   2.510 +
   2.511 +			<div class="figure">
   2.512 +				<p><img width="145" height="91"
   2.513 +				alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base"
   2.514 +				src="images/ra-dl.gif" /><img width="145" height="91"
   2.515 +				alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base"
   2.516 +				src="images/ra-dl-rb.gif" /></p>
   2.517 +				<p><b>Figure 4.2.6</b>: Distribute-letter ruby alignment</p>
   2.518 +			</div>
   2.519 +		</dd>
   2.520 +
   2.521 +		<dt><dfn title="ruby-align:distribute-space">''distribute-space''</dfn></dt>
   2.522 +		<dd>If the width of the ruby text is smaller than that of the base, then
   2.523 +			the ruby text contents are evenly distributed across the width of the
   2.524 +			base, with a certain amount of white space preceding the first and
   2.525 +			following the last character in the ruby text. That amount of white
   2.526 +			space is normally equal to half the amount of inter-character space of
   2.527 +			the ruby text. If the width of the ruby text is at least the width of
   2.528 +			the base, then the same type of space distribution applies to the base.
   2.529 +			In other words, if the base is shorter than the ruby text, the base is
   2.530 +			distribute-space aligned. This type of alignment
   2.531 +			is described by [[JLREQ]].
   2.532 +
   2.533 +			<div class="figure">
   2.534 +				<p><img width="145" height="91"
   2.535 +					alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is shorter than base"
   2.536 +					src="images/ra-ds.gif" /><img width="145" height="91"
   2.537 +					alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is longer than base"
   2.538 +					src="images/ra-ds-rb.gif" /></p>
   2.539 +				<p><b>Figure 4.2.7</b>: Distribute-space ruby alignment</p>
   2.540 +			</div>
   2.541 +		</dd>
   2.542 +
   2.543 +		<!--
   2.544    <dt><strong>line-edge</strong></dt>
   2.545      <dd>If the ruby text is not adjacent to a line edge, it is aligned as in
   2.546        'auto'. If it is adjacent to a line edge, then it is still aligned as in
   2.547 @@ -781,21 +798,17 @@
   2.548        <p><b>Figure 4.2.8</b>: Line edge ruby alignment</p>
   2.549        </div>
   2.550      </dd>
   2.551 -</dl>
   2.552 +		-->
   2.553 +	</dl>
   2.554  
   2.555 -<p>For a complex ruby with spanning elements, one additional consideration is
   2.556 -required. If the spanning element spans multiple 'rows' (other rbc or rtc
   2.557 -elements), and the ruby alignment requires space distribution among the
   2.558 -'spanned' elements, a ratio must be determined among the 'columns' of spanned
   2.559 -elements. This ratio is computed by taking into consideration the widest
   2.560 -element within each column.</p>
   2.561 +	<p>For a complex ruby with spanning elements, one additional consideration is
   2.562 +		required. If the spanning element spans multiple 'rows' (other rbc or rtc
   2.563 +		elements), and the ruby alignment requires space distribution among the
   2.564 +		'spanned' elements, a ratio must be determined among the 'columns' of spanned
   2.565 +		elements. This ratio is computed by taking into consideration the widest
   2.566 +		element within each column.</p>
   2.567  
   2.568 -<p>In the context of this property, the 'left' and 'right' values are
   2.569 -synonymous with the 'start' and 'end' values respectively. I.e. their meaning
   2.570 -is relative according to the text layout flow. Most of the other CSS
   2.571 -properties interpret 'left' and 'right' on an 'absolute' term. See Appendix A
   2.572 -of the <a href="#CSS3TEXT">CSS3 Text Module</a> for further details.</p>
   2.573 -
   2.574 +	<!--
   2.575  <h3 id="rubyover">
   2.576  Ruby overhanging: the 'ruby-overhang' property</h3>
   2.577  
   2.578 @@ -956,6 +969,7 @@
   2.579  &lt;/myruby&gt;</pre>
   2.580  
   2.581  <p class="issue"><span class="issuehead">Issue:&nbsp;</span> The i18n WG has requested the addition of a sample user agent default style sheet, as promised by Ruby Annotation section 3.4. See <a href="http://www.w3.org/Search/Mail/Public/advanced_search?keywords=&amp;hdr-1-name=subject&amp;hdr-1-query=[CSS3+Ruby]%20Default+stylesheet&amp;hdr-2-name=from&amp;hdr-2-query=&amp;hdr-3-name=message-id&amp;hdr-3-query=&amp;index-grp=Member__FULL+Public__FULL&amp;index-type=t&amp;type-index=public-i18n-core%40w3.org&amp;resultsperpage=20&amp;sortby=date">this thread</a>.</p>
   2.582 +	-->
   2.583  
   2.584  <h2 id="profiles">
   2.585  Profiles</h2>

mercurial