W3C HTML Ruby Markup Extensions

<!DOCTYPE html> <html lang="en" typeof="bibo:Document " about="" property="dcterms:language" content="en"> <head> <meta charset="utf-8"> <title>W3C HTML Ruby Markup Extensions</title> <style> .element { background: none repeat scroll 0 0 #EEEEFF; border-left: 0.25em solid #9999FF; color: black; margin: 0 0 1em 0.15em; padding: 0 1em 0.25em 0.75em; position: relative; z-index: 1; } .prettyprint .tag { font-weight: bolder; color: #00c; } </style> <style>/***************************************************************** * ReSpec 3 CSS * Robin Berjon - http://berjon.com/ *****************************************************************/ /* --- INLINES --- */ em.rfc2119 { text-transform: lowercase; font-variant: small-caps; font-style: normal; color: #900; } h1 acronym, h2 acronym, h3 acronym, h4 acronym, h5 acronym, h6 acronym, a acronym, h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr, a abbr { border: none; } dfn { font-weight: bold; } a.internalDFN { color: inherit; border-bottom: 1px solid #99c; text-decoration: none; } a.externalDFN { color: inherit; border-bottom: 1px dotted #ccc; text-decoration: none; } a.bibref { text-decoration: none; } cite .bibref { font-style: normal; } code { color: #ff4500; } /* --- TOC --- */ .toc a, .tof a { text-decoration: none; } a .secno, a .figno { color: #000; } ul.tof, ol.tof { list-style: none outside none; } .caption { margin-top: 0.5em; font-style: italic; } /* --- TABLE --- */ table.simple { border-spacing: 0; border-collapse: collapse; border-bottom: 3px solid #005a9c; } .simple th { background: #005a9c; color: #fff; padding: 3px 5px; text-align: left; } .simple th[scope="row"] { background: inherit; color: inherit; border-top: 1px solid #ddd; } .simple td { padding: 3px 10px; border-top: 1px solid #ddd; } .simple tr:nth-child(even) { background: #f0f6ff; } /* --- DL --- */ .section dd > p:first-child { margin-top: 0; } .section dd > p:last-child { margin-bottom: 0; } .section dd { margin-bottom: 1em; } .section dl.attrs dd, .section dl.eldef dd { margin-bottom: 0; } @media print { .removeOnSave { display: none; } } </style><style>/* --- EXAMPLES --- */ div.example-title { min-width: 7.5em; color: #b9ab2d; } div.example-title span { text-transform: uppercase; } aside.example, div.example, div.illegal-example { padding: 0.5em; margin: 1em 0; position: relative; clear: both; } div.illegal-example { color: red } div.illegal-example p { color: black } aside.example, div.example { padding: .5em; border-left-width: .5em; border-left-style: solid; border-color: #e0cb52; background: #fcfaee; } aside.example div.example { border-left-width: .1em; border-color: #999; background: #fff; } aside.example div.example div.example-title { color: #999; } </style><style>/* --- ISSUES/NOTES --- */ div.issue-title, div.note-title { padding-right: 1em; min-width: 7.5em; color: #b9ab2d; } div.issue-title { color: #e05252; } div.note-title { color: #2b2; } div.issue-title span, div.note-title span { text-transform: uppercase; } div.note, div.issue { margin-top: 1em; margin-bottom: 1em; } .note > p:first-child, .issue > p:first-child { margin-top: 0 } .issue, .note { padding: .5em; border-left-width: .5em; border-left-style: solid; } div.issue, div.note { padding: 1em 1.2em 0.5em; margin: 1em 0; position: relative; clear: both; } span.note, span.issue { padding: .1em .5em .15em; } .issue { border-color: #e05252; background: #fbe9e9; } .note { border-color: #52e052; background: #e9fbe9; } </style><style>/* HIGHLIGHTS */ code.prettyprint { color: inherit; } /* this from google-code-prettify */ .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} </style><link href="https://www.w3.org/StyleSheets/TR/W3C-WG-NOTE" rel="stylesheet"></head> <body id="respecDocument" role="document" class="h-entry"><div id="respecHeader" role="contentinfo" class="head"> <a href="https://www.w3.org/"><img src="https://www.w3.org/Icons/w3c_home" alt="W3C" height="48" width="72"></a> <h1 class="title p-name" id="title" property="dcterms:title"><abbr title="World Wide Web Consortium">W3C</abbr> HTML Ruby Markup Extensions</h1> <h2 id="w3c-working-group-note-04-february-2014" property="dcterms:issued" datatype="xsd:dateTime" content="2014-02-03T23:00:00.000Z"><abbr title="World Wide Web Consortium">W3C</abbr> Working Group Note <time class="dt-published" datetime="2014-02-04">04 February 2014</time></h2> <dl> <dt>This version:</dt> <dd><a class="u-url" href="https://www.w3.org/TR/2014/NOTE-html-ruby-extensions-20140204/">http://www.w3.org/TR/2014/NOTE-html-ruby-extensions-20140204/</a></dd> <dt>Latest published version:</dt> <dd><a href="https://www.w3.org/TR/html-ruby-extensions/">http://www.w3.org/TR/html-ruby-extensions/</a></dd> <dt>Latest editor's draft:</dt> <dd><a href="https://darobin.github.com/html-ruby/">http://darobin.github.com/html-ruby/</a></dd> <dt>Previous version:</dt> <dd><a rel="dcterms:replaces" href="https://www.w3.org/TR/2013/WD-html-ruby-extensions-20131022/">http://www.w3.org/TR/2013/WD-html-ruby-extensions-20131022/</a></dd> <dt>Editor:</dt> <dd class="p-author h-card vcard" rel="bibo:editor" inlist=""><a class="u-url url p-name fn" rel="foaf:homepage" property="foaf:name" content="Robin Berjon" href="http://berjon.com/">Robin Berjon</a>, <a rel="foaf:workplaceHomepage" class="p-org org h-org h-card" href="http://w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a> </dd> </dl> <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2014 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a>® (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>), Some Rights Reserved: this document is dual-licensed, <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents"><abbr title="World Wide Web Consortium">W3C</abbr> Document License</a>. <abbr title="World Wide Web Consortium">W3C</abbr> <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2013/copyright-documents-dual.html">document use</a> rules apply. <hr> </div> <section rel="bibo:Chapter" resource="#ref" typeof="bibo:Chapter" datatype="" property="dcterms:abstract" class="introductory" id="abstract"><h2 id="h2_abstract" role="heading" aria-level="1">Abstract</h2> The ruby markup model currently described in the HTML specification is limited in its support for a number of features, notably jukugo and double-sided ruby, as well as inline ruby. This specification addresses these issues by introducing new elements and changing the ruby processing model. Specific care has been taken to ensure that authoring remains as simple as possible. This document was largely developed to address the shortcomings listed in <cite>Use Cases & Exploratory Approaches for Ruby Markup</cite>. [<cite><a href="#bib-ruby-use-cases" class="bibref">ruby-use-cases</a></cite>] </section><section rel="bibo:Chapter" resource="#ref" typeof="bibo:Chapter" id="sotd" class="introductory"><h2 id="h2_sotd" role="heading" aria-level="1">Status of This Document</h2> This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current <abbr title="World Wide Web Consortium">W3C</abbr> publications and the latest revision of this technical report can be found in the <a href="https://www.w3.org/TR/"><abbr title="World Wide Web Consortium">W3C</abbr> technical reports index</a> at http://www.w3.org/TR/. This specification is an <a href="http://dev.w3.org/html5/decision-policy/html5-2014-plan.html#extension-specs">extension specification</a> to HTML. This document was published by the <a href="https://www.w3.org/html/wg/">HTML Working Group</a> as a Working Group Note. If you wish to make comments regarding this document, please send them to <a href="mailto:public-html@w3.org">public-html@w3.org</a> (<a href="mailto:public-html-request@w3.org?subject=subscribe">subscribe</a>, <a href="http://lists.w3.org/Archives/Public/public-html/">archives</a>). All comments are welcome. Publication as a Working Group Note does not imply endorsement by the <abbr title="World Wide Web Consortium">W3C</abbr> Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress. This document was produced by a group operating under the <a id="sotd_patent" about="" rel="w3p:patentRules" href="https://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. <abbr title="World Wide Web Consortium">W3C</abbr> maintains a <a href="https://www.w3.org/2004/01/pp-impl/40318/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. </section><section id="toc"><h2 id="h2_toc" role="heading" aria-level="1" class="introductory">Table of Contents</h2><ul id="respecContents" role="directory" class="toc"><li class="tocline"><a class="tocxref" href="#changes-compared-to-the-current-ruby-model">1. Changes compared to the current ruby model</a><ul class="toc"><li class="tocline"><a class="tocxref" href="#parsing-changes">1.1 Parsing changes</a></li></ul></li><li class="tocline"><a class="tocxref" href="#terminology">2. Terminology</a></li><li class="tocline"><a class="tocxref" href="#the-ruby-element">3. The <code>ruby</code> element</a></li><li class="tocline"><a class="tocxref" href="#the-rb-element">4. The <code>rb</code> element</a></li><li class="tocline"><a class="tocxref" href="#the-rt-element">5. The <code>rt</code> element</a></li><li class="tocline"><a class="tocxref" href="#the-rtc-element">6. The <code>rtc</code> element</a></li><li class="tocline"><a class="tocxref" href="#the-rp-element">7. The <code>rp</code> element</a></li><li class="tocline"><a class="tocxref" href="#rendering">8. Rendering</a></li><li class="tocline"><a class="tocxref" href="#acknowledgements">9. Acknowledgements</a></li><li class="tocline"><a class="tocxref" href="#references">A. References</a><ul class="toc"><li class="tocline"><a class="tocxref" href="#normative-references">A.1 Normative references</a></li><li class="tocline"><a class="tocxref" href="#informative-references">A.2 Informative references</a></li></ul></li></ul></section> <section id="changes-compared-to-the-current-ruby-model"> <h2 id="h2_changes-compared-to-the-current-ruby-model" role="heading" aria-level="1">1. Changes compared to the current ruby model</h2> The following changes are made to HTML by this document: <ul> <li> <code><a class="internalDFN" href="#dfn-ruby">ruby</a></code> nested inside <code><a class="internalDFN" href="#dfn-ruby">ruby</a></code> now represents its children (in other words, it is no longer meaningful, which reflects implementations); </li> <li> new <code><a class="internalDFN" href="#dfn-rb">rb</a></code> and <code><a class="internalDFN" href="#dfn-rtc">rtc</a></code> elements have been introduced to support cases in which explicit bases and containers are needed (explicit based are relatively common in existing content); </li> <li> the algorithm for processing ruby markup has been changed (note that if this extension is rejected, the original algorithm will still need to be modified because it is buggy). </li> </ul> Some further changes will be required to HTML if this document is merged in. Of those, some are for paraphernalia (element index and the such) while others are more involved (changes to parsing to auto-close some elements) and in some cases optional. Changes to [<cite><a href="#bib-WEBVTT" class="bibref">WEBVTT</a></cite>] will be required in order to match this model. Also, <code><a class="internalDFN" href="#dfn-rb">rb</a></code> needs to be removed from the obsolete elements. <section id="parsing-changes"> <h3 id="h3_parsing-changes" role="heading" aria-level="2">1.1 Parsing changes</h3> Add <code>rb</code> and <code>rtc</code> to the list of elements in <a href="https://www.w3.org/html/wg/drafts/html/master/single-page.html#generate-implied-end-tags">generate implied end tags</a>. Add <code>rb</code> and <code>rtc</code> to the step A start tag whose tag name is one of: "rp", "rt" in <a href="https://www.w3.org/html/wg/drafts/html/master/single-page.html#parsing-main-inbody">The "in body" insertion mode</a>. Within that step, if the start tag is "rt" then generate implied end tags excepting "rtc", otherwise just generate implied end tags. Add <code>rb</code> and <code>rtc</code> to the elements that preclude a parse error in both An end tag whose tag name is "body" and An end tag whose tag name is "html" in <a href="https://www.w3.org/html/wg/drafts/html/master/single-page.html#parsing-main-inbody">The "in body" insertion mode</a>. </section> </section> <section id="terminology"> <h2 id="h2_terminology" role="heading" aria-level="1">2. Terminology</h2> The term <dfn id="dfn-inter-element-whitespace">inter-element whitespace</dfn> is defined in the HTML specification. [<cite><a href="#bib-HTML5" class="bibref">HTML5</a></cite>] The interfaces <dfn id="dfn-text">Text</dfn> and <dfn id="dfn-element">Element</dfn> are defined in the DOM specification. [<cite><a href="#bib-DOM" class="bibref">DOM</a></cite>] </section>  <section id="the-ruby-element"> <h2 id="h2_the-ruby-element" role="heading" aria-level="1">3. The <dfn id="dfn-ruby"><code>ruby</code></dfn> element</h2> <dl class="element"> <dt>Categories:</dt> <dd>Flow content.</dd> <dd>Phrasing content.</dd> <dd>Palpable content.</dd> <dt> Contexts in which this element can be used: </dt> <dd>Where phrasing content is expected.</dd> <dt>Content model:</dt> <dd>See prose.</dd> <dt>Content attributes:</dt> <dd>Global attributes</dd> <dt>DOM interface:</dt> <dd>Uses <code>HTMLElement</code>.</dd> </dl> The <code>ruby</code> 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. A more complete introduction to ruby can be found in the <cite>Use Cases & Exploratory Approaches for Ruby Markup</cite> document as well as in <cite>CSS Ruby Module Level 1</cite>. [<cite><a href="#bib-ruby-use-cases" class="bibref">ruby-use-cases</a></cite>] [<cite><a href="#bib-css3-ruby" class="bibref">css3-ruby</a></cite>] The content model of <code>ruby</code> elements consists of one or more of the following sequences: <ol class="brief"> <li> One or more phrasing content nodes or <code>rb</code> elements. </li> <li> One or more <code>rt</code> or <code>rtc</code> elements, each of which either immediately preceded or followed by an <code>rp</code> elements. </li> </ol> The <code>ruby</code>, <code>rb</code>, <code>rtc</code>, and <code>rt</code> 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 <cite>Requirements for Japanese Text Layout</cite>. [<cite><a href="#bib-JLREQ" class="bibref">JLREQ</a></cite>] The <code>rp</code> element can be used as fallback content when ruby rendering is not supported.  <dl> <dt>Mono-ruby for individual base characters</dt> <dd> 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. <div class="example"><div class="example-title">Example 1</div><pre style="" class="example highlight prettyprint prettyprinted"><ruby>base<rt>annotation</ruby></pre></div> When no <code>rb</code> 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. <div class="example"><div class="example-title">Example 2</div><pre style="" class="example highlight prettyprint prettyprinted"><ruby><rb>base<rt>annotation</ruby></pre></div> In the following example, notice how each annotation corresponds to a single base character. <div class="example"><div class="example-title">Example 3</div><pre style="" class="example highlight prettyprint prettyprinted"><ruby>日<rt>に</rt></ruby><ruby>本<rt>ほん</rt></ruby> <ruby>語<rt>ご</rt></ruby>で<ruby>書<rt>か</rt></ruby> いた<ruby>作<rt>さく</rt></ruby><ruby>文<rt>ぶん</rt></ruby>です。</pre></div> Ruby text interspersed in regular text provides structure akin to the following image: <img src="composition.png" alt="An example of ruby text mixed up with regular text." height="87" width="390"> This example can also be written as follows, using one <code>ruby</code> element with two segments of base text and two annotations (one for each) rather than two back-to-back <code>ruby</code> elements each with one base text segment and annotation (as in the markup above): <div class="example"><div class="example-title">Example 4</div><pre style="" class="example highlight prettyprint prettyprinted"><ruby>日<rt>に</rt>本<rt>ほん</rt>語<rt>ご</rt></ruby> で<ruby>書<rt>か</rt></ruby> いた<ruby>作<rt>さく</rt>文<rt>ぶん</rt></ruby>です。</pre></div> </dd> <dt>Group ruby</dt> <dd> 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 <a class="internalDFN" href="#dfn-ruby-text-annotation">ruby text annotation</a> maps to a base that is comprised of more than one character, then that base is grouped. The following group ruby: <img src="group.png" alt="Group ruby example with きょう annotating 今日" height="88" width="78"> Can be marked up as follows: <div class="example"><div class="example-title">Example 5</div><pre style="" class="example highlight prettyprint prettyprinted"><ruby>今日<rt>きょう</ruby></pre></div> </dd> <dt>Jukugo ruby</dt> <dd> 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 behaviour 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: <img src="hokekyou.png" alt="Example of jukugo ruby" height="126" width="66"> Which can be marked up as follows: <div class="example"><div class="example-title">Example 6</div><pre style="" class="example highlight prettyprint prettyprinted"><ruby>法<rb>華<rb>経<rt>ほ<rt>け<rt>きょう</ruby></pre></div> In this example, each <code>rt</code> element is paired with its respective <code>rb</code> element, the difference with an interleaved <code>rb</code>/<code>rt</code> 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. <div class="note"><div id="h_note_1" role="heading" aria-level="2" class="note-title">Note</div> For more details on <a href="https://www.w3.org/TR/jlreq/#positioning_of_jukugoruby">Jukugo Ruby rendering</a>, see Appendix F in the <cite>Requirements for Japanese Text Layout</cite> and Use Case C: Jukugo ruby in the <cite>Use Cases & Exploratory Approaches for Ruby Markup</cite>. [<cite><a href="#bib-JLREQ" class="bibref">JLREQ</a></cite>] [<cite><a href="#bib-ruby-use-cases" class="bibref">ruby-use-cases</a></cite>] </div> </dd> <dt>Inline ruby</dt> <dd> 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. 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: <div class="example"><div class="example-title">Example 7</div><pre style="" class="example highlight prettyprint prettyprinted"><ruby>東<rb>京<rt>とう<rt>きょう</ruby></pre></div> 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 <code>rp</code> element is useful. It can be inserted into the above example to provide the appropriate fallback when ruby layout is not supported: <div class="example"><div class="example-title">Example 8</div><pre style="" class="example highlight prettyprint prettyprinted"><ruby>東<rb>京<rp>(<rt>とう<rt>きょう<rp>)</ruby></pre></div> </dd> <dt>Text with both phonetic and semantic annotations (double-sided ruby) </dt><dd> Sometimes, ruby can be used to annotate a base twice. 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. <img src="group-double.png" alt="San Francisco in Chinese, with both pinyin and the original English as annotations." height="84" width="113"> Which is marked up as follows: <div class="example"><div class="example-title">Example 9</div><pre style="" class="example highlight prettyprint prettyprinted"><ruby><rb>旧<rb>金<rb>山<rt>jiù<rt>jīn<rt>shān<rtc>San Francisco</ruby></pre></div> 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 <code>rtc</code> element is introduced in order to provide a second single <a class="internalDFN" href="#dfn-ruby-text-annotation">ruby text annotation</a> 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. <img src="mono-or-jukugo-double.png" alt="上手 ("skill") annotated in both kana and romaji, shown in both jukugo and mono styles." height="120" width="185"> Which is marked up as follows: <div class="example"><div class="example-title">Example 10</div><pre style="" class="example highlight prettyprint prettyprinted"><ruby><rb>上<rb>手<rt>じよう<rt>ず<rtc><rt>jou<rt>zu</ruby></pre></div> Text that is a direct child of the <code>rtc</code> element implicitly produces a ruby text segment as if it were contained in an <code>rt</code> 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. <div class="example"><div class="example-title">Example 11</div><pre style="" class="example highlight prettyprint prettyprinted"><ruby> ♥<rt>Heart<rtc lang=fr>Cœur</rtc> ☘<rt>Shamrock<rtc lang=fr>Trèfle</rtc> ✶<rt>Star<rtc lang=fr>Étoile </ruby></pre></div> Similarly, text directly inside a <code>ruby</code> element implicitly produces a ruby base as if it were contained in an <code>rb</code> element, and <code>rt</code> children of <code>ruby</code> are implicitly contained in an <code>rtc</code> container. In effect, the above example is equivalent (in meaning, though not in the DOM it produces) to the following: <div class="example"><div class="example-title">Example 12</div><pre style="" class="example highlight prettyprint prettyprinted"><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></pre></div> </dd> </dl> <hr> Within a ruby element, content is parcelled into a series of ruby segments. Each <dfn id="dfn-ruby-segment">ruby segment</dfn> is described by: <ul> <li> Zero or more <dfn id="dfn-ruby-base" title="ruby base">ruby bases</dfn>, each of which is a DOM range that may contain phrasing content or an <code>rb</code> element. </li> <li> A base range, that is a DOM range including all the bases. This is the <dfn id="dfn-ruby-base-container">ruby base container</dfn>. </li> <li> Zero or more <a class="internalDFN" href="#dfn-ruby-text-container" title="ruby text container">ruby text containers</a> which may correspond to explicit <code>rtc</code> elements, or to sequences of <code>rt</code> elements implicitly recognised as contained in an anonymous <a class="internalDFN" href="#dfn-ruby-text-container">ruby text container</a>. </li> </ul> Each <dfn id="dfn-ruby-text-container">ruby text container</dfn> is described by zero or more <dfn id="dfn-ruby-text-annotation" title="ruby text annotation">ruby text annotations</dfn> each of which is a DOM range that may contain phrasing content or an <code>rt</code> element, and an annotations range that is a range including all the annotations for that container. A <a class="internalDFN" href="#dfn-ruby-text-container">ruby text container</a> is also known (primarily in a CSS context) as a <dfn id="dfn-ruby-annotation-container">ruby annotation container</dfn>. Furthermore, a ruby element contains <dfn id="dfn-ignored-ruby-content">ignored ruby content</dfn>. Ignored ruby content does not form part of the document's semantics. It consists of some inter-element whitespace and <code>rp</code> elements, the latter of which are used for legacy user agents that do not support ruby at all. The process of <dfn id="dfn-annotation-pairing">annotation pairing</dfn> associates <a class="internalDFN" href="#dfn-ruby-text-annotation" title="ruby text annotation">ruby annotations</a> with <a class="internalDFN" href="#dfn-ruby-base" title="ruby base">ruby bases</a>. Within each <a class="internalDFN" href="#dfn-ruby-segment">ruby segment</a>, each <a class="internalDFN" href="#dfn-ruby-base">ruby base</a> in the <a class="internalDFN" href="#dfn-ruby-base-container">ruby base container</a> is paired with one <a class="internalDFN" href="#dfn-ruby-text-annotation">ruby text annotation</a> from the <a class="internalDFN" href="#dfn-ruby-text-container">ruby text container</a>, in order. If there are not enough <a class="internalDFN" href="#dfn-ruby-text-annotation" title="ruby text annotation">ruby text annotations</a> in a <a class="internalDFN" href="#dfn-ruby-annotation-container">ruby annotation container</a>, the last one is associated with any excess <a class="internalDFN" href="#dfn-ruby-base" title="ruby base">ruby bases</a>. (If there are not any in the <a class="internalDFN" href="#dfn-ruby-annotation-container">ruby annotation container</a>, an anonymous empty one is assumed to exist.) If there are not enough <a class="internalDFN" href="#dfn-ruby-base" title="ruby base">ruby bases</a>, any remaining <a class="internalDFN" href="#dfn-ruby-text-annotation" title="ruby text annotation">ruby text annotations</a> are assumed to be associated with empty, anonymous bases inserted at the end of the <a class="internalDFN" href="#dfn-ruby-base-container">ruby base container</a>. Note that the terms <a class="internalDFN" href="#dfn-ruby-segment">ruby segment</a>, <a class="internalDFN" href="#dfn-ruby-base">ruby base</a>, <a class="internalDFN" href="#dfn-ruby-text-annotation">ruby text annotation</a>, <a class="internalDFN" href="#dfn-ruby-text-container">ruby text container</a>, <a class="internalDFN" href="#dfn-ruby-base-container">ruby base container</a>, and <a class="internalDFN" href="#dfn-ruby-annotation-container">ruby annotation container</a> have their equivalents in <cite>CSS Ruby Module Level 1</cite>. [<cite><a href="#bib-css3-ruby" class="bibref">css3-ruby</a></cite>] Informally, the segmentation and categorisation algorithm below performs a simple set of tasks. First it processes adjacent <code>rb</code> elements, text nodes, and non-ruby elements into a list of bases. Then it processes any number of <code>rtc</code> elements or sequences of <code>rt</code> elements that are considered to automatically map to an anonymous <a class="internalDFN" href="#dfn-ruby-text-container">ruby text container</a>. Put together these data items form a <a class="internalDFN" href="#dfn-ruby-segment">ruby segment</a> 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 <code>ruby</code> 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 <dfn id="dfn-segmentation-and-categorisation-of-ruby" title="segmentation and categorisation of ruby">segmentation and categorisation of content of a <code><a class="internalDFN" href="#dfn-ruby">ruby</a></code></dfn> element is the result that would be obtained from running the following algorithm: <ol> <li> Let <var>root</var> be the <code><a class="internalDFN" href="#dfn-ruby">ruby</a></code> element for which the algorithm is being run. </li> <li>Let <var>index</var> be 0.</li> <li>Let <var>ruby segments</var> be an empty list.</li> <li>Let <var>current bases</var> be an empty list of DOM ranges.</li> <li>Let <var>current bases range</var> be null.</li> <li>Let <var>current bases range start</var> be null.</li> <li>Let <var>current annotations</var> be an empty list of DOM ranges.</li> <li>Let <var>current annotations range</var> be null.</li> <li>Let <var>current annotations range start</var> be null.</li> <li>Let <var>current annotation containers</var> be an empty list.</li> <li>Let <var>current automatic base nodes</var> be an empty list of DOM Nodes.</li> <li>Let <var>current automatic base range start</var> be null.</li> <li> If <var>root</var> has a <code><a class="internalDFN" href="#dfn-ruby">ruby</a></code> element ancestor, then abort these steps. </li> <li> Process a ruby child: If <var>index</var> is equal to or greater than the number of child nodes in <var>root</var>, then run the steps to <a class="internalDFN" href="#dfn-commit-a-ruby-segment">commit a ruby segment</a>, return <var>ruby segments</var>, and abort these steps. </li> <li> Let <var>current child</var> be the <var>index</var>th node in <var>root</var>. </li> <li> If <var>current child</var> is not a <a class="internalDFN" href="#dfn-text">Text</a> node and is not an <a class="internalDFN" href="#dfn-element">Element</a> node, then increment <var>index</var> by one and jump to the step labelled process a ruby child. </li> <li> If <var>current child</var> is an <code><a class="internalDFN" href="#dfn-rp">rp</a></code> element, then increment <var>index</var> by one and jump to the step labelled 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 <code><a class="internalDFN" href="#dfn-rp">rp</a></code> can be processed correctly; semantically they are ignored all the same.) </li> <li> If <var>current child</var> is an <code><a class="internalDFN" href="#dfn-rt">rt</a></code> element, then run these substeps: <ol> <li>Run the steps to <a class="internalDFN" href="#dfn-commit-an-automatic-base">commit an automatic base</a>.</li> <li>Run the steps to <a class="internalDFN" href="#dfn-commit-the-base-range">commit the base range</a>.</li> <li> If <var>current annotations</var> is empty, set <var>current annotations range start</var> to the value of <var>index</var>. </li> <li> Create a new DOM range whose start is the boundary point (<var>root</var>, <var>index</var>) and whose end is the boundary point (<var>root</var>, <var>index</var> plus one), and append it at the end of <var>current annotations</var>. </li> <li> Increment <var>index</var> by one and jump to the step labelled process a ruby child. </li> </ol> </li> <li> If <var>current child</var> is an <code><a class="internalDFN" href="#dfn-rtc">rtc</a></code> element, then run these substeps: <ol> <li>Run the steps to <a class="internalDFN" href="#dfn-commit-an-automatic-base">commit an automatic base</a>.</li> <li>Run the steps to <a class="internalDFN" href="#dfn-commit-the-base-range">commit the base range</a>.</li> <li>Run the steps to <a class="internalDFN" href="#dfn-commit-current-annotations">commit current annotations</a>.</li> <li> Create a new <a class="internalDFN" href="#dfn-ruby-annotation-container">ruby annotation container</a>. It is described by the list of annotations returned by running the steps to <a class="internalDFN" href="#dfn-process-an-rtc-element">process an <code>rtc</code> element</a> and a DOM range whose start is the boundary point (<var>root</var>, <var>index</var>) and whose end is the boundary point (<var>root</var>, <var>index</var> plus one). Append this new <a class="internalDFN" href="#dfn-ruby-annotation-container">ruby annotation container</a> at the end of <var>current annotation containers</var>. </li> <li> Increment <var>index</var> by one and jump to the step labelled process a ruby child. </li> </ol> </li> <li> If <var>current child</var> is a <a class="internalDFN" href="#dfn-text">Text</a> node and is <a class="internalDFN" href="#dfn-inter-element-whitespace">inter-element whitespace</a>, then run these substeps: <ol> <li> If <var>current annotations</var> is not empty, increment <var>index</var> by one and jump to the step labelled process a ruby child. </li> <li> Run the following substeps: <ol> <li>Let <var>lookahead index</var> be set to the value of <var>index</var>.</li> <li>Peek ahead: Increment <var>lookahead index</var> by one.</li> <li> If <var>lookahead index</var> is equal to or greater than the number of child nodes in <var>root</var>, then abort these substeps. </li> <li> Let <var>peek child</var> be the <var>lookahead index</var>th node in <var>root</var>. </li> <li> If <var>peek child</var> is a <a class="internalDFN" href="#dfn-text">Text</a> node and is <a class="internalDFN" href="#dfn-inter-element-whitespace">inter-element whitespace</a>, then jump to the step labelled peek ahead. </li> <li> If <var>peek child</var> is an <code><a class="internalDFN" href="#dfn-rt">rt</a></code> element, an <code><a class="internalDFN" href="#dfn-rtc">rtc</a></code> element, or an <code><a class="internalDFN" href="#dfn-rp">rp</a></code> element, then set <var>index</var> to the value of <var>lookahead index</var> and jump to the step labelled process a ruby child. </li> </ol> </li> </ol> </li> <li> If <var>current annotations</var> is not empty or if <var>current annotation containers</var> is not empty, then run the steps to <a class="internalDFN" href="#dfn-commit-a-ruby-segment">commit a ruby segment</a>. </li> <li> If <var>current child</var> is an <code><a class="internalDFN" href="#dfn-rb">rb</a></code> element, then run these substeps: <ol> <li>Run the steps to <a class="internalDFN" href="#dfn-commit-an-automatic-base">commit an automatic base</a>.</li> <li> If <var>current bases</var> is empty, then set <var>current bases range start</var> to the value of <var>index</var>. </li> <li> Create a new DOM range whose start is the boundary point (<var>root</var>, <var>index</var>) and whose end is the boundary point (<var>root</var>, <var>index</var> plus one), and append it at the end of <var>current bases</var>. </li> <li> Increment <var>index</var> by one and jump to the step labelled process a ruby child. </li> </ol> </li> <li> If <var>current automatic base nodes</var> is empty, set <var>current automatic base range start</var> to the value of <var>index</var>. </li> <li> Append <var>current child</var> at the end of <var>current automatic base nodes</var>. </li> <li> Increment <var>index</var> by one and jump to the step labelled process a ruby child. </li> </ol> When the steps above say to <dfn id="dfn-commit-a-ruby-segment">commit a ruby segment</dfn>, it means to run the following steps at that point in the algorithm: <ol> <li>Run the steps to <a class="internalDFN" href="#dfn-commit-an-automatic-base">commit an automatic base</a>.</li> <li> If <var>current bases</var>, <var>current annotations</var>, and <var>current annotation containers</var> are all empty, abort these steps. </li> <li>Run the steps to <a class="internalDFN" href="#dfn-commit-the-base-range">commit the base range</a>.</li> <li>Run the steps to <a class="internalDFN" href="#dfn-commit-current-annotations">commit current annotations</a>.</li> <li> Create a new <a class="internalDFN" href="#dfn-ruby-segment">ruby segment</a>. It is described by a list of bases set to <var>current bases</var>, a base DOM range set to <var>current bases range</var>, and a first and second <a class="internalDFN" href="#dfn-ruby-annotation-container" title="ruby annotation container">ruby annotation containers</a> that are respectively the first and second items of the <var>current annotation containers</var> list. Append this new <a class="internalDFN" href="#dfn-ruby-segment">ruby segment</a> at the end of <var>ruby segments</var>. </li> <li>Let <var>current bases</var> be an empty list.</li> <li>Let <var>current bases range</var> be null.</li> <li>Let <var>current bases range start</var> be null.</li> <li>Let <var>current annotation containers</var> be an empty list.</li> </ol> When the steps above say to <dfn id="dfn-commit-the-base-range">commit the base range</dfn>, it means to run the following steps at that point in the algorithm: <ol> <li>If <var>current bases</var> is empty, abort these steps.</li> <li>If <var>current bases range</var> is not null, abort these steps.</li> <li> Let <var>current bases range</var> be a DOM range whose start is the boundary point (<var>root</var>, <var>current bases range start</var>) and whose end is the boundary point (<var>root</var>, <var>index</var>). </li> </ol> When the steps above say to <dfn id="dfn-commit-current-annotations">commit current annotations</dfn>, it means to run the following steps at that point in the algorithm: <ol> <li> If <var>current annotations</var> is not empty and <var>current annotations range</var> is null let <var>current annotations range</var> be a DOM range whose start is the boundary point (<var>root</var>, <var>current annotations range start</var>) and whose end is the boundary point (<var>root</var>, <var>index</var>). </li> <li> If <var>current annotations</var> is not empty, create a new <a class="internalDFN" href="#dfn-ruby-annotation-container">ruby annotation container</a>. It is described by an annotations list set to <var>current annotations</var> and a range set to <var>current annotations range</var>. Append this new <a class="internalDFN" href="#dfn-ruby-annotation-container">ruby annotation container</a> at the end of <var>current annotation containers</var>. </li> <li>Let <var>current annotations</var> be an empty list of DOM ranges.</li> <li>Let <var>current annotations range</var> be null.</li> <li>Let <var>current annotations range start</var> be null.</li> </ol> When the steps above say to <dfn id="dfn-commit-an-automatic-base">commit an automatic base</dfn>, it means to run the following steps at that point in the algorithm: <ol> <li> If <var>current automatic base nodes</var> is empty, abort these steps. </li> <li> If <var>current automatic base nodes</var> contains nodes that are not <a class="internalDFN" href="#dfn-text">Text</a> nodes, or <a class="internalDFN" href="#dfn-text">Text</a> nodes that are not <a class="internalDFN" href="#dfn-inter-element-whitespace">inter-element whitespace</a>, then run these substeps: <ol> <li> It <var>current bases</var> is empty, set <var>current bases range start</var> to the value of <var>current automatic base range start</var>. </li> <li> Create a new DOM range whose start is the boundary point (<var>root</var>, <var>current automatic base range start</var>) and whose end is the boundary point (<var>root</var>, <var>index</var>), and append it at the end of <var>current bases</var>. </li> </ol> </li><li>Let <var>current automatic base nodes</var> be an empty list of DOM Nodes.</li> <li>Let <var>current automatic base range start</var> be null.</li> </ol> </section> <section id="the-rb-element"> <h2 id="h2_the-rb-element" role="heading" aria-level="1">4. The <dfn id="dfn-rb"><code>rb</code></dfn> element</h2> <dl class="element"> <dt>Categories:</dt> <dd>None.</dd> <dt> Contexts in which this element can be used: </dt> <dd>As a child of a <code>ruby</code> element.</dd> <dt>Content model:</dt> <dd>Phrasing content.</dd> <dt>Content attributes:</dt> <dd>Global attributes</dd> <dt>DOM interface:</dt> <dd>Uses <code>HTMLElement</code>.</dd> </dl> The <code>rb</code> element marks the base text component of a ruby annotation. When it is the child of a <code>ruby</code> element, it doesn't represent anything itself, but its parent <code>ruby</code> element uses it as part of determining what it represents. <div class="impl"> An <code>rb</code> element that is not a child of a <code>ruby</code> element represents the same thing as its children. </div> </section> <section id="the-rt-element"> <h2 id="h2_the-rt-element" role="heading" aria-level="1">5. The <dfn id="dfn-rt"><code>rt</code></dfn> element</h2> <dl class="element"> <dt>Categories:</dt> <dd>None.</dd> <dt> Contexts in which this element can be used: </dt> <dd>As a child of a <code>ruby</code> or of an <code>rtc</code> element.</dd> <dt>Content model:</dt> <dd>Phrasing content.</dd> <dt>Content attributes:</dt> <dd>Global attributes</dd> <dt>DOM interface:</dt> <dd>Uses <code>HTMLElement</code>.</dd> </dl> The <code>rt</code> element marks the ruby text component of a ruby annotation. When it is the child of a <code>ruby</code> element or of an <code>rtc</code> element that is itself the child of a <code>ruby</code> element, it doesn't represent anything itself, but its ancestor <code>ruby</code> element uses it as part of determining what it represents. <div class="impl"> An <code>rt</code> element that is not a child of a <code>ruby</code> element or of an <code>rtc</code> element that is itself the child of a <code>ruby</code> element represents the same thing as its children. </div> </section> <section id="the-rtc-element"> <h2 id="h2_the-rtc-element" role="heading" aria-level="1">6. The <dfn id="dfn-rtc"><code>rtc</code></dfn> element</h2> <dl class="element"> <dt>Categories:</dt> <dd>None.</dd> <dt> Contexts in which this element can be used: </dt> <dd>As a child of a <code>ruby</code> element.</dd> <dt>Content model:</dt> <dd>Phrasing content.</dd> <dt>Content attributes:</dt> <dd>Global attributes</dd> <dt>DOM interface:</dt> <dd>Uses <code>HTMLElement</code>.</dd> </dl> The <code>rtc</code> element marks a <a class="internalDFN" href="#dfn-ruby-text-container">ruby text container</a> for ruby text components in a ruby annotation. When it is the child of a <code>ruby</code> element it doesn't represent anything itself, but its parent <code>ruby</code> element uses it as part of determining what it represents. <div class="impl"> An <code>rtc</code> element that is not a child of a <code>ruby</code> element represents the same thing as its children. </div> When an <code><a class="internalDFN" href="#dfn-rtc">rtc</a></code> element is processed as part of the segmentation and categorisation of content for a <code><a class="internalDFN" href="#dfn-ruby">ruby</a></code> element, the following algorithm defines how to <dfn id="dfn-process-an-rtc-element">process an <code><a class="internalDFN" href="#dfn-rtc">rtc</a></code> element</dfn>: <ol> <li> Let <var>root</var> be the <code><a class="internalDFN" href="#dfn-rtc">rtc</a></code> element for which the algorithm is being run. </li> <li>Let <var>index</var> be 0.</li> <li>Let <var>annotations</var> be an empty list of DOM ranges.</li> <li>Let <var>current automatic annotation nodes</var> be an empty list of DOM nodes.</li> <li>Let <var>current automatic annotation range start</var> be null.</li> <li> Process an rtc child: If <var>index</var> is equal to or greater than the number of child nodes in <var>root</var>, then run the steps to <a class="internalDFN" href="#dfn-commit-an-automatic-annotation">commit an automatic annotation</a>, return <var>annotations</var>, and abort these steps. </li> <li> Let <var>current child</var> be the <var>index</var>th node in <var>root</var>. </li> <li> If <var>current child</var> is an <code><a class="internalDFN" href="#dfn-rt">rt</a></code> element, then run these substeps: <ol> <li>Run the steps to <a class="internalDFN" href="#dfn-commit-an-automatic-annotation">commit an automatic annotation</a>.</li> <li> Create a new DOM range whose start is the boundary point (<var>root</var>, <var>index</var>) and whose end is the boundary point (<var>root</var>, <var>index</var> plus one), and append it at the end of <var>annotations</var>. </li> <li> Increment <var>index</var> by one and jump to the step labelled process an rtc child. </li> </ol> </li> <li> If <var>current automatic annotation nodes</var> is empty, set <var>current automatic annotation range start</var> to the value of <var>index</var>. </li> <li> Append <var>current child</var> at the end of <var>current automatic annotation nodes</var>. </li> <li> Increment <var>index</var> by one and jump to the step labelled process an rtc child. </li> </ol> When the steps above say to <dfn id="dfn-commit-an-automatic-annotation">commit an automatic annotation</dfn>, it means to run the following steps at that point in the algorithm: <ol> <li> If <var>current automatic annotation nodes</var> is empty, abort these steps. </li> <li> If <var>current automatic annotation nodes</var> contains nodes that are not <a class="internalDFN" href="#dfn-text">Text</a> nodes, or <a class="internalDFN" href="#dfn-text">Text</a> nodes that are not <a class="internalDFN" href="#dfn-inter-element-whitespace">inter-element whitespace</a>, then create a new DOM range whose start is the boundary point (<var>root</var>, <var>current automatic annotation range start</var>) and whose end is the boundary point (<var>root</var>, <var>index</var>), and append it at the end of <var>annotations</var>. </li> <li>Let <var>current automatic annotation nodes</var> be an empty list of DOM nodes.</li> <li>Let <var>current automatic annotation range start</var> be null.</li> </ol> </section> <section id="the-rp-element"> <h2 id="h2_the-rp-element" role="heading" aria-level="1">7. The <dfn id="dfn-rp"><code>rp</code></dfn> element</h2> <dl class="element"> <dt>Categories:</dt> <dd>None.</dd> <dt> Contexts in which this element can be used: </dt> <dd> As a child of a <code>ruby</code> element, either immediately before or immediately after an <code>rt</code> or <code>rtc</code> element. </dd> <dt>Content model:</dt> <dd>Phrasing content.</dd> <dt>Content attributes:</dt> <dd>Global attributes</dd> <dt>DOM interface:</dt> <dd>Uses <code>HTMLElement</code>.</dd> </dl> The <code>rp</code> 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 <code>rp</code> elements are typically not displayed by user agents which do support ruby annotations An <code>rp</code> element that is a child of a <code>ruby</code> element represents nothing. An <code>rp</code> element whose parent element is not a <code>ruby</code> element represents its children. The example shown previously, in which each ideograph in the text 漢字 is annotated with its phonetic reading, could be expanded to use <code>rp</code> 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): <div class="example"><div class="example-title">Example 13</div><pre style="" class="example highlight prettyprint prettyprinted" lang="ja">... <ruby> 漢 <rb>字</rb> <rp> (</rp> <rt>かん</rt> <rt>じ</rt> <rp>) </rp> </ruby> ...</pre></div> In conforming user agents the rendering would be as above, but in user agents that do not support ruby, the rendering would be: <div class="example"><div class="example-title">Example 14</div><pre style="" class="example highlight prettyprint prettyprinted" lang="ja">... 漢字 (かんじ) ...</pre></div> When there are multiple annotations for a segment, <code>rp</code> 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 using double-sided annotations, but this time with <code>rp</code> elements as well: <div class="example"><div class="example-title">Example 15</div><pre style="" class="example highlight prettyprint prettyprinted"><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></pre></div> This would make the example render as follows in non-ruby-capable user agents: <div class="example"><div class="example-title">Example 16</div><pre style="" class="example highlight prettyprint prettyprinted">♥: Heart, Cœur. ☘: Shamrock, Trèfle. ✶: Star, Étoile.</pre></div> </section> <section id="rendering"> <h2 id="h2_rendering" role="heading" aria-level="1">8. Rendering</h2> Additions to the default style sheet are made by <cite>CSS Ruby Module Level 1</cite>. [<cite><a href="#bib-css3-ruby" class="bibref">css3-ruby</a></cite>] </section> <section id="acknowledgements"> <h2 id="h2_acknowledgements" role="heading" aria-level="1">9. Acknowledgements</h2> Much of this document is deeply indebted to Fantasai and Richard Ishida. </section> <section rel="bibo:Chapter" resource="#ref" typeof="bibo:Chapter" id="references" class="appendix"><h2 id="h2_references" role="heading" aria-level="1">A. References</h2><section rel="bibo:Chapter" resource="#ref" typeof="bibo:Chapter" id="normative-references"><h3 id="h3_normative-references" role="heading" aria-level="2">A.1 Normative references</h3><dl about="" class="bibliography"><dt id="bib-DOM">[DOM]</dt><dd rel="dcterms:requires">Anne van Kesteren; Aryeh Gregor; Ms2ger. <a href="https://dom.spec.whatwg.org"><cite>DOM Standard</cite></a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org">http://dom.spec.whatwg.org</a> </dd><dt id="bib-HTML5">[HTML5]</dt><dd rel="dcterms:requires">Robin Berjon; Steve Faulkner; Travis Leithead; Erika Doyle Navara; Theresa O'Connor; Silvia Pfeiffer. <a href="https://www.w3.org/TR/html5/"><cite>HTML5</cite></a>. 6 August 2013. W3C Candidate Recommendation. URL: <a href="https://www.w3.org/TR/html5/">http://www.w3.org/TR/html5/</a> </dd></dl></section><section rel="bibo:Chapter" resource="#ref" typeof="bibo:Chapter" id="informative-references"><h3 id="h3_informative-references" role="heading" aria-level="2">A.2 Informative references</h3><dl about="" class="bibliography"><dt id="bib-JLREQ">[JLREQ]</dt><dd rel="dcterms:references">Yasuhiro Anan; Hiroyuki Chiba; Junzaburo Edamoto; Richard Ishida; Tatsuo KOBAYASHI; Toshi Kobayashi; Kenzou Onozawa; Felix Sasaki; Seiichi Kato; Hajime Shiozawa et al. <a href="https://www.w3.org/TR/jlreq/"><cite>Requirements for Japanese Text Layout</cite></a>. 3 April 2012. W3C Note. URL: <a href="https://www.w3.org/TR/jlreq/">http://www.w3.org/TR/jlreq/</a> </dd><dt id="bib-WEBVTT">[WEBVTT]</dt><dd rel="dcterms:references">Ian Hickson. <a href="http://dev.w3.org/html5/webvtt/"><cite>WebVTT</cite></a>. 21 August 2012. W3C Working Draft. URL: <a href="http://dev.w3.org/html5/webvtt/">http://dev.w3.org/html5/webvtt/</a> </dd><dt id="bib-css3-ruby">[css3-ruby]</dt><dd rel="dcterms:references">Elika Etemad; Koji Ishii; Richard Ishida. <a href="https://www.w3.org/TR/css3-ruby/"><cite>CSS Ruby Module Level 1</cite></a>. 19 September 2013. W3C Working Draft. URL: <a href="https://www.w3.org/TR/css3-ruby/">http://www.w3.org/TR/css3-ruby/</a> </dd><dt id="bib-ruby-use-cases">[ruby-use-cases]</dt><dd rel="dcterms:references">Richard Ishida. <a href="https://www.w3.org/TR/ruby-use-cases/"><cite>Use Cases & Exploratory Approaches for Ruby Markup</cite></a>. 8 October 2013. W3C Note. URL: <a href="https://www.w3.org/TR/ruby-use-cases/">http://www.w3.org/TR/ruby-use-cases/</a> </dd></dl></section></section><script src="https://www.w3.org/scripts/TR/fixup.js"></script></body></html>

CINXE.COM

W3C HTML Ruby Markup Extensions