diff --git a/images/composition.png b/images/composition.png new file mode 100644 index 00000000000..288822af914 Binary files /dev/null and b/images/composition.png differ diff --git a/images/group-double.png b/images/group-double.png new file mode 100644 index 00000000000..ae973e32242 Binary files /dev/null and b/images/group-double.png differ diff --git a/images/group.png b/images/group.png new file mode 100644 index 00000000000..d963ab4322c Binary files /dev/null and b/images/group.png differ diff --git a/images/hokekyou.png b/images/hokekyou.png new file mode 100644 index 00000000000..19bc4ce7171 Binary files /dev/null and b/images/hokekyou.png differ diff --git a/images/mono-or-jukugo-double.png b/images/mono-or-jukugo-double.png new file mode 100644 index 00000000000..6579d779002 Binary files /dev/null and b/images/mono-or-jukugo-double.png differ diff --git a/source b/source index 475ddd6c3e4..a822f0b7a5d 100644 --- a/source +++ b/source @@ -20691,113 +20691,107 @@ this specification: the <abbr>WHATWG</abbr> and the

The 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.

+ Japanese, this form of typography is also known as furigana. + Ruby text can appear on either side, and sometimes both sides, of the base text, and it is + possible to control its position using CSS. A more complete introduction to ruby can be found in + the Use Cases & Exploratory Approaches for Ruby Markup document as well as in + CSS Ruby Module Level 1.

+

The content model of ruby elements consists of one or more of the following sequences:

    -
  1. One or the other of the following: -
      -
    • Phrasing content, but with no ruby elements and with no ruby element descendants -
    • A single ruby element that itself has no ruby element descendants -
    -
  2. One or the other of the following: -
      -
    • One or more rt elements -
    • An rp element followed by one or more rt elements, each of which is itself followed by an rp element -
    +
  3. One or more phrasing content nodes or rb elements.
    4. +
  4. One or more 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.

-
Mono-ruby for individual base characters in Japanese +
Mono-ruby for individual base characters
-

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.

-
Mono-ruby for compound words (jukugo) +
+ 
<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>
-
+

An example of ruby text mixed up with regular text.

-
-

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>です。
- -
Jukugo-ruby +
Group 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:

+ +

Group ruby example with きょう annotating 今日

+ +

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.

-
Group ruby for describing meanings

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
- -
Group ruby for Jukuji readings +
Jukugo-ruby
-

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:

+ +

Example of jukugo ruby

+ +

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.

-
Text with both phonetic and semantic annotations (double-sided ruby) +

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. +

+ + +
Inline ruby
-

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>
+
-
+
Text with both phonetic and semantic annotations (double-sided 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.

-
+

San Francisco in Chinese, with both pinyin and the original English as annotations.

-

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.

+ +

上手 (skill) annotated in both kana and romaji, shown in both jukugo and mono styles.

+ +

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>の方角
-

東とう南なんSoutheastの方角 +

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.

    • -
      -

    1. Let base text segments be an empty list of base text segments, each - potentially with a list of base text subsegments.

      2. +

    2. 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.

      3. +
+ +

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.

    • +
      +

    1. Let root be the ruby element for which the algorithm is being + run.

      2. -

    2. Let root be the ruby element for which the algorithm is - being run.

      3. +

    3. Let index be 0.

      4. -

    4. If root has a ruby element ancestor, then jump to the - step labeled end.

      5. +

    5. Let ruby segments be an empty list.

      6. -

    6. Let current parent be root.

      7. +

    7. Let current bases be an empty list of DOM ranges.

      8. -

    8. Let index be 0.

      9. +

    9. Let current bases range be null.

      10. -

    10. Let start index be null.

      11. +

    11. Let current bases range start be null.

      12. -

    12. Let parent start index be null.

      13. +

    13. Let current annotations be an empty list of DOM ranges.

      14. -

    14. Let current base text be null.

      15. +

    15. Let current annotations range be null.

      16. +

    16. Let current annotations range start be null.

      17. - +

    17. Let current annotation containers be an empty list.

      18. +

    18. Let current automatic base nodes be an empty list of DOM Nodes.

      19. -

    19. 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.

      +

    20. Let current automatic base range start be null.

      21. -

    21. If the indexth node in current parent is an - rt or rp element, jump to the step labeled annotation - mode.

      22. +

    22. 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.

      23. - +

    23. Let current child be the indexth node in root.

      24. -

    24. Set start index to the value of index.

      25. +

    25. 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.

      26. -

    26. 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.

      27. +

    27. 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.)

      28. -

    28. 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.

      29. +
    29. +

      If current child is an rt element, then run these substeps:

      -

    30. Increment index by one.

      31. +
        +

      1. Run the steps to commit an automatic base.

        2. -

      2. 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.

        3. +

      3. Run the steps to commit the base range.

        4. -

      4. Jump back to the step labeled base mode.

        5. +

      5. If current annotations is empty, set current annotations range + start to the value of index.

        6. +

      6. 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.

        7. -

      7. 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.

        8. +

      8. Increment index by one and jump to the step labeled process a ruby + child.

        9. +
      + -

    31. If the indexth node in current parent is an - rp element, jump to the step labeled annotation mode increment.

      32. +
    32. +

      If current child is an rtc element, then run these + substeps:

      -

    33. 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.

      34. +
        +

      1. Run the steps to commit an automatic base.

        2. - +

      2. Run the steps to commit the base range.

        3. -

      3. Annotation mode increment: Let lookahead index be index plus one.

        4. +

      4. Run the steps to commit current annotations.

        5. -

      5. 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.

        6. +

      6. 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.

        7. -

      7. 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.

        8. +

      8. Increment index by one and jump to the step labeled process a ruby + child.

        9. +
      + -

    34. 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).

      35. +
    35. +

      If current child is a Text node and is inter-element + whitespace, then run these substeps:

      -

    36. Increment lookahead index by one.

      37. +
        +

      1. If current annotations is not empty, increment index by one and + jump to the step labeled process a ruby child.

        2. -

      2. Jump to the step labeled annotation mode white-space skipper.

        3. +
      3. +

        Run the following substeps:

        +
          +

        1. Let lookahead index be set to the value of index.

          2. -

        2. 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.

          3. +

        3. Peek ahead: Increment lookahead index by one.

          4. -

        4. 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.

          5. -
        +

      4. If lookahead index is equal to or greater than the number of + child nodes in root, then abort these substeps.

        5. +

      5. Let peek child be the lookahead indexth node in + root.

        6. -

        When the steps above say to set the current base text, it means to run the following - steps at that point in the algorithm:

        +

      6. If peek child is a Text node and is inter-element + whitespace, then jump to the step labeled peek ahead.

        7. -
          -

        1. 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).

          2. +

        2. 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.

          3. +
        + +
      + -

    37. Let new text segment be a base text segment described by the range - annotation range.

      +

    38. If current annotations is not empty or if current annotation + containers is not empty, then run the steps to commit a ruby + segment.

      39. -

    39. Add new text segment to base text - segments.

      40. +
    40. +

      If current child is an rb element, then run these substeps:

      -

    41. Let current base text be new text - segment.

      42. +
        +

      1. Run the steps to commit an automatic base.

        2. -

      2. Let start index be null.

        3. -
      +

    42. If current bases is empty, then set current bases range start to + the value of index.

      43. +

    43. 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.

      44. -

      When the steps above say to push a ruby level, it means to run the following steps - at that point in the algorithm:

      +

    44. Increment index by one and jump to the step labeled process a ruby + child.

      45. +
    + -
      -

    1. Let current parent be the indexth node in current parent.

      2. +

    2. If current automatic base nodes is empty, set current automatic base + range start to the value of index.

      3. -

    3. Let index be 0.

      4. +

    4. Append current child at the end of current automatic base + nodes.

      5. -

    5. Set saved start index to the value of start - index.

      6. +

    6. Increment index by one and jump to the step labeled process a ruby + child.

      7. +
    -

  • 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:

    + +
      +

    1. Run the steps to commit an automatic base.

      2. +

    2. If current bases, current annotations, and current annotation + containers are all empty, abort these steps.

      3. -

      When the steps above say to pop a ruby level, it means to run the following steps at - that point in the algorithm:

      +

    3. Run the steps to commit the base range.

      4. -
        -

      1. Let index be the position of current parent in - root.

        2. +

      2. Run the steps to commit current annotations.

        3. -

      3. Let current parent be root.

        4. +

      4. 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.

        5. -

      5. Increment index by one.

        6. +

      6. Let current bases be an empty list.

        7. -

      7. Set start index to the value of saved start - index.

        8. +

      8. Let current bases range be null.

        9. -

      9. Let saved start index be null.

        10. -
      +

    4. Let current bases range start be null.

      5. +

    5. Let current annotation containers be an empty list.

      6. +
    -

    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:

    -
      -

    1. Let rt be the rt element that is the indexth node of current parent.

      2. +
        +

      1. If current bases is empty, abort these steps.

        2. -

      2. 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).

        3. +

      3. If current bases range is not null, abort these steps.

        4. -

      4. Let new annotation segment be an annotation segment described by the - range annotation range.

        5. +

      5. 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).

        6. +
      -

    2. If current base text is not null, associate new - annotation segment with current base text.

      3. +

      When the steps above say to commit current annotations, it means to run the + following steps at that point in the algorithm:

      -

    3. Add new annotation segment to annotation - segments.

      4. -
    +
      +

    1. 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).

      2. + +

    2. 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.

      3. + +

    3. Let current annotations be an empty list of DOM ranges.

      4. + +

    4. Let current annotations range be null.

      5. + +

    5. Let current annotations range start be null.

      6. +
    + +

    When the steps above say to commit an automatic base, it means to run the following + steps at that point in the algorithm:

    + +
      +

    1. If current automatic base nodes is empty, abort these steps.

      2. + +
    2. +

      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:

      + +
        +

      1. It current bases is empty, set current bases range start to the + value of current automatic base range start.

        2. + +

      2. 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.

        3. +
      +
      3. + +

    3. Let current automatic base nodes be an empty list of DOM Nodes.

      4. + +

    4. Let current automatic base range start be null.

      5. +
    @@ -21095,13 +21255,13 @@ this specification: the <abbr>WHATWG</abbr> and the lang="ja">漢字 is annotated with its reading in hiragana.

    ...
-<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
+<ruby><rb>漢</rb><rb>字</rb><rt>かん</rt><rt>じ</rt></ruby>
 ...

    This might be rendered as:

    The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it.

    + alt="The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it.">

    @@ -21117,7 +21277,7 @@ this specification: the <abbr>WHATWG</abbr> and the

    This might be rendered as:

    The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it.

    + alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it.">

    @@ -21133,7 +21293,7 @@ this specification: the <abbr>WHATWG</abbr> and the

    This might be rendered as:

    The two main ideographs, each with its pinyin annotation rendered in a smaller font above it.

    + alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font above it.">

    @@ -21147,12 +21307,39 @@ this specification: the <abbr>WHATWG</abbr> and the "Language".

    <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> + +

    The rb element

    + +
    +
    Categories:
    +
    None.
    +
    Contexts in which this element can be used:
    +
    As a child of a ruby element.
    +
    Content model:
    +
    Phrasing content.
    +
    Content attributes:
    +
    Global attributes
    +
    DOM interface:
    +
    Uses 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.

    +

    The rt element

    @@ -21160,7 +21347,7 @@ this specification: the <abbr>WHATWG</abbr> and the
    Categories:
    None.
    Contexts in which this element can be used:
    -
    As a child of a ruby element.
    +
    As a child of a ruby or of an rtc element.
    Content model:
    Phrasing content.
    Content attributes:
    @@ -21173,18 +21360,114 @@ this specification: the <abbr>WHATWG</abbr> and the
    Uses 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.

    +

    The rtc element

    - +
    +
    Categories:
    +
    None.
    +
    Contexts in which this element can be used:
    +
    As a child of a ruby element.
    +
    Content model:
    +
    Phrasing content, rt or rp elements.
    +
    Content attributes:
    +
    Global attributes
    +
    DOM interface:
    +
    Uses 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:

    + +
      +

    1. Let root be the rtc element for which the algorithm is being + run.

      2. + +

    2. Let index be 0.

      3. + +

    3. Let annotations be an empty list of DOM ranges.

      4. + +

    4. Let current automatic annotation nodes be an empty list of DOM nodes.

      5. + +

    5. Let current automatic annotation range start be null.

      6. + +

    6. 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.

      7. + +

    7. Let current child be the indexth node in root.

      8. + +
    8. +

      If current child is an rt element, then run these substeps:

      + +
        +

      1. Run the steps to commit an automatic annotation.

        2. + +

      2. 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.

        3. + +

      3. Increment index by one and jump to the step labeled process an rtc + child.

        4. + +
      +
      9. + +

    9. If current automatic annotation nodes is empty, set current automatic + annotation range start to the value of index.

      10. + +

    10. Append current child at the end of current automatic annotation + nodes.

      11. + +

    11. Increment index by one and jump to the step labeled process an rtc + child.

      12. +
    + +

    When the steps above say to commit an automatic annotation, it means to run the + following steps at that point in the algorithm:

    + +
      +

    1. If current automatic annotation nodes is empty, abort these steps.

      2. + +

    2. 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.

      3. +

    3. Let current automatic annotation nodes be an empty list of DOM nodes.

      4. + +

    4. Let current automatic annotation range start be null.

      5. +
    +

    The rp element

    @@ -21192,7 +21475,9 @@ this specification: the <abbr>WHATWG</abbr> and the
    Categories:
    None.
    Contexts in which this element can be used:
    -
    As a child of a ruby element, either immediately before or immediately after an rt element.
    +
    As a child of a ruby or rtc element, either immediately before or + immediately after an rt or rtc element. but not between rt + elements.
    Content model:
    Text.
    Content attributes:
    @@ -21205,52 +21490,65 @@ this specification: the <abbr>WHATWG</abbr> and the
    Uses 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.

    + element or of an 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:

    + use 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.
    -

    The data element

    @@ -22698,9 +22996,9 @@ document.body.appendChild(wbr); 
    Organic 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 annotations - 
    <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.

    + around the text of rt elements in the absence of rp elements.

    @@ -115668,11 +115983,6 @@ if (s = prompt('What is your name?')) {
    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.

    @@ -119122,6 +119432,16 @@ interface MimeType { HTMLQuoteElement + + rb + Ruby base + none + ruby + phrasing + globals + HTMLElement + + rp Parenthesis for ruby annotation text @@ -119136,12 +119456,24 @@ interface MimeType { rt Ruby annotation text none - ruby + ruby; + rtc phrasing globals HTMLElement + + rtc + Ruby annotation container + none + ruby + phrasing; + rt + globals + HTMLElement + + ruby Ruby annotation(s) @@ -119150,7 +119482,9 @@ interface MimeType { palpable phrasing phrasing; + rb; rt; + rtc; rp* globals HTMLElement @@ -121876,6 +122210,10 @@ interface MimeType { 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
    CSS Pseudo-Elements, D. Glazman, E. Etemad, A. Stearns. W3C.
    [CSSRUBY]
    -
    CSS3 Ruby Module, R. Ishida. W3C.
    +
    CSS Ruby Module Level 1, Elika J. Etemad; et al. W3C.
    [CSSSCOPING]
    CSS Scoping Module, T. Atkins. W3C.
    @@ -122898,6 +123240,9 @@ INSERT INTERFACES HERE
    [SCREENORIENTATION]
    Screen Orientation API, M. Lamouri, M. Cáceres. W3C.
    +
    [RUBY-UC]
    +
    (Non-normative) Use Cases & Exploratory Approaches for Ruby Markup, R. Ishida. W3C.
    +
    [SCSU]
    (Non-normative) UTR #6: A Standard Compression Scheme For Unicode, M. Wolf, K. Whistler, C. Wicksteed, M. Davis, A. Freytag, M. Scherer. Unicode Consortium.