From d13f0a01b30b50b3f03cfd4e8d167425d581945d Mon Sep 17 00:00:00 2001
From: Florian Rivoal The Urme`2d
z64`FrG1alQ
2&t>!F&f@$_zR4qqVJ?C$fG@is+A)`8=)BJCpJ8Hz5YzwT{JC0#9jHSgNE
zPdey$Xz^=3l-nF3oijh8JW`KUE3M+K5m_l$ob6IpmY24wuevywuiG8VEvr2%O
R0~r{>uN5U-|!toc~Ce
zAj}jN1}lJdz}~@`;QH`bcny3W!HIB26d_(B2}oaLJ@Pxs1XYash}K7!qPHpRDViyn
zDUVPtV9YUXR6
ruby
element allows one or more spans of phrasing content to be marked with
ruby annotations. Ruby annotations are short runs of text presented alongside base text, primarily
used in East Asian typography as a guide for pronunciation or to include other annotations. In
- Japanese, this form of typography is also known as furigana.
The content model of ruby
elements consists of one or more of the following
sequences:
ruby
elements and with no ruby
element descendants
- ruby
element that itself has no ruby
element descendants
- rt
elements
- rp
element followed by one or more rt
elements, each of which is itself followed by an rp
element
- rb
elements.rt
or rtc
elements, each of which either immediately
+ preceded or followed by an rp
elements.The ruby
and rt
elements can be used for a variety of kinds of
- annotations, including in particular (though by no means limited to) those described below. For
- more details on Japanese Ruby in particular, and how to render Ruby for Japanese, see
- Requirements for Japanese Text Layout.
The ruby
, rb
, rtc
and rt
elements can be
+ used for a variety of kinds of annotations, including in particular (though by no means limited
+ to) those described below. For more details on Japanese Ruby in particular, and how to render Ruby
+ for Japanese, see Requirements for Japanese Text Layout.
At the time of writing, CSS does not yet provide a way to fully control the
- rendering of the HTML ruby
element. It is hoped that CSS will be extended to support
- the styles described below in due course.
The CSS Ruby Module Level 1 enables authors to control the rendering of the
+ HTML ruby
element, supporting a variety of renderings based on the same markup.
One or more hiragana or katakana characters (the ruby annotation) are placed with each - ideographic character (the base text). This is used to provide readings of kanji characters. +
Annotations (the ruby text) are associated individually with each ideographic character (the + base text). In Japanese this is typically hiragana or katakana characters used to provide + readings of kanji characters.
-<ruby>B<rt>annotation</ruby>
+ <ruby>base<rt>annotation</ruby>
When no rb
element is used, the base is implied, as above. But you can also
+ make it explicit. This can be useful notably for styling, or when consecutive bases are to be
+ treated as a group, as in the jukugo ruby example further down.
In this example, notice how each annotation corresponds to a single base character. -
<ruby>君<rt>くん</ruby><ruby>子<rt>し</ruby>は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。
- 君子は和して同ぜず。 -
This example can also be written as follows, using one ruby
element with two
- segments of base text and two annotations (one for each) rather than two back-to-back
- ruby
elements each with one base text segment and annotation (as in the markup
- above):
-
<ruby>君<rt>くん</rt>子<rt>し</ruby>は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。
+ <ruby><rb>base<rt>annotation</ruby>
In the following example, notice how each annotation corresponds to a single base + character.
-<ruby>日<rt>に</rt></ruby><ruby>本<rt>ほん</rt></ruby>
+<ruby>語<rt>ご</rt></ruby>で<ruby>書<rt>か</rt></ruby>
+いた<ruby>作<rt>さく</rt></ruby><ruby>文<rt>ぶん</rt></ruby>です。
+ This is similar to the previous case: each ideographic character in the compound word (the - base text) has its reading given in hiragana or katakana characters (the ruby annotation). The - difference is that the base text segments form a compound word rather than being separate from - each other. +
Ruby text interspersed in regular text provides structure akin to the following image:
-<ruby>B<rt>annotation</rt>B<rt>annotation</ruby>
- In this example, notice again how each annotation corresponds to a single base character. In this example, each compound word (jukugo) corresponds to a single ruby
element.
The rendering here is expected to be that each annotation be placed over (or next to, in vertical text) the corresponding base character, with the annotations not overhanging any of the adjacent characters.
-<ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する
- 鬼門の方角を凝視する +
This example can also be written as follows, using one ruby
element with two
+ segments of base text and two annotations (one for each) rather than two back-to-back
+ ruby
elements each with one base text segment and annotation (as in the markup
+ above):
<ruby>日<rt>に</rt>本<rt>ほん</rt>語<rt>ご</rt></ruby>
+で<ruby>書<rt>か</rt></ruby>
+いた<ruby>作<rt>さく</rt>文<rt>ぶん</rt></ruby>です。
This is semantically identical to the previous case (each individual ideographic character in - the base compound word has its reading given in an annotation in hiragana or katakana - characters), but the rendering is the more complicated Jukugo Ruby rendering. +
Group ruby is often used where phonetic annotations don't map to discreet base characters, + or for semantic glosses that span the whole base text. For example, the word "today" is written + with the characters 今日, literally "this day". But it's pronounced きょう (kyou), which can't + be broken down into a "this" part and a "day" part. In typical rendering, you can't split text + that is annotated with group ruby; it has to wrap as a single unit onto the next line. When a + ruby text annotation maps to a base that is comprised of more than one character, + then that base is grouped.
+ +The following group ruby:
+ + + +Can be marked up as follows:
This is the same example as above for mono-ruby for compound words. The different rendering is expected to be achieved using different styling (e.g. in CSS), and is not shown here.
-<ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する
-
-
+ <ruby>今日<rt>きょう</ruby>
For more details on Jukugo Ruby rendering, see - Appendix F in the Requirements for Japanese Text Layout.
The annotation describes the meaning of the base text, rather than (or in addition to) the pronunciation. As such, both the base text and the annotation can be multiple characters long. -
<ruby>BASE<rt>annotation</ruby>
Here a compound ideographic word has its corresponding katakana given as an annotation.
<ruby>境界面<rt>インターフェース</ruby>
@@ -20811,278 +20805,444 @@ this specification: the <abbr>WHATWG</abbr> and the
A phonetic reading that corresponds to multiple base characters, because a one-to-one mapping - would be difficult. (In English, the words "Colonel" and "Lieutenant" are examples of words - where a direct mapping of pronunciation to individual letters is, in some dialects, rather - unclear.) +
Jukugo refers to a Japanese compound noun, i.e. a word made up of more than one + kanji character. Jukugo ruby is a term that is used not to describe ruby annotations + over jukugo text, but rather to describe ruby with a behavior slightly different from mono or + group ruby. Jukugo ruby is similar to mono ruby, in that there is a strong association + between ruby text and individual base characters, but the ruby text is typically rendered as + grouped together over multiple ideographs when they are on the same line.
+ +The distinction is captured in this example:
+ + + +Which can be marked up as follows:
In this example, the name of a species of flowers has a phonetic reading provided using group ruby: -
<ruby>紫陽花<rt>あじさい</ruby>
- 紫陽花 +
<ruby>法<rb>華<rb>経<rt>ほ<rt>け<rt>きょう</ruby>
In this example, each rt
element is paired with its respective rb
+ element, the difference with an interleaved rb
/rt
approach being
+ that the sequences of both base text and ruby annotations are implicitly placed in common
+ containers so that the grouping information is captured.
For more details on Jukugo Ruby rendering, see + Appendix F in the Requirements for Japanese Text Layout and Use Case C: Jukugo + ruby in the Use Cases & Exploratory Approaches for Ruby Markup. +
+ + +Sometimes, ruby styles described above are combined. +
In some contexts, for instance when the font size or line height are too small for ruby + to be readable, it is desirable to inline the ruby annotation such that it appears in + parentheses after the text it annotates. This also provides a convenient fallback strategy + for user agents that do not support rendering ruby annotations.
-If this results in two annotations covering the same single base segment, then the - annotations can just be placed back to back. +
Inlining takes grouping into account. For example, Tokyo is written with two kanji + characters, 東, which is pronounced とう, and 京, which is pronounced きょう. Each base + character should be annotated individually, but the fallback should be 東京(とうきょう) not + 東(とう)京(きょう). This can be marked up as follows:
<ruby>BASE<rt>annotation 1<rt>annotation 2</ruby>
+ <ruby>東<rb>京<rt>とう<rt>きょう</ruby>
Note that the above markup will enable the usage of parentheses when inlining for
+ browsers that support ruby layout, but for those that don't it will fail to provide
+ parenthetical fallback. This is where the rp
element is useful. It can be inserted
+ into the above example to provide the appropriate fallback when ruby layout is not
+ supported:
<ruby>B<rt>a<rt>a</ruby><ruby>A<rt>a<rt>a</ruby><ruby>S<rt>a<rt>a</ruby><ruby>E<rt>a<rt>a</ruby>
+ <ruby>東<rb>京<rp>(<rt>とう<rt>きょう<rp>)</ruby>
In this contrived example, some symbols are given names in English and French. +
Sometimes, ruby can be used to annotate a base twice.
-<ruby>
- ♥ <rt> Heart <rt lang=fr> Cœur </rt>
- ☘ <rt> Shamrock <rt lang=fr> Trèfle </rt>
- ✶ <rt> Star <rt lang=fr> Étoile </rt>
-</ruby>
+ In the following example, the Chinese word for San Francisco (旧金山, i.e. “old gold + mountain”) is annotated both using pinyin to give the pronunciation, and with the original + English.
-In more complication situations such as following examples, a nested ruby
- element is used to give the inner annotations, and then that whole ruby
is then
- given an annotation at the "outer" level.
+
Which is marked up as follows:
<ruby><ruby>B<rt>a</rt>A<rt>n</rt>S<rt>t</rt>E<rt>n</rt></ruby><rt>annotation</ruby>
+ <ruby><rb>旧<rb>金<rb>山<rt>jiù<rt>jīn<rt>shān<rtc>San Francisco</ruby>
In this example, a single base run of three base characters is annotated with three pinyin
+ ruby text segments in a first (implicit) container, and an rtc
element is
+ introduced in order to provide a second single ruby text annotation being the
+ city's English name.
We can also revisit our jukugo example above with 上手 ("skill") to show how it can be + annotation in both kana and romaji phonetics while at the same time maintaining the pairing to + bases and annotation grouping information.
+ + + +Which is marked up as follows:
+Here both a phonetic reading and the meaning are given in ruby annotations. The annotation on the nested ruby
element gives a mono-ruby phonetic annotation for each base character, while the annotation in the rt
element that is a child of the outer ruby
element gives the meaning using hiragana.
-
<ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt>たつみ</rt></ruby>の方角
- 東南の方角 +
<ruby><rb>上<rb>手<rt>じよう<rt>ず<rtc><rt>jou<rt>zu</ruby>
This is the same example, but the meaning is given in English instead of Japanese: -
<ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt lang=en>Southeast</rt></ruby>の方角
- 東南の方角 +
Text that is a direct child of the rtc
element implicitly produces a ruby
+ text segment as if it were contained in an rt
element. In this contrived example,
+ this is shown with some symbols that are given names in English and French with annotations
+ intended to appear on either side of the base symbol.
<ruby>
+ ♥<rt>Heart<rtc lang=fr>Cœur</rtc>
+ ☘<rt>Shamrock<rtc lang=fr>Trèfle</rtc>
+ ✶<rt>Star<rtc lang=fr>Étoile
+</ruby>
+ Similarly, text directly inside a ruby
element implicitly produces a ruby base
+ as if it were contained in an rb
element, and rt
children of
+ ruby
are implicitly contained in an rtc
container. In effect, the
+ effect, the above example is equivalent (in meaning, though not in the DOM it produces) to the
+ following:
<ruby>
+ <rb>♥</rb><rtc><rt>Heart</rt></rtc><rtc lang=fr><rt>Cœur</rt></rtc>
+ <rb>☘</rb><rtc><rt>Shamrock</rt></rtc><rtc lang=fr><rt>Trèfle</rt></rtc>
+ <rb>✶</rb><rtc><rt>Star</rt></rtc><rtc lang=fr><rt>Étoile</rt></rtc>
+</ruby>
Within a ruby
element that does not have a ruby
element ancestor,
- content is segmented and segments are placed into three categories: base text segments, annotation
- segments, and ignored segments. Ignored segments do not form part of the document's semantics
- (they consist of some inter-element whitespace and rp
elements, the
- latter of which are used for legacy user agents that do not support ruby at all). Base text
- segments can overlap (with a limit of two segments overlapping any one position in the DOM, and
- with any segment having an earlier start point than an overlapping segment also having an equal or
- later end point, and any segment have a later end point than an overlapping segment also having an
- equal or earlier start point). Annotation segments correspond to rt
elements. Each annotation
- segment can be associated with a base text segment, and each base text segment can have annotation
- segments associated with it. (In a conforming document, each base text segment is associated with
- at least one annotation segment, and each annotation segment is associated with one base text
- segment.) A ruby
element represents the union of the segments of base
- text it contains, along with the mapping from those base text segments to annotation segments.
- Segments are described in terms of DOM ranges; annotation segment ranges always
- consist of exactly one element.
Within a ruby element, content is parcelled into a series of ruby segments. Each ruby + segment is described by:
-Zero or more ruby bases, each of which is a DOM range that
+ may contain phrasing content or an rb
element.
At any particular time, the segmentation and categorization of content of a ruby
- element is the result that would be obtained from running the following algorithm:
A base range, that is a DOM range including all the bases. This is the ruby base + container.
Let base text segments be an empty list of base text segments, each - potentially with a list of base text subsegments.
Zero or more ruby text containers which may
+ correspond to explicit rtc
elements, or to sequences of rt
elements
+ implicitly recognized as contained in an anonymous ruby text container.
Each ruby text container is described by zero or more ruby text annotations each of which is a DOM range that may contain phrasing
+ content or an rt
element, and an annotations range that is a range including all
+ the annotations for that container. A ruby text container is also known (primarily
+ in a CSS context) as a ruby annotation container.
Furthermore, a ruby element contains ignored ruby content. Ignored ruby content
+ does not form part of the document's semantics. It consists of some inter-element
+ whitespace and rp
elements, the latter of which are used for legacy user
+ agents that do not support ruby at all.
The process of annotation pairing associates ruby annotations with ruby bases. Within each + ruby segment, each ruby base in the ruby base container + is paired with one ruby text annotation from the ruby text container, + in order. If there are not enough ruby text + annotations in a ruby annotation container, the last one is associated with + any excess ruby bases. (If there are not any in the ruby + annotation container, an anonymous empty one is assumed to exist.) If there are not + enough ruby bases, any remaining ruby text annotations are assumed to be associated with empty, anonymous bases + inserted at the end of the ruby base container.
+ +Note that the terms ruby segment, ruby base, ruby text + annotation, ruby text container, ruby base container, and + ruby annotation container have their equivalents in CSS Ruby Module Level + 1.
+ +Informally, the segmentation and categorization algorithm below performs
+ Segmentation and categorization consists of a simple set of tasks.
+ First it processes adjacent rb
elements, text nodes, and non-ruby elements
+ into a list of bases. Then it processes any number of rtc
elements or sequences
+ of rt
elements that are considered to automatically map to an anonymous ruby
+ text container. Put together these data items form a ruby segment as
+ detailed in the data model above. It will continue to produce such segments until it reaches
+ the end of the content of a given ruby
element. The complexity of the
+ algorithm below compared to this informal description stems from the need to support
+ an author-friendly syntax and being mindful of inter-element white space.
At any particular time, the segmentation and categorization of content of a
+ ruby
element is the result that would be obtained from
+ running the following algorithm:
Let annotation segments be an empty list of annotation segments, each - potentially being associated with a base text segment or subsegment.
Let root be the ruby
element for which the algorithm is being
+ run.
Let root be the ruby
element for which the algorithm is
- being run.
Let index be 0.
If root has a ruby
element ancestor, then jump to the
- step labeled end.
Let ruby segments be an empty list.
Let current parent be root.
Let current bases be an empty list of DOM ranges.
Let index be 0.
Let current bases range be null.
Let start index be null.
Let current bases range start be null.
Let parent start index be null.
Let current annotations be an empty list of DOM ranges.
Let current base text be null.
Let current annotations range be null.
Let current annotations range start be null.
Let current annotation containers be an empty list.
Let current automatic base nodes be an empty list of DOM Nodes.
Start mode: If index is equal to or greater than the number of - child nodes in current parent, then jump to the step labeled end - mode.
+Let current automatic base range start be null.
If the indexth node in current parent is an
- rt
or rp
element, jump to the step labeled annotation
- mode.
Process a ruby child: If index is equal to or greater than the number + of child nodes in root, then run the steps to commit a ruby segment, + return ruby segments, and abort these steps.
Let current child be the indexth node in root.
Set start index to the value of index.
If current child is not a Text node and is not an + Element node, then increment index by one and jump to the step labeled + process a ruby child.
Base mode: If the indexth node in current
- parent is a ruby
element, and if current parent is the
- same element as root, then push a ruby level and then jump to
- the step labeled start mode.
If current child is an rp
element, then increment
+ index by one and jump to the step labeled process a ruby child. (Note that
+ this has the effect of including this element in any range that we are currently processing.
+ This is done intentionally so that misplaced rp
can be processed correctly;
+ semantically they are ignored all the same.)
If the indexth node in current parent is an
- rt
or rp
element, then set the current base text and then
- jump to the step labeled annotation mode.
If current child is an rt
element, then run these substeps:
Increment index by one.
Run the steps to commit an automatic base.
Base mode post-increment: If index is equal to or greater than - the number of child nodes in current parent, then jump to the step labeled - end mode.
Run the steps to commit the base range.
Jump back to the step labeled base mode.
If current annotations is empty, set current annotations range + start to the value of index.
Create a new DOM range whose start is the + boundary point (root, index) and + whose end is the boundary point (root, index plus one), + and append it at the end of current annotations.
Annotation mode: If the indexth node in current
- parent is an rt
element, then push a ruby annotation and jump to
- the step labeled annotation mode increment.
Increment index by one and jump to the step labeled process a ruby + child.
If the indexth node in current parent is an
- rp
element, jump to the step labeled annotation mode increment.
If current child is an rtc
element, then run these
+ substeps:
If the indexth node in current parent is not a
- Text
node, or is a Text
node that is not inter-element
- whitespace, then jump to the step labeled base mode.
Run the steps to commit an automatic base.
Run the steps to commit the base range.
Annotation mode increment: Let lookahead index be index plus one.
Run the steps to commit current annotations.
Annotation mode white-space skipper: If lookahead index is - equal to the number of child nodes in current parent then jump to the step - labeled end mode.
Create a new ruby annotation container. It is described by the list of
+ annotations returned by running the steps to process an rtc
element
+ and a DOM range whose start is the boundary point (root, index) and whose
+ end is the boundary
+ point (root, index plus one). Append this new ruby
+ annotation container at the end of current annotation containers.
If the lookahead indexth node in current parent is
- an rt
element or an rp
element, then set index to
- lookahead index and jump to the step labeled annotation mode.
Increment index by one and jump to the step labeled process a ruby + child.
If the lookahead indexth node in current parent is
- not a Text
node, or is a Text
node that is not inter-element
- whitespace, then jump to the step labeled base mode (without further incrementing
- index, so the inter-element whitespace seen so far becomes part
- of the next base text segment).
If current child is a Text node and is inter-element + whitespace, then run these substeps:
-Increment lookahead index by one.
If current annotations is not empty, increment index by one and + jump to the step labeled process a ruby child.
Jump to the step labeled annotation mode white-space skipper.
Run the following substeps:
+Let lookahead index be set to the value of index.
End mode: If current parent is not the same element as root, then pop a ruby level and jump to the step labeled base mode - post-increment.
Peek ahead: Increment lookahead index by one.
End: Return base text segments and annotation
- segments. Any content of the ruby
element not described by segments in either
- of those lists is implicitly in an ignored segment.
If lookahead index is equal to or greater than the number of + child nodes in root, then abort these substeps.
Let peek child be the lookahead indexth node in + root.
When the steps above say to set the current base text, it means to run the following - steps at that point in the algorithm:
+If peek child is a Text node and is inter-element + whitespace, then jump to the step labeled peek ahead.
Let text range be a DOM range whose start is the boundary - point (current parent, start index) and whose - end is the boundary - point (current parent, index).
If peek child is an rt
element, an rtc
element,
+ or an rp
element, then set index to the value of lookahead
+ index and jump to the step labeled process a ruby child.
Let new text segment be a base text segment described by the range - annotation range.
+If current annotations is not empty or if current annotation + containers is not empty, then run the steps to commit a ruby + segment.
Add new text segment to base text - segments.
If current child is an rb
element, then run these substeps:
Let current base text be new text - segment.
Run the steps to commit an automatic base.
Let start index be null.
If current bases is empty, then set current bases range start to + the value of index.
Create a new DOM range whose start is the + boundary point (root, index) and + whose end is the boundary point (root, index plus one), + and append it at the end of current bases.
When the steps above say to push a ruby level, it means to run the following steps - at that point in the algorithm:
+Increment index by one and jump to the step labeled process a ruby + child.
Let current parent be the indexth node in current parent.
If current automatic base nodes is empty, set current automatic base + range start to the value of index.
Let index be 0.
Append current child at the end of current automatic base + nodes.
Set saved start index to the value of start - index.
Increment index by one and jump to the step labeled process a ruby + child.
Let start index be null.
When the steps above say to commit a ruby segment, it means to run the following + steps at that point in the algorithm:
+ +Run the steps to commit an automatic base.
If current bases, current annotations, and current annotation + containers are all empty, abort these steps.
When the steps above say to pop a ruby level, it means to run the following steps at - that point in the algorithm:
+Run the steps to commit the base range.
Let index be the position of current parent in - root.
Run the steps to commit current annotations.
Let current parent be root.
Create a new ruby segment. It is described by a list of bases set to + current bases, a base DOM range set to current bases range, and a + list of ruby annotation containers + that are the current annotation containers list. Append this new + ruby segment at the end of ruby segments.
Increment index by one.
Let current bases be an empty list.
Set start index to the value of saved start - index.
Let current bases range be null.
Let saved start index be null.
Let current bases range start be null.
Let current annotation containers be an empty list.
When the steps above say to push a ruby annotation, it means to run the following - steps at that point in the algorithm:
+When the steps above say to commit the base range, it means to run the following + steps at that point in the algorithm:
-Let rt be the rt
element that is the indexth node of current parent.
If current bases is empty, abort these steps.
Let annotation range be a DOM range whose start is the boundary - point (current parent, index) and whose end is the boundary point - (current parent, index plus one) (i.e. that contains only - rt).
If current bases range is not null, abort these steps.
Let new annotation segment be an annotation segment described by the - range annotation range.
Let current bases range be a DOM range whose start is the boundary + point (root, current bases range start) and whose end is the boundary + point (root, index).
If current base text is not null, associate new - annotation segment with current base text.
When the steps above say to commit current annotations, it means to run the + following steps at that point in the algorithm:
-Add new annotation segment to annotation - segments.
If current annotations is not empty and current annotations range + is null let current annotations range be a DOM range whose start is the boundary + point (root, current annotations range start) and whose end is the boundary + point (root, index).
If current annotations is not empty, create a new ruby annotation + container. It is described by an annotations list set to current annotations + and a range set to current annotations range. Append this new ruby annotation + container at the end of current annotation containers.
Let current annotations be an empty list of DOM ranges.
Let current annotations range be null.
Let current annotations range start be null.
When the steps above say to commit an automatic base, it means to run the following + steps at that point in the algorithm:
+ +If current automatic base nodes is empty, abort these steps.
If current automatic base nodes contains nodes that are not Text + nodes, or Text nodes that are not inter-element whitespace, then run + these substeps:
+ +It current bases is empty, set current bases range start to the + value of current automatic base range start.
Create a new DOM range whose start is the + boundary point (root, current + automatic base range start) and whose end + is the boundary point (root, + index), and append it at the end of current bases.
Let current automatic base nodes be an empty list of DOM Nodes.
Let current automatic base range start be null.
...
-<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
+<ruby><rb>漢</rb><rb>字</rb><rt>かん</rt><rt>じ</rt></ruby>
...
This might be rendered as:
+ alt="The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it.">This might be rendered as:
+ alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it.">This might be rendered as:
+ alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font above it."><ruby>
- <ruby>HT<rt>Hypertext</rt>M<rt>Markup</rt>L<rt>Language</rt></ruby>
- <rt>An abstract language for describing documents and applications
-</ruby>
+ <rb>HT<rb>M<rb>L</rb>
+ <rt>Hypertext<rt>Markup<rt>Language</rt>
+ <rtc>An abstract language for describing documents and applications</rtc>
+</ruby>
+
rb
elementruby
element.HTMLElement
.The rb
element marks the base text component of a ruby annotation.
An rb
element that is the child of a ruby
+ element doesn't represent anything itself, but the ruby
element
+ uses it as part of determining what it represents.
An rb
element that is not a child of a ruby
element
+ represents the same thing as its children.
rt
elementruby
element.ruby
or of an rtc
element.HTMLElement
.The rt
element marks the ruby text component of a ruby annotation. When it is the
- child of a ruby
element, it doesn't represent
- anything itself, but the ruby
element uses it as part of determining what it
- represents.
The rt
element marks the ruby text component of a ruby annotation.
An rt
element that is the child of a ruby
element or of
+ an rtc
element that is itself the child of a ruby
element
+ doesn't represent anything itself, but the ruby
+ element uses it as part of determining what it represents.
An rt
element that is not a child of a ruby
element
+ nor of an rtc
element that is itself the child of a ruby
element
+ represents the same thing as its children.
An rt
element that is not a child of a ruby
element
- represents the same thing as its children.
rtc
elementruby
element.rt
or rp
elements.HTMLElement
.The rtc
element marks a ruby text container for ruby text components
+ in a ruby annotation.
An rtc
element that is the child of a ruby
+ element doesn't represent anything itself, but its parent ruby
+ element uses it as part of determining what it represents.
+ When an rtc
element is not the child of a ruby
element,
+ it represents the same thing as its children.
When an rtc
element is processed as part of the segmentation and categorization
+ of content for a ruby
element, the following algorithm defines how to process
+ an rtc
element:
Let root be the rtc
element for which the algorithm is being
+ run.
Let index be 0.
Let annotations be an empty list of DOM ranges.
Let current automatic annotation nodes be an empty list of DOM nodes.
Let current automatic annotation range start be null.
Process an rtc child: If index is equal to or greater than the number + of child nodes in root, then run the steps to commit an automatic + annotation, return annotations, and abort these steps.
Let current child be the indexth node in root.
If current child is an rt
element, then run these substeps:
Run the steps to commit an automatic annotation.
Create a new DOM range whose start is the + boundary point (root, index) and + whose end is the boundary point (root, index plus one), + and append it at the end of annotations.
Increment index by one and jump to the step labeled process an rtc + child.
If current automatic annotation nodes is empty, set current automatic + annotation range start to the value of index.
Append current child at the end of current automatic annotation + nodes.
Increment index by one and jump to the step labeled process an rtc + child.
When the steps above say to commit an automatic annotation, it means to run the + following steps at that point in the algorithm:
+ +If current automatic annotation nodes is empty, abort these steps.
If current automatic annotation nodes contains nodes that are not + Text nodes, or Text nodes that are not inter-element + whitespace, then create a new DOM range whose start is the boundary + point (root, current automatic annotation range start) and whose + end is the boundary + point (root, index), and append it at the end of + annotations.
Let current automatic annotation nodes be an empty list of DOM nodes.
Let current automatic annotation range start be null.
rp
elementruby
element, either immediately before or immediately after an rt
element.ruby
or rtc
element, either immediately before or
+ immediately after an rt
or rtc
element. but not between rt
+ elements.HTMLElement
.The rp
element can be used to provide parentheses or other content around a ruby
- text component of a ruby annotation, to be shown by user agents that don't support ruby
- annotations.
The rp
element is used to provide fallback text to be shown by user agents that
+ don't support ruby annotations. One widespread convention is to provide parentheses around the
+ ruby text component of a ruby annotation.
The contents of the rp
elements are typically not displayed by user agents
+ which do support ruby annotations
An rp
element that is a child of a ruby
- element represents nothing. An rp
element
- whose parent element is not a ruby
element represents its
- children.
rtc
element that is itself the child of a ruby
+ element represents nothing. Otherwise,
+ it represents its children.
The example above, in which each ideograph in the text The example shown previously, in which each ideograph in the text 漢字 is annotated with its phonetic reading, could be expanded to
- use rp
so that in legacy user agents the readings are in parentheses:
rp
so that in legacy user agents the readings are in parentheses (please note
+ that white space has been introduced into this example in order to make it more readable):
- ...
-<ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby>
-...
+
+...
+<ruby>
+ 漢
+ <rb>字</rb>
+ <rp> (</rp>
+ <rt>かん</rt>
+ <rt>じ</rt>
+ <rp>) </rp>
+</ruby>
+...
+
In conforming user agents the rendering would be as above, but in user agents that do not support ruby, the rendering would be:
-... 漢(かん)字(じ)...
-
+ ... 漢字 (かんじ) ...
When there are multiple annotations for a segment, rp
elements can also be placed
- between the annotations. Here is another copy of an earlier contrived example showing some
- symbols with names given in English and French, but this time with rp
elements as
- well:
-
-
<ruby>
-♥<rp>: </rp><rt>Heart</rt><rp>, </rp><rt lang=fr>Cœur</rt><rp>.</rp>
-☘<rp>: </rp><rt>Shamrock</rt><rp>, </rp><rt lang=fr>Trèfle</rt><rp>.</rp>
-✶<rp>: </rp><rt>Star</rt><rp>, </rp><rt lang=fr>Étoile</rt><rp>.</rp>
-</ruby>
+ When there are multiple ruby text containers for a segment, rp
elements can also be placed
+ between them.
This would make the example render as follows in non-ruby-capable user agents: +
Here is another copy of an earlier contrived example showing some symbols with names given in
+ English and French using double-sided annotations, but this time with rp
elements as
+ well:
+<ruby>
+ ♥<rp>: </rp><rt>Heart</rt><rp>, </rp><rtc><rt lang=fr>Cœur</rt></rtc><rp>.</rp>
+ ☘<rp>: </rp><rt>Shamrock</rt><rp>, </rp><rtc><rt lang=fr>Trèfle</rt></rtc><rp>.</rp>
+ ✶<rp>: </rp><rt>Star</rt><rp>, </rp><rtc><rt lang=fr>Étoile</rt></rtc><rp>.</rp>
+</ruby>
+
- ♥: Heart, Cœur. ☘: Shamrock, Trèfle. ✶: Star, Étoile.+
This would make the example render as follows in non-ruby-capable user agents:
+♥: Heart, Cœur. ☘: Shamrock, Trèfle. ✶: Star, Étoile.
data
elementOrganic food in Ireland is certified by the <abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr>.
ruby
, rt
, rp
+ ruby
, rb
, rt
, rtc
, rp
<ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby>
+ <ruby><rb>OJ&<rp>(<rtc><rt>Orange Juice</rtc><rp>)</ruby>
data
@@ -102346,15 +102644,28 @@ dictionary StorageEventInit : EventInit {
+
+ An rb
element's end tag may be omitted if the
+ rb
element is immediately followed by an rb
, rt
,
+ rtc
or rp
element, or if there is no more content in the parent
+ element.
An rt
element's end tag may be omitted if the
- rt
element is immediately followed by an rt
or rp
element,
- or if there is no more content in the parent element.
rt
element is immediately followed by an rb
, rt
,
+ rtc
or rp
element, or if there is no more content in the parent
+ element.
+
+
+ An rtc
element's end tag may be omitted if the
+ rtc
element is immediately followed by an rb
or rtc
+ element, or if there is no more content in the parent element.
An rp
element's end tag may be omitted if the
- rp
element is immediately followed by an rt
or rp
element,
- or if there is no more content in the parent element.
rp
element is immediately followed by an rb
, rt
,
+ rtc
or rp
element, or if there is no more content in the parent
+ element.
@@ -112951,7 +113262,24 @@ sup { vertical-align: super; }
sub, sup { line-height: normal; font-size: smaller; }
ruby { display: ruby; }
+rb { display: ruby-base; white-space: nowrap; }
+rbc { display: ruby-base-container; } /* For compatibility with XHTML-inspired markup */
+rp { display: none; }
rt { display: ruby-text; }
+rtc { display: ruby-text-container; }
+ruby, rb, rbc, rt, rtc { unicode-bidi: isolate; }
+rtc, rt {
+ font-variant-east-asian: ruby;
+ text-emphasis: none;
+ white-space: nowrap;
+ line-height: 1;
+}
+rtc, :not(rtc) > rt {
+ font-size: 50%;
+}
+rtc:lang(zh-TW), :not(rtc) > rt:lang(zh-TW) {
+ font-size: 30%;
+}
:link { color: #0000EE; }
:visited { color: #551A8B; }
@@ -112983,22 +113311,9 @@ br[clear=left i] { clear: left; }
br[clear=right i] { clear: right; }
br[clear=all i], br[clear=both i] { clear: both; }
- For the purposes of the CSS ruby model, runs of children of ruby
elements that are
- not rt
or rp
elements are expected to be wrapped in anonymous boxes
- whose 'display' property has the value 'ruby-base'.
When a particular part of a ruby has more than one annotation, the annotations should be - distributed on both sides of the base text so as to minimize the stacking of ruby annotations on - one side.
- -When it becomes possible to do so, the preceding requirement will be updated to be
- expressed in terms of CSS ruby. (Currently, CSS ruby does not handle nested ruby
- elements or multiple sequential rt
elements, which is how this semantic is
- expressed.)
User agents that do not support correct ruby rendering are expected to render parentheses
- around the text of rt
elements in the absence of rp
elements.
rt
elements in the absence of rp
elements.
plaintext
Use the "text/plain
" MIME type instead.
rb
rtc
Providing the ruby base directly inside the ruby
element or using nested
- ruby
elements is sufficient.
strike
Use del
instead if the element is marking an edit, otherwise use s
instead.
HTMLQuoteElement
rb
ruby
HTMLElement
rp
rt
ruby
ruby
;
+ rtc
HTMLElement
rtc
ruby
rt
HTMLElement
ruby
rb
;
rt
;
+ rtc
;
rp
*HTMLElement
q
HTMLQuoteElement
: HTMLElement
+ rb
+ HTMLElement
+
rp
HTMLElement
@@ -121884,6 +122222,10 @@ interface MimeType {
rt
HTMLElement
+ rtc
+ HTMLElement
+
ruby
HTMLElement
@@ -122589,7 +122931,7 @@ INSERT INTERFACES HERE