css-ruby/Overview.src.html

changeset 8496
bce44a2a6438
parent 8493
7c1714a409cb
child 8497
0a74bdd0d743
     1.1 --- a/css-ruby/Overview.src.html	Tue Jun 18 15:44:16 2013 +0200
     1.2 +++ b/css-ruby/Overview.src.html	Tue Jun 18 22:44:44 2013 +0900
     1.3 @@ -481,132 +481,138 @@
     1.4  <h3 id="rubypos">
     1.5  Ruby positioning: the 'ruby-position' property</h3>
     1.6  
     1.7 -  <table class="propdef">
     1.8 -    <tr>
     1.9 -      <th>Name:
    1.10 -      <td><dfn>ruby-position</dfn>
    1.11 -          <tr>
    1.12 -            <th>Value:
    1.13 -            <td>before | after | inter-character | inline
    1.14 -          <tr>
    1.15 -            <th>Initial:
    1.16 -            <td>before
    1.17 -          <tr>
    1.18 -            <th>Applies to:
    1.19 -            <td>the parent of elements with display: ruby-text.
    1.20 -          <tr>
    1.21 -            <th>Inherited:
    1.22 -            <td>yes
    1.23 -          <tr>
    1.24 -            <th>Percentages:
    1.25 -            <td>N/A
    1.26 -          <tr>
    1.27 -            <th>Media:
    1.28 -            <td>visual
    1.29 -          <tr>
    1.30 -            <th>Computed value:
    1.31 -            <td>specified value (except for initial and inherit)
    1.32 -    <tr>
    1.33 -      <th>Animatable:
    1.34 -      <td>no
    1.35 -    <tr>
    1.36 -      <th>Canonical order:
    1.37 -      <td><abbr title="follows order of property value definition">per grammar</abbr>
    1.38 -  </table>
    1.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>
    1.40 -<p>This property is used by the parent of elements with display: ruby-text to
    1.41 -  control the position of the ruby text with respect to its base. Such parents
    1.42 -  are typically either the <samp>ruby</samp> element itself (simple ruby) or the
    1.43 -  <samp>rtc</samp> element (complex ruby). This assures that all parts of a <samp>rtc</samp> 
    1.44 -element will be displayed in the same position. Possible values:</p>
    1.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>
    1.46 -<dl>
    1.47 -	<dt><strong>before</strong></dt>
    1.48 -    <dd>The ruby text appears before the base. This is the most common setting
    1.49 -      used in ideographic East Asian writing systems. This is the initial
    1.50 -      value.
    1.51 +	<table class="propdef">
    1.52 +		<tr>
    1.53 +			<th>Name:
    1.54 +			<td><dfn>ruby-position</dfn>
    1.55 +		<tr>
    1.56 +			<th><a href="#values">Value</a>:
    1.57 +			<td>[ over | under | inter-character ] && [ right | left ]
    1.58 +		<tr>
    1.59 +			<th>Initial:
    1.60 +			<td>over right
    1.61 +		<tr>
    1.62 +			<th>Applies to:
    1.63 +			<td>the parent of elements with display: ruby-text.
    1.64 +		<tr>
    1.65 +			<th>Inherited:
    1.66 +			<td>yes
    1.67 +		<tr>
    1.68 +			<th>Percentages:
    1.69 +			<td>N/A
    1.70 +		<tr>
    1.71 +			<th>Media:
    1.72 +			<td>visual
    1.73 +		<tr>
    1.74 +			<th>Computed value:
    1.75 +			<td>specified value (except for initial and inherit)
    1.76 +		<tr>
    1.77 +			<th>Animatable:
    1.78 +			<td>no
    1.79 +		<tr>
    1.80 +			<th>Canonical order:
    1.81 +			<td><abbr title="follows order of property value definition">per grammar</abbr>
    1.82 +	</table>
    1.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>
    1.84 +	<p>This property is used by the parent of elements with display: ruby-text to
    1.85 +		control the position of the ruby text with respect to its base. Such parents
    1.86 +		are typically either the <samp>ruby</samp> element itself (simple ruby) or the
    1.87 +		<samp>rtc</samp> element (complex ruby). This assures that all parts of a <samp>rtc</samp> 
    1.88 +		element will be displayed in the same position. Possible values:</p>
    1.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>
    1.90 +	<dl>
    1.91 +		<dt><dfn title="ruby-position:over">''over''</dfn></dt>
    1.92 +		<dd>The ruby text appears over the base in horizontal text.
    1.93 +			This is the most common setting used in ideographic East Asian writing systems.
    1.94 +			This is the initial value.
    1.95  
    1.96 -      <div class="figure">
    1.97 -      <p>
    1.98 -      <img
    1.99 -      alt="Diagram of ruby glyph layout in horizontal mode with ruby text appearing above the base"
   1.100 -      class="example" src="images/shinkansen-top.gif" width="140" height="33" /></p>
   1.101 -      <p><b>Figure 4.1.1</b>: Top ruby in horizontal layout applied to
   1.102 -      Japanese text</p>
   1.103 -      </div>
   1.104 -      <p>If the base appears in a vertical-ideographic layout mode, the ruby
   1.105 -      appears on the right side of the base and is rendered in the same layout
   1.106 -      mode as the base (i.e. vertical-ideographic).</p>
   1.107 +			<div class="figure">
   1.108 +				<p>
   1.109 +				<img
   1.110 +					alt="Diagram of ruby glyph layout in horizontal mode with ruby text appearing above the base"
   1.111 +					src="images/shinkansen-top.gif" width="140" height="33" /></p>
   1.112 +				<p><b>Figure 4.1.1</b>: Top ruby in horizontal layout applied to
   1.113 +				Japanese text</p>
   1.114 +			</div>
   1.115 +		</dd>
   1.116  
   1.117 -      <div class="figure">
   1.118 -      <p>
   1.119 -      <img
   1.120 -      alt="Diagram of ruby glyph layout in vertical mode with ruby text apearing vertically on the right of the base"
   1.121 -      class="example" src="images/shinkansen-right.gif" width="33" height="141" /></p>
   1.122 -      <p><b>Figure 4.1.2</b>: Top ruby in vertical ideographic layout applied
   1.123 -      to Japanese text</p>
   1.124 -      </div>
   1.125 -</dd>
   1.126 -  <dt><strong>after</strong></dt>
   1.127 -    <dd>The ruby text appears after the base. This is a relatively rare
   1.128 -      setting used in ideographic East Asian writing systems, most easily
   1.129 -      found in educational text.
   1.130 +		<dt><dfn title="ruby-position:right">''right''</dfn></dt>
   1.131 +		<dd>The ruby text appears on the right side of the base in vertical text.
   1.132  
   1.133 -      <div class="figure">
   1.134 -      <p>
   1.135 -      <img
   1.136 -      alt="Diagram of ruby glyph layout in horizontal mode with ruby text appearing below the base"
   1.137 -      class="example" src="images/shinkansen-bottom.gif" width="142" height="36" /></p>
   1.138 -      <p><b>Figure 4.1.3</b>: Bottom ruby in horizontal layout applied to
   1.139 -      Japanese text</p>
   1.140 -      </div>
   1.141 -      <p>If the base appears in a vertical ideographic mode, the bottom ruby
   1.142 -      appears on the left side of the base and is rendered in the same layout
   1.143 -      mode as the base (i.e. vertical).</p>
   1.144 +			<div class="figure">
   1.145 +				<p>
   1.146 +				<img
   1.147 +					alt="Diagram of ruby glyph layout in vertical mode with ruby text apearing vertically on the right of the base"
   1.148 +					src="images/shinkansen-right.gif" width="33" height="141" /></p>
   1.149 +				<p><b>Figure 4.1.2</b>: Top ruby in vertical ideographic layout applied
   1.150 +				to Japanese text</p>
   1.151 +			</div>
   1.152 +		</dd>
   1.153  
   1.154 -      <div class="figure">
   1.155 -      <p>
   1.156 -      <img
   1.157 -      alt="Diagram of ruby glyph layout in vertical mode with ruby text apearing vertically on the left of the base"
   1.158 -      class="example" src="images/shinkansen-left.gif" width="37" height="141" /></p>
   1.159 -      <p><b>Figure 4.1.4</b>: Bottom ruby in vertical ideographic layout applied
   1.160 -      to Japanese text</p>
   1.161 -      </div>
   1.162 -    </dd>
   1.163 -  <dt><strong>inter-character</strong></dt>
   1.164 -    <dd>
   1.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>
   1.166 -	  <p>The ruby text appears on the right of the base. Unlike 'before' and
   1.167 -      'after', this value is visual and is not relative to the text flow direction.</p>
   1.168 +		<dt><dfn title="ruby-position:under">''under''</dfn></dt>
   1.169 +		<dd>The ruby text appears under the base in horizontal text.
   1.170 +			This is a relatively rare setting used in ideographic East Asian writing systems,
   1.171 +			most easily found in educational text.
   1.172  
   1.173 -      <p>This value is provided for the special case of traditional Chinese as used especially in
   1.174 -      Taiwan: ruby (made of <a href="#g-bopomofo"><span
   1.175 -      lang="zh">bopomofo</span></a> glyphs) in that context  appears vertically along
   1.176 -      the right side of the base glyph, whether the layout of the base characters is vertical or horizontal:</p>
   1.177 +			<div class="figure">
   1.178 +				<p>
   1.179 +				<img
   1.180 +					alt="Diagram of ruby glyph layout in horizontal mode with ruby text appearing below the base"
   1.181 +					src="images/shinkansen-bottom.gif" width="142" height="36" /></p>
   1.182 +				<p><b>Figure 4.1.3</b>: Bottom ruby in horizontal layout applied to Japanese text</p>
   1.183 +			</div>
   1.184 +		</dd>
   1.185  
   1.186 -      <div class="figure">
   1.187 -      <p><img alt="Example of Taiwanese-style ruby" class="example"
   1.188 -      width="138" height="42" src="images/bopomofo.gif" /></p>
   1.189 -      <p><b>Figure 4.1.5</b>: "<span lang="zh">Bopomofo</span>" ruby in
   1.190 -      traditional Chinese (ruby text shown in blue for clarity) in horizontal
   1.191 -      layout</p>
   1.192 -      </div>
   1.193 -      <p class="note"><span class="note-label">Note:</span> The bopomofo 
   1.194 -      transcription is written in the normal way as part of the ruby text. 
   1.195 -      The user agent is responsible for ensuring the correct relative alignment 
   1.196 -      and positioning of the glyphs, including those corresponding to the 
   1.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>
   1.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>
   1.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>
   1.200 -    <!-- See Taiwanese requirements doc for EPUB at http://epub-revision.googlecode.com/files/EGLS_TW_eng.ppt -->
   1.201 -    </dd>
   1.202 +		<dt><dfn title="ruby-position:left">''left''</dfn></dt>
   1.203 +		<dd>The ruby text appears on the left side of the base in vertical text.
   1.204 +
   1.205 +			<div class="figure">
   1.206 +				<p>
   1.207 +				<img
   1.208 +					alt="Diagram of ruby glyph layout in vertical mode with ruby text apearing vertically on the left of the base"
   1.209 +					src="images/shinkansen-left.gif" width="37" height="141" /></p>
   1.210 +				<p><b>Figure 4.1.4</b>: Bottom ruby in vertical ideographic layout applied to Japanese text</p>
   1.211 +			</div>
   1.212 +		</dd>
   1.213 +
   1.214 +		<dt><dfn title="ruby-position:inter-character">''inter-character''</dfn></dt>
   1.215 +		<dd>
   1.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>
   1.217 +			<p>The ruby text appears on the right of the base in horizontal text.
   1.218 +
   1.219 +			<p>This value is provided for the special case of traditional Chinese as used especially in
   1.220 +				Taiwan: ruby (made of <a href="#g-bopomofo"><span
   1.221 +				lang="zh">bopomofo</span></a> glyphs) in that context  appears vertically along
   1.222 +				the right side of the base glyph,
   1.223 +				even when the layout of the base characters is horizontal:</p>
   1.224 +
   1.225 +				<div class="figure">
   1.226 +					<p><img alt="Example of Taiwanese-style ruby"
   1.227 +						width="138" height="42" src="images/bopomofo.gif" /></p>
   1.228 +					<p><b>Figure 4.1.5</b>: "<span lang="zh">Bopomofo</span>" ruby in
   1.229 +						traditional Chinese (ruby text shown in blue for clarity) in horizontal
   1.230 +						layout</p>
   1.231 +				</div>
   1.232 +				<p class="note"><span class="note-label">Note:</span> The bopomofo 
   1.233 +				transcription is written in the normal way as part of the ruby text. 
   1.234 +				The user agent is responsible for ensuring the correct relative alignment 
   1.235 +				and positioning of the glyphs, including those corresponding to the 
   1.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>
   1.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>
   1.238 +			<p>It is not defined how a user-agent should handle ruby text that is not bopomofo
   1.239 +				when the value of ruby-position is set to 'inter-character'.</p>
   1.240 +			<!-- See Taiwanese requirements doc for EPUB at http://epub-revision.googlecode.com/files/EGLS_TW_eng.ppt -->
   1.241 +		</dd>
   1.242 +
   1.243 +		<!--
   1.244  <dt><strong>inline</strong></dt>
   1.245  <dd>
   1.246  <p>Ruby text follows the ruby base with no special styling.  The value can be used to disable  ruby text positioning.</p>
   1.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>
   1.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>
   1.249  </dd>
   1.250 -</dl>
   1.251 +		-->
   1.252 +	</dl>
   1.253  
   1.254  <p>If two rtc elements are set with the same ruby-position value, (for example 
   1.255  both &#39;before&#39;), the relative position of the two elements is undefined. This 
   1.256 @@ -615,105 +621,110 @@
   1.257  <h3 id="rubyalign">
   1.258  Ruby alignment: the 'ruby-align' property</h3>
   1.259  
   1.260 -  <table class="propdef">
   1.261 -    <tr>
   1.262 -      <th>Name:
   1.263 -      <td><dfn>ruby-align</dfn>
   1.264 -    <tr>
   1.265 -      <th>Value:
   1.266 -      <td>auto | start | left | center | end | right | distribute-letter |
   1.267 -      distribute-space | line-edge
   1.268 -    <tr>
   1.269 -      <th>Initial:
   1.270 -      <td>auto
   1.271 -    <tr>
   1.272 -      <th>Applies to:
   1.273 -      <td>all elements and generated content
   1.274 -    <tr>
   1.275 -      <th>Inherited:
   1.276 -      <td>yes
   1.277 -    <tr>
   1.278 -      <th>Percentages:
   1.279 -      <td>N/A
   1.280 -    <tr>
   1.281 -      <th>Media:
   1.282 -      <td>visual
   1.283 -    <tr>
   1.284 -      <th>Computed value:
   1.285 -      <td>specified value (except for initial and inherit)
   1.286 -  </table>
   1.287 +	<table class="propdef">
   1.288 +		<tr>
   1.289 +			<th>Name:
   1.290 +			<td><dfn>ruby-align</dfn>
   1.291 +		<tr>
   1.292 +			<th><a href="#values">Value</a>:
   1.293 +			<td>auto | start | center |
   1.294 +				distribute-letter | distribute-space
   1.295 +		<tr>
   1.296 +			<th>Initial:
   1.297 +			<td>auto
   1.298 +		<tr>
   1.299 +			<th>Applies to:
   1.300 +			<td>all elements and generated content
   1.301 +		<tr>
   1.302 +			<th>Inherited:
   1.303 +			<td>yes
   1.304 +		<tr>
   1.305 +			<th>Percentages:
   1.306 +			<td>N/A
   1.307 +		<tr>
   1.308 +			<th>Media:
   1.309 +			<td>visual
   1.310 +		<tr>
   1.311 +			<th>Computed value:
   1.312 +			<td>specified value (except for initial and inherit)
   1.313 +	</table>
   1.314  
   1.315 -<p>This property can be used on any element to control the text alignment of
   1.316 -the ruby text and ruby base contents relative to each other. It applies to all
   1.317 -the rubys in the element. For simple ruby, the alignment is applied to the
   1.318 -ruby child element whose content is shorter: either the <a
   1.319 -href="http://www.w3.org/TR/ruby/#rb"><samp>rb</samp></a>   element or the <a
   1.320 -href="http://www.w3.org/TR/ruby/#rt"><samp>rt</samp></a> element [[RUBY]].
   1.321 -For complex ruby, the alignment is also applied to the
   1.322 -ruby child elements whose content is shorter: either the <samp>rb</samp>
   1.323 -element and/or one or two <samp>rt</samp> elements for each related ruby text
   1.324 -and ruby base element within the <samp>rtc</samp> and <samp>rbc</samp>
   1.325 -element.</p>
   1.326 +	<p>This property can be used on any element to control the text alignment of
   1.327 +		the ruby text and ruby base contents relative to each other. It applies to all
   1.328 +		the rubys in the element. For simple ruby, the alignment is applied to the
   1.329 +		ruby child element whose content is shorter: either the <a
   1.330 +		href="http://www.w3.org/TR/ruby/#rb"><samp>rb</samp></a>   element or the <a
   1.331 +		href="http://www.w3.org/TR/ruby/#rt"><samp>rt</samp></a> element [[RUBY]].
   1.332 +		For complex ruby, the alignment is also applied to the
   1.333 +		ruby child elements whose content is shorter: either the <samp>rb</samp>
   1.334 +		element and/or one or two <samp>rt</samp> elements for each related ruby text
   1.335 +		and ruby base element within the <samp>rtc</samp> and <samp>rbc</samp>
   1.336 +		element.</p>
   1.337  
   1.338 -<p>Possible values:</p>
   1.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>
   1.340 -<dl>
   1.341 -	<dt><strong>auto</strong></dt>
   1.342 -    <dd>The user agent determines how the ruby contents are aligned. This is
   1.343 -      the initial value. The behavior recommended by [[JLREQ]] is for  wide-cell ruby  to be aligned in the 'distribute-space' mode:
   1.344 -<div class="figure">
   1.345 -      <p><img class="example" width="145" height="91"
   1.346 -      alt="Diagram of glyph layout in auto aligned ruby when ruby text is shorter than base"
   1.347 -      src="images/ra-ds.gif" /><img class="example" width="145" height="91"
   1.348 -      alt="Diagram of glyph layout in auto aligned ruby when ruby text is longer than base"
   1.349 -      src="images/ra-ds-rb.gif" /></p>
   1.350 -      <p><b>Figure 4.2.1</b>: Wide-cell text in 'auto' ruby alignment is
   1.351 -      'distribute-space' justified</p>
   1.352 -      </div>
   1.353 -      <p>The recommended behavior for  narrow-cell glyph ruby is to be
   1.354 -      aligned in the 'center' mode.</p>
   1.355 +	<p>Possible values:</p>
   1.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>
   1.357 +	<dl>
   1.358 +		<dt><dfn title="ruby-align:auto">''auto''</dfn></dt>
   1.359 +		<dd>
   1.360 +			<p>The user agent determines how the ruby contents are aligned.
   1.361 +				This is the initial value.
   1.362 +				The behavior recommended by [[JLREQ]] is for  wide-cell ruby  to be aligned in the 'distribute-space' mode:
   1.363 +				<div class="figure">
   1.364 +					<p><img width="145" height="91"
   1.365 +					alt="Diagram of glyph layout in auto aligned ruby when ruby text is shorter than base"
   1.366 +					src="images/ra-ds.gif" /><img width="145" height="91"
   1.367 +					alt="Diagram of glyph layout in auto aligned ruby when ruby text is longer than base"
   1.368 +					src="images/ra-ds-rb.gif" /></p>
   1.369 +					<p><b>Figure 4.2.1</b>: Wide-cell text in 'auto' ruby alignment is
   1.370 +					'distribute-space' justified</p>
   1.371 +				</div>
   1.372  
   1.373 -      <div class="figure">
   1.374 -      <p><img
   1.375 -      alt="Diagram of glyph layout in auto aligned ruby when halfwidth ruby text is shorter than base"
   1.376 -      class="example" width="145" height="91"
   1.377 -      src="images/ra-c-h.gif" /><img
   1.378 -      alt="Diagram of character layout in auto aligned ruby when ruby text is longer than narrow-width base"
   1.379 -      class="example" width="145" height="91"
   1.380 -      src="images/ra-c-rb-h.gif" /></p>
   1.381 -      <p><b>Figure 4.2.2</b>: Narrow-width ruby text in 'auto' ruby alignment
   1.382 -      is centered</p>
   1.383 -      </div>
   1.384 -    </dd>
   1.385 -  <dt><strong>left</strong></dt>
   1.386 -    <dd>The ruby text content is aligned with the start edge of the base.
   1.387 -	
   1.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>
   1.389 +			<p>The recommended behavior for  narrow-cell glyph ruby is to be
   1.390 +				aligned in the 'center' mode.</p>
   1.391 +				<div class="figure">
   1.392 +					<p><img
   1.393 +					alt="Diagram of glyph layout in auto aligned ruby when halfwidth ruby text is shorter than base"
   1.394 +					width="145" height="91"
   1.395 +					src="images/ra-c-h.gif" /><img
   1.396 +					alt="Diagram of character layout in auto aligned ruby when ruby text is longer than narrow-width base"
   1.397 +					width="145" height="91"
   1.398 +					src="images/ra-c-rb-h.gif" /></p>
   1.399 +					<p><b>Figure 4.2.2</b>: Narrow-width ruby text in 'auto' ruby alignment
   1.400 +					is centered</p>
   1.401 +				</div>
   1.402 +		</dd>
   1.403  
   1.404 -      <div class="figure">
   1.405 -      <p><img
   1.406 -      alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base"
   1.407 -      class="example" width="145" height="91" src="images/ra-l.gif" /><img
   1.408 -      class="example" width="145" height="91"
   1.409 -      alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base"
   1.410 -      src="images/ra-l-rb.gif" /></p>
   1.411 -      <p><b>Figure 4.2.3</b>: Start ruby alignment</p>
   1.412 -      </div>
   1.413 -    </dd>
   1.414 -  <dt><strong>center</strong></dt>
   1.415 -    <dd>The ruby text content is centered within the width of the base. If the
   1.416 -      length of the base is smaller than the length of the ruby text, then the
   1.417 -      base is centered within the width of the ruby text.
   1.418 +		<dt><dfn title="ruby-align:start">''start''</dfn></dt>
   1.419 +		<dd>The ruby text content is aligned with the start edge of the base.
   1.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>
   1.421  
   1.422 -      <div class="figure">
   1.423 -      <p><img class="example" width="145" height="91"
   1.424 -      alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base"
   1.425 -      src="images/ra-c.gif" /><img class="example" width="145" height="91"
   1.426 -      alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base"
   1.427 -      src="images/ra-c-rb.gif" /></p>
   1.428 -      <p><b>Figure 4.2.4</b>: Center ruby alignment</p>
   1.429 -      </div>
   1.430 -    </dd>
   1.431 +			<div class="figure">
   1.432 +				<p><img
   1.433 +					alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base"
   1.434 +					width="145" height="91" src="images/ra-l.gif" /><img
   1.435 +					width="145" height="91"
   1.436 +					alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base"
   1.437 +					src="images/ra-l-rb.gif" /></p>
   1.438 +				<p><b>Figure 4.2.3</b>: Start ruby alignment</p>
   1.439 +			</div>
   1.440 +		</dd>
   1.441 +
   1.442 +		<dt><dfn title="ruby-align:center">''center''</dfn></dt>
   1.443 +		<dd>The ruby text content is centered within the width of the base. If the
   1.444 +			length of the base is smaller than the length of the ruby text, then the
   1.445 +			base is centered within the width of the ruby text.
   1.446 +
   1.447 +			<div class="figure">
   1.448 +				<p><img width="145" height="91"
   1.449 +					alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base"
   1.450 +					src="images/ra-c.gif" /><img width="145" height="91"
   1.451 +					alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base"
   1.452 +					src="images/ra-c-rb.gif" /></p>
   1.453 +				<p><b>Figure 4.2.4</b>: Center ruby alignment</p>
   1.454 +			</div>
   1.455 +		</dd>
   1.456 +
   1.457 +		<!--
   1.458    <dt><strong>right</strong></dt>
   1.459      <dd>The ruby text content is aligned with the end edge of the base.
   1.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>
   1.461 @@ -726,43 +737,49 @@
   1.462  	<p><b>Figure 4.2.5</b>: End ruby alignment</p>
   1.463  </div>
   1.464      </dd>
   1.465 -  <dt><strong>distribute-letter</strong></dt>
   1.466 -    <dd>If the width of the ruby text is smaller than that of the base, then
   1.467 -      the ruby text contents are evenly distributed across the width of the
   1.468 -      base, with the first and last ruby text glyphs lining up with the
   1.469 -      corresponding first and last base glyphs. If the width of the ruby text
   1.470 -      is at least the width of the base, then the letters of the base are
   1.471 -      evenly distributed across the width of the ruby text.
   1.472 +		-->
   1.473  
   1.474 -      <div class="figure">
   1.475 -      <p><img class="example" width="145" height="91"
   1.476 -      alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base"
   1.477 -      src="images/ra-dl.gif" /><img class="example" width="145" height="91"
   1.478 -      alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base"
   1.479 -      src="images/ra-dl-rb.gif" /></p>
   1.480 -      <p><b>Figure 4.2.6</b>: Distribute-letter ruby alignment</p>
   1.481 -      </div>
   1.482 -    </dd>
   1.483 -  <dt><strong>distribute-space</strong></dt>
   1.484 -    <dd>If the width of the ruby text is smaller than that of the base, then
   1.485 -      the ruby text contents are evenly distributed across the width of the
   1.486 -      base, with a certain amount of white space preceding the first and
   1.487 -      following the last character in the ruby text. That amount of white
   1.488 -      space is normally equal to half the amount of inter-character space of
   1.489 -      the ruby text. If the width of the ruby text is at least the width of
   1.490 -      the base, then the same type of space distribution applies to the base.
   1.491 -      In other words, if the base is shorter than the ruby text, the base is
   1.492 -      distribute-space aligned. This type of alignment
   1.493 -      is described by [[JLREQ]].
   1.494 -		<div class="figure">
   1.495 -      <p><img class="example" width="145" height="91"
   1.496 -      alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is shorter than base"
   1.497 -      src="images/ra-ds.gif" /><img class="example" width="145" height="91"
   1.498 -      alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is longer than base"
   1.499 -      src="images/ra-ds-rb.gif" /></p>
   1.500 -      <p><b>Figure 4.2.7</b>: Distribute-space ruby alignment</p>
   1.501 -      </div>
   1.502 -    </dd>
   1.503 +		<dt><dfn title="ruby-align:distribute-letter">''distribute-letter''</dfn></dt>
   1.504 +		<dd>If the width of the ruby text is smaller than that of the base, then
   1.505 +			the ruby text contents are evenly distributed across the width of the
   1.506 +			base, with the first and last ruby text glyphs lining up with the
   1.507 +			corresponding first and last base glyphs. If the width of the ruby text
   1.508 +			is at least the width of the base, then the letters of the base are
   1.509 +			evenly distributed across the width of the ruby text.
   1.510 +
   1.511 +			<div class="figure">
   1.512 +				<p><img width="145" height="91"
   1.513 +				alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base"
   1.514 +				src="images/ra-dl.gif" /><img width="145" height="91"
   1.515 +				alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base"
   1.516 +				src="images/ra-dl-rb.gif" /></p>
   1.517 +				<p><b>Figure 4.2.6</b>: Distribute-letter ruby alignment</p>
   1.518 +			</div>
   1.519 +		</dd>
   1.520 +
   1.521 +		<dt><dfn title="ruby-align:distribute-space">''distribute-space''</dfn></dt>
   1.522 +		<dd>If the width of the ruby text is smaller than that of the base, then
   1.523 +			the ruby text contents are evenly distributed across the width of the
   1.524 +			base, with a certain amount of white space preceding the first and
   1.525 +			following the last character in the ruby text. That amount of white
   1.526 +			space is normally equal to half the amount of inter-character space of
   1.527 +			the ruby text. If the width of the ruby text is at least the width of
   1.528 +			the base, then the same type of space distribution applies to the base.
   1.529 +			In other words, if the base is shorter than the ruby text, the base is
   1.530 +			distribute-space aligned. This type of alignment
   1.531 +			is described by [[JLREQ]].
   1.532 +
   1.533 +			<div class="figure">
   1.534 +				<p><img width="145" height="91"
   1.535 +					alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is shorter than base"
   1.536 +					src="images/ra-ds.gif" /><img width="145" height="91"
   1.537 +					alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is longer than base"
   1.538 +					src="images/ra-ds-rb.gif" /></p>
   1.539 +				<p><b>Figure 4.2.7</b>: Distribute-space ruby alignment</p>
   1.540 +			</div>
   1.541 +		</dd>
   1.542 +
   1.543 +		<!--
   1.544    <dt><strong>line-edge</strong></dt>
   1.545      <dd>If the ruby text is not adjacent to a line edge, it is aligned as in
   1.546        'auto'. If it is adjacent to a line edge, then it is still aligned as in
   1.547 @@ -781,21 +798,17 @@
   1.548        <p><b>Figure 4.2.8</b>: Line edge ruby alignment</p>
   1.549        </div>
   1.550      </dd>
   1.551 -</dl>
   1.552 +		-->
   1.553 +	</dl>
   1.554  
   1.555 -<p>For a complex ruby with spanning elements, one additional consideration is
   1.556 -required. If the spanning element spans multiple 'rows' (other rbc or rtc
   1.557 -elements), and the ruby alignment requires space distribution among the
   1.558 -'spanned' elements, a ratio must be determined among the 'columns' of spanned
   1.559 -elements. This ratio is computed by taking into consideration the widest
   1.560 -element within each column.</p>
   1.561 +	<p>For a complex ruby with spanning elements, one additional consideration is
   1.562 +		required. If the spanning element spans multiple 'rows' (other rbc or rtc
   1.563 +		elements), and the ruby alignment requires space distribution among the
   1.564 +		'spanned' elements, a ratio must be determined among the 'columns' of spanned
   1.565 +		elements. This ratio is computed by taking into consideration the widest
   1.566 +		element within each column.</p>
   1.567  
   1.568 -<p>In the context of this property, the 'left' and 'right' values are
   1.569 -synonymous with the 'start' and 'end' values respectively. I.e. their meaning
   1.570 -is relative according to the text layout flow. Most of the other CSS
   1.571 -properties interpret 'left' and 'right' on an 'absolute' term. See Appendix A
   1.572 -of the <a href="#CSS3TEXT">CSS3 Text Module</a> for further details.</p>
   1.573 -
   1.574 +	<!--
   1.575  <h3 id="rubyover">
   1.576  Ruby overhanging: the 'ruby-overhang' property</h3>
   1.577  
   1.578 @@ -956,6 +969,7 @@
   1.579  &lt;/myruby&gt;</pre>
   1.580  
   1.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>
   1.582 +	-->
   1.583  
   1.584  <h2 id="profiles">
   1.585  Profiles</h2>

mercurial