8000 csswg-drafts/css3-ruby/Overview.html at 5b19add0b8359db2affafc6f66c3e1bed3703143 · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
executable file
·
1254 lines (1096 loc) · 63.5 KB

Overview.html

File metadata and controls

executable file
·
1254 lines (1096 loc) · 63.5 KB
<p>
<img
alt="Diagram of ruby glyph layout in vertical mode with ruby text apearing vertically on the left of the base"
class="example" src="images/shinkansen-left.gif" width="37" height="141" /></p>
<p><b>Figure 4.1.4</b>: Bottom ruby in vertical ideographic layout applied
to Japanese text</p>
</div>
</dd>
<dt><strong>inter-character</strong></dt>
<dd>
<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>
<p>The ruby text appears on the right of the base. Unlike 'before' and
'after', this value is visual and is not relative to the text flow direction.</p>
<p>This value is provided for the special case of traditional Chinese as used especially in
Taiwan: ruby (made of <a href="#g-bopomofo"><span
lang="zh">bopomofo</span></a> glyphs) in that context appears vertically along
the right side of the base glyph, whether the layout of the base characters is vertical or horizontal:</p>
<div class="figure">
<p><img alt="Example of Taiwanese-style ruby" class="example"
width="138" height="42" src="images/bopomofo.gif" /></p>
<p><b>Figure 4.1.5</b>: "<span lang="zh">Bopomofo</span>" ruby in
traditional Chinese (ruby text shown in blue for clarity) in horizontal
layout</p>
</div>
<p class="note"><span class="note-label">Note:</span> The bopomofo
transcription is written in the normal way as part of the ruby text.
The user agent is responsible for ensuring the correct relative alignment
and positioning of the glyphs, including those corresponding to the
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>
<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>
<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>
<!-- See Taiwanese requirements doc for EPUB at http://epub-revision.googlecode.com/files/EGLS_TW_eng.ppt -->
</dd>
<dt><strong>inline</strong></dt>
<dd>
<p>Ruby text follows the ruby base with no special styling. The value can be used to disable ruby text positioning.</p>
<p>If the author has used the XHTML <samp>rp</samp> element [<a href="#ruby">RUBY</a>] 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>
<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>
</dd>
</dl>
<p>If two rtc elements are set with the same ruby-position value, (for example
both &#39;before&#39;), the relative position of the two elements is undefined. This
setting should not be used.</p>
<h3>4<a id="rubyalign">.2 Ruby alignment: the 'ruby-align' property</a></h3>
<table class="propdef" cellspacing="0" cellpadding="0">
<tbody>
<tr align="left"><th>Name:</th><th id="ruby-align">ruby-align</th></tr>
<tr>
<td><em>Value:</em></td>
<td>auto | start | left | center | end | right | distribute-letter |
distribute-space | line-edge</td>
</tr>
<tr>
<td><em>Initial:</em></td>
<td>auto</td>
</tr>
<tr>
<td><em>Applies to:</em></td>
<td>all elements and generated content</td>
</tr>
<tr>
<td><em>Inherited:</em></td>
<td>yes</td>
</tr>
<tr>
<td><em>Percentages: </em></td>
<td>N/A</td>
</tr>
<tr>
<td><em>Media:</em></td>
<td>visual</td>
</tr>
<tr>
<td><em>Computed value: </em></td>
<td>specified value (except for initial and inherit)</td>
</tr>
</tbody>
</table>
<p>This property can be used on any element to control the text alignment of
the ruby text and ruby base contents relative to each other. It applies to all
the rubys in the element. For simple ruby, the alignment is applied to the
ruby child element whose content is shorter: either the <a
href="http://www.w3.org/TR/ruby/#rb"><samp>rb</samp></a> element or the <a
href="http://www.w3.org/TR/ruby/#rt"><samp>rt</samp></a> element [<a
href="#ruby">RUBY</a>]. For complex ruby, the alignment is also applied to the
ruby child elements whose content is shorter: either the <samp>rb</samp>
element and/or one or two <samp>rt</samp> elements for each related ruby text
and ruby base element within the <samp>rtc</samp> and <samp>rbc</samp>
element.</p>
<p>Possible values:</p>
<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>
<dl>
<dt><strong>auto</strong></dt>
<dd>The user agent determines how the ruby contents are aligned. This is
the initial value. The behavior recommended by [<a href="#jlreq">JLREQ</a>] is for wide-cell ruby to be aligned in the 'distribute-space' mode:
<div class="figure">
<p><img class="example" width="145" height="91"
alt="Diagram of glyph layout in auto aligned ruby when ruby text is shorter than base"
src="images/ra-ds.gif" /><img class="example" width="145" height="91"
alt="Diagram of glyph layout in auto aligned ruby when ruby text is longer than base"
src="images/ra-ds-rb.gif" /></p>
<p><b>Figure 4.2.1</b>: Wide-cell text in 'auto' ruby alignment is
'distribute-space' justified</p>
</div>
<p>The recommended behavior for narrow-cell glyph ruby is to be
aligned in the 'center' mode.</p>
<div class="figure">
<p><img
alt="Diagram of glyph layout in auto aligned ruby when halfwidth ruby text is shorter than base"
class="example" width="145" height="91"
src="images/ra-c-h.gif" /><img
alt="Diagram of character layout in auto aligned ruby when ruby text is longer than narrow-width base"
class="example" width="145" height="91"
src="images/ra-c-rb-h.gif" /></p>
<p><b>Figure 4.2.2</b>: Narrow-width ruby text in 'auto' ruby alignment
is centered</p>
</div>
</dd>
<dt><strong>left</strong></dt>
<dd>The ruby text content is aligned with the start edge of the base.
<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>
<div class="figure">
<p><img
alt="Diagram of glyph layout in left aligned ruby when ruby text is shorter than base"
class="example" width="145" height="91" src="images/ra-l.gif" /><img
class="example" width="145" height="91"
alt="Diagram of glyph layout in left aligned ruby when ruby text is longer than base"
src="images/ra-l-rb.gif" /></p>
<p><b>Figure 4.2.3</b>: Start ruby alignment</p>
</div>
</dd>
<dt><strong>center</strong></dt>
<dd>The ruby text content is centered within the width of the base. If the
length of the base is smaller than the length of the ruby text, then the
base is centered within the width of the ruby text.
<div class="figure">
<p><img class="example" width="145" height="91"
alt="Diagram of glyph layout in center aligned ruby when ruby text is shorter than base"
src="images/ra-c.gif" /><img class="example" width="145" height="91"
alt="Diagram of glyph layout in center aligned ruby when ruby text is longer than base"
src="images/ra-c-rb.gif" /></p>
<p><b>Figure 4.2.4</b>: Center ruby alignment</p>
</div>
</dd>
<dt><strong>right</strong></dt>
<dd>The ruby text content is aligned with the end edge of the base.
<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>
<div class="figure">
<p><img class="example" width="145" height="91"
alt="Diagram of glyph layout in right aligned ruby when ruby text is shorter than base"
src="images/ra-r.gif" /><img class="example" width="145" height="91"
alt="Diagram of glyph layout in right aligned ruby when ruby text is longer than base"
src="images/ra-r-rb.gif" /></p>
<p><b>Figure 4.2.5</b>: End ruby alignment</p>
</div>
</dd>
<dt><strong>distribute-letter</strong></dt>
<dd>If the width of the ruby text is smaller than that of the base, then
the ruby text contents are evenly distributed across the width of the
base, with the first and last ruby text glyphs lining up with the
corresponding first and last base glyphs. If the width of the ruby text
is at least the width of the base, then the letters of the base are
evenly distributed across the width of the ruby text.
<div class="figure">
<p><img class="example" width="145" height="91"
alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is shorter than base"
src="images/ra-dl.gif" /><img class="example" width="145" height="91"
alt="Diagram of glyph layout in distribute-letter aligned ruby when ruby text is longer than base"
src="images/ra-dl-rb.gif" /></p>
<p><b>Figure 4.2.6</b>: Distribute-letter ruby alignment</p>
</div>
</dd>
<dt><strong>distribute-space</strong></dt>
<dd>If the width of the ruby text is smaller than that of the base, then
the ruby text contents are evenly distributed across the width of the
base, with a certain amount of white space preceding the first and
following the last character in the ruby text. That amount of white
space is normally equal to half the amount of inter-character space of
the ruby text. If the width of the ruby text is at least the width of
the base, then the same type of space distribution applies to the base.
In other words, if the base is shorter than the ruby text, the base is
distribute-space aligned. This type of alignment
is described by [<a href="#jlreq">JLREQ</a>].
<div class="figure">
<p><img class="example" width="145" height="91"
alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is shorter than base"
src="images/ra-ds.gif" /><img class="example" width="145" height="91"
alt="Diagram of glyph layout in distribute-space aligned ruby when ruby text is longer than base"
src="images/ra-ds-rb.gif" /></p>
<p><b>Figure 4.2.7</b>: Distribute-space ruby alignment</p>
</div>
</dd>
<dt><strong>line-edge</strong></dt>
<dd>If the ruby text is not adjacent to a line edge, it is aligned as in
'auto'. If it is adjacent to a line edge, then it is still aligned as in
auto, but the side of the ruby text that touches the end of the line is
lined up with the corresponding edge of the base. This type of alignment
is described by [<a href="#jlreq">JLREQ</a>]. This type of alignment is
relevant only to the scenario where the ruby text is longer than the
ruby base. In the other scenarios, this is just 'auto'.
<div class="figure">
<p><img class="example" width="146" height="109"
alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is shorter than base"
src="images/ra-le-l.gif" /><img class="example" width="146"
height="110"
alt="Diagram of glyph layout in line-edge aligned ruby when ruby text is longer than base"
src="images/ra-le-r.gif" /></p>
<p><b>Figure 4.2.8</b>: Line edge ruby alignment</p>
</div>
</dd>
</dl>
<p>For a complex ruby with spanning elements, one additional consideration is
required. If the spanning element spans multiple 'rows' (other rbc or rtc
elements), and the ruby alignment requires space distribution among the
'spanned' elements, a ratio must be determined among the 'columns' of spanned
elements. This ratio is computed by taking into consideration the widest
element within each column.</p>
<p>In the context of this property, the 'left' and 'right' values are
synonymous with the 'start' and 'end' values respectively. I.e. their meaning
is relative according to the text layout flow. Most of the other CSS
properties interpret 'left' and 'right' on an 'absolute' term. See Appendix A
of the <a href="#CSS3TEXT">CSS3 Text Module</a> for further details.</p>
<h3>4<a id="rubyover">.3 Ruby overhanging: the 'ruby-overhang' property</a></h3>
<table class="propdef" cellspacing="0" cellpadding="0">
<tbody>
<tr align="left"><th>Name:</th><th id="ruby-overhang">ruby-overhang</th></tr>
<tr>
<td><em>Value:</em></td>
<td>auto | start | end | none</td>
</tr>
<tr>
<td><em>Initial:</em></td>
<td>none</td>
</tr>
<tr>
<td><em>Applies to:</em></td>
<td>the parent of elements with display: ruby-text</td>
</tr>
<tr>
<td><em>Inherited:</em></td>
<td>yes</td>
</tr>
<tr>
<td><em>Percentages: </em></td>
<td>N/A</td>
</tr>
<tr>
<td><em>Media:</em></td>
<td>visual</td>
</tr>
<tr>
<td><em>Computed value: </em></td>
<td>specified value (except for initial and inherit)</td>
</tr>
</tbody>
</table>
<p>This property determines whether, and on which side, ruby text is allowed
to partially overhang any adjacent text in addition to its own base, when the
ruby text is wider than the ruby base. Note that ruby text is never allowed to
overhang glyphs belonging to another ruby base. <span class="issue"><span class="issuehead">Issue:&nbsp;</span> This rule must be broken if we are to allow support for jukugo ruby.</span> Also the user agent is free to assume
a maximum amount by which ruby text may overhang adjacent text. The user agent may use
the [<a href="#jis4051">JIS4051</a>] recommendation of using one ruby text character
length as the maximum overhang length. Detailed rules for how ruby text can overhang adjacent characters for Japanese are described by [<a href="#jlreq">JLREQ</a>].</p>
<p>Possible values:</p>
<dl>
<dt><strong>auto</strong></dt>
<dd>The ruby text can overhang text adjacent to the base on either side. [<a href="#jlreq">JLREQ</a>] and [<a href="#jis4051">JIS4051</a>] specify the categories of characters that
ruby text can overhang. The user agent is free to follow those recommendations or specify its own classes of
characters to overhang. This is the initial value.
<div class="figure">
<p><img class="example" width="177" height="91"
alt="Diagram of glyph layout in overhanging ruby" src="images/ro-a.gif" /></p>
<p><b>Figure 4.3.1</b>: Ruby overhanging adjacent text</p>
</div>
</dd>
<dt><strong>start</strong></dt>
<dd>The ruby text can only overhang the text that precedes it. That means, for
example, that ruby cannot overhang text that is to the right of it in
horizontal LTR layout, and it cannot overhang text that is below it in
vertical-ideographic layout.
<div class="figure">
<p><img class="example" width="199" height="91"
alt="Diagram of glyph layout when ruby overhangs the preceding glyphs only"
src="images/ro-s.gif" /></p>
<p><b>Figure 4.3.2</b>: Ruby overhanging preceding text only</p>
</div>
</dd>
<dt><strong>end</strong></dt>
<dd>The ruby text can only overhang the text that follows it. That means, for
example, that ruby cannot overhang text that is to the left of it in
horizontal LTR layout, and it cannot overhang text that is above it in
vertical-ideographic layout.
<div class="figure">
<p><img class="example" width="198" height="91"
alt="Diagram of glyph layout when ruby overhangs the following characters only"
src="images/ro-e.gif" /></p>
<p><b>Figure 4.3.3</b>: Ruby overhanging following text only</p>
</div>
</dd>
<dt><strong>none</strong></dt>
<dd>The ruby text cannot overhang any text adjacent to its base, only its
own base.
<div class="figure">
<p><img class="example" width="220" height="91"
alt="Diagram of glyph layout in non-overhanging ruby"
src="images/ro-n.gif" /></p>
<p><b>Figure 4.3.4</b>: Ruby not allowed to overhang adjacent text</p>
</div>
</dd>
</dl>
<h3>4<a id="rubyspan">.4 Ruby annotation spanning: the 'ruby-span' property</a></h3>
<table class="propdef" cellspacing="0" cellpadding="0">
<tbody>
<tr align="left"><th>Name:</th><th id="ruby-span">ruby-span</th></tr>
<tr>
<td><em>Value:</em></td>
<td>attr(x) | none</td>
</tr>
<tr>
<td><em>Initial:</em></td>
<td>none</td>
</tr>
<tr>
<td><em>Applies to:</em></td>
<td>elements with display: ruby-text</td>
</tr>
<tr>
<td><em>Inherited:</em></td>
<td>no</td>
</tr>
<tr>
<td><em>Percentages: </em></td>
<td>N/A</td>
</tr>
<tr>
<td><em>Media:</em></td>
<td>visual</td>
</tr>
<tr>
<td><em>Computed value: </em></td>
<td>&lt;number&gt;</td>
</tr>
</tbody>
</table>
<p>This property controls the spanning behavior of annotation elements. </p>
<p class="note"><span class="note-label">Note:</span> A XHTML user agent may also use the <samp>rbspan</samp>
View remainder of file in raw view