Annotation of html5/spec/the-ruby-element.html, revision 1.213
1.203 sruby 1: <!DOCTYPE html><html lang="en-US-x-Hixie"><meta charset="utf-8"><title>4.6.20 The ruby element — HTML5</title><style type="text/css">
1.199 sruby 2:
3: .applies thead th > * { display: block; }
4: .applies thead code { display: block; }
5: .applies tbody th { white-space: nowrap; }
6: .applies td { text-align: center; }
7: .applies .yes { background: yellow; }
8:
9: .matrix, .matrix td { border: hidden; text-align: right; }
10: .matrix { margin-left: 2em; }
11:
12: .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
13: .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
14: .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
15:
16: td.eg { border-width: thin; text-align: center; }
17:
18: #table-example-1 { border: solid thin; border-collapse: collapse; margin-left: 3em; }
19: #table-example-1 * { font-family: "Essays1743", serif; line-height: 1.01em; }
20: #table-example-1 caption { padding-bottom: 0.5em; }
21: #table-example-1 thead, #table-example-1 tbody { border: none; }
22: #table-example-1 th, #table-example-1 td { border: solid thin; }
23: #table-example-1 th { font-weight: normal; }
24: #table-example-1 td { border-style: none solid; vertical-align: top; }
25: #table-example-1 th { padding: 0.5em; vertical-align: middle; text-align: center; }
26: #table-example-1 tbody tr:first-child td { padding-top: 0.5em; }
27: #table-example-1 tbody tr:last-child td { padding-bottom: 1.5em; }
28: #table-example-1 tbody td:first-child { padding-left: 2.5em; padding-right: 0; width: 9em; }
29: #table-example-1 tbody td:first-child::after { content: leader(". "); }
30: #table-example-1 tbody td { padding-left: 2em; padding-right: 2em; }
31: #table-example-1 tbody td:first-child + td { width: 10em; }
32: #table-example-1 tbody td:first-child + td ~ td { width: 2.5em; }
33: #table-example-1 tbody td:first-child + td + td + td ~ td { width: 1.25em; }
34:
35: .apple-table-examples { border: none; border-collapse: separate; border-spacing: 1.5em 0em; width: 40em; margin-left: 3em; }
36: .apple-table-examples * { font-family: "Times", serif; }
37: .apple-table-examples td, .apple-table-examples th { border: none; white-space: nowrap; padding-top: 0; padding-bottom: 0; }
38: .apple-table-examples tbody th:first-child { border-left: none; width: 100%; }
39: .apple-table-examples thead th:first-child ~ th { font-size: smaller; font-weight: bolder; border-bottom: solid 2px; text-align: center; }
40: .apple-table-examples tbody th::after, .apple-table-examples tfoot th::after { content: leader(". ") }
41: .apple-table-examples tbody th, .apple-table-examples tfoot th { font: inherit; text-align: left; }
42: .apple-table-examples td { text-align: right; vertical-align: top; }
43: .apple-table-examples.e1 tbody tr:last-child td { border-bottom: solid 1px; }
44: .apple-table-examples.e1 tbody + tbody tr:last-child td { border-bottom: double 3px; }
45: .apple-table-examples.e2 th[scope=row] { padding-left: 1em; }
46: .apple-table-examples sup { line-height: 0; }
47:
48: .details-example img { vertical-align: top; }
49:
50: #base64-table {
51: white-space: nowrap;
52: font-size: 0.6em;
53: column-width: 6em;
54: column-count: 5;
55: column-gap: 1em;
56: -moz-column-width: 6em;
57: -moz-column-count: 5;
58: -moz-column-gap: 1em;
59: -webkit-column-width: 6em;
60: -webkit-column-count: 5;
61: -webkit-column-gap: 1em;
62: }
63: #base64-table thead { display: none; }
64: #base64-table * { border: none; }
65: #base64-table tbody td:first-child:after { content: ':'; }
66: #base64-table tbody td:last-child { text-align: right; }
67:
68: #named-character-references-table {
69: white-space: nowrap;
70: font-size: 0.6em;
71: column-width: 30em;
72: column-gap: 1em;
73: -moz-column-width: 30em;
74: -moz-column-gap: 1em;
75: -webkit-column-width: 30em;
76: -webkit-column-gap: 1em;
77: }
78: #named-character-references-table > table > tbody > tr > td:first-child + td,
79: #named-character-references-table > table > tbody > tr > td:last-child { text-align: center; }
80: #named-character-references-table > table > tbody > tr > td:last-child:hover > span { position: absolute; top: auto; left: auto; margin-left: 0.5em; line-height: 1.2; font-size: 5em; border: outset; padding: 0.25em 0.5em; background: white; width: 1.25em; height: auto; text-align: center; }
81: #named-character-references-table > table > tbody > tr#entity-CounterClockwiseContourIntegral > td:first-child { font-size: 0.5em; }
82:
83: .glyph.control { color: red; }
84:
85: @font-face {
86: font-family: 'Essays1743';
1.205 sruby 87: src: url('fonts/Essays1743.ttf');
1.199 sruby 88: }
89: @font-face {
90: font-family: 'Essays1743';
91: font-weight: bold;
1.205 sruby 92: src: url('fonts/Essays1743-Bold.ttf');
1.199 sruby 93: }
94: @font-face {
95: font-family: 'Essays1743';
96: font-style: italic;
1.205 sruby 97: src: url('fonts/Essays1743-Italic.ttf');
1.199 sruby 98: }
99: @font-face {
100: font-family: 'Essays1743';
101: font-style: italic;
102: font-weight: bold;
1.205 sruby 103: src: url('fonts/Essays1743-BoldItalic.ttf');
1.199 sruby 104: }
105:
1.203 sruby 106: </style><link href="data:text/css," id="complete" rel="stylesheet" title="Complete specification"><link href="data:text/css,.impl%20{%20display:%20none;%20}%0Ahtml%20{%20border:%20solid%20yellow;%20}%20.domintro:before%20{%20display:%20none;%20}" id="author" rel="alternate stylesheet" title="Author documentation only"><link href="data:text/css,.impl%20{%20background:%20%23FFEEEE;%20}%20.domintro:before%20{%20background:%20%23FFEEEE;%20}" id="highlight" rel="alternate stylesheet" title="Highlight implementation requirements"><style type="text/css">
1.1 mike 107: pre { margin-left: 2em; white-space: pre-wrap; }
108: h2 { margin: 3em 0 1em 0; }
109: h3 { margin: 2.5em 0 1em 0; }
110: h4 { margin: 2.5em 0 0.75em 0; }
111: h5, h6 { margin: 2.5em 0 1em; }
112: h1 + h2, h1 + h2 + h2 { margin: 0.75em 0 0.75em; }
113: h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }
114: p { margin: 1em 0; }
115: hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }
116: dl, dd { margin-top: 0; margin-bottom: 0; }
117: dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
118: dt + dt { margin-top: 0; }
119: dd dt { margin-top: 0.25em; margin-bottom: 0; }
120: dd p { margin-top: 0; }
121: dd dl + p { margin-top: 1em; }
122: dd table + p { margin-top: 1em; }
123: p + * > li, dd li { margin: 1em 0; }
124: dt, dfn { font-weight: bold; font-style: normal; }
125: i, em { font-style: italic; }
126: dt dfn { font-style: italic; }
127: pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }
128: pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }
129: pre em { font-weight: bolder; font-style: normal; }
130: @media screen { code { color: orangered; } code :link, code :visited { color: inherit; } }
131: var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
132: table { border-collapse: collapse; border-style: hidden hidden none hidden; }
133: table thead, table tbody { border-bottom: solid; }
134: table tbody th:first-child { border-left: solid; }
135: table tbody th { text-align: left; }
136: table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
137: blockquote { margin: 0 0 0 2em; border: 0; padding: 0; font-style: italic; }
138:
139: .bad, .bad *:not(.XXX) { color: gray; border-color: gray; background: transparent; }
140: .matrix, .matrix td { border: none; text-align: right; }
141: .matrix { margin-left: 2em; }
142: .dice-example { border-collapse: collapse; border-style: hidden solid solid hidden; border-width: thin; margin-left: 3em; }
143: .dice-example caption { width: 30em; font-size: smaller; font-style: italic; padding: 0.75em 0; text-align: left; }
144: .dice-example td, .dice-example th { border: solid thin; width: 1.35em; height: 1.05em; text-align: center; padding: 0; }
145:
146: .toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
147: img.extra, p.overview { float: right; }
148: pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; position: relative; }
149: pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
150: pre.idl::before { content: "IDL"; font: bold small sans-serif; padding: 0.5em; background: white; position: absolute; top: 0; margin: -1px 0 0 -4em; width: 1.5em; border: thin solid; border-radius: 0 0 0 0.5em }
151: pre.css { border: solid thin; background: #FFFFEE; color: black; padding: 0.5em 1em; }
152: pre.css:first-line { color: #AAAA50; }
153: dl.domintro { color: green; margin: 2em 0 2em 2em; padding: 0.5em 1em; border: none; background: #DDFFDD; }
154: hr + dl.domintro, div.impl + dl.domintro { margin-top: 2.5em; margin-bottom: 1.5em; }
155: dl.domintro dt, dl.domintro dt * { color: black; text-decoration: none; }
156: dl.domintro dd { margin: 0.5em 0 1em 2em; padding: 0; }
157: dl.domintro dd p { margin: 0.5em 0; }
158: dl.domintro:before { display: table; margin: -1em -0.5em -0.5em auto; width: auto; content: 'This box is non-normative. Implementation requirements are given below this box.'; color: black; font-style: italic; border: solid 2px; background: white; padding: 0 0.25em; }
159: dl.switch { padding-left: 2em; }
160: dl.switch > dt { text-indent: -1.5em; }
161: dl.switch > dt:before { content: '\21AA'; padding: 0 0.5em 0 0; display: inline-block; width: 1em; text-align: right; line-height: 0.5em; }
162: dl.triple { padding: 0 0 0 1em; }
163: dl.triple dt, dl.triple dd { margin: 0; display: inline }
164: dl.triple dt:after { content: ':'; }
165: dl.triple dd:after { content: '\A'; white-space: pre; }
166: .diff-old { text-decoration: line-through; color: silver; background: transparent; }
167: .diff-chg, .diff-new { text-decoration: underline; color: green; background: transparent; }
168: a .diff-new { border-bottom: 1px blue solid; }
169:
1.181 sruby 170: figure.diagrams { border: double black; background: white; padding: 1em; }
171: figure.diagrams img { display: block; margin: 1em auto; }
172:
1.1 mike 173: h2 { page-break-before: always; }
174: h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
175: h1 + h2, hr + h2.no-toc { page-break-before: auto; }
176:
177: p > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]),
1.199 sruby 178: li > span:not([title=""]):not([class="XXX"]):not([class="impl"]):not([class="note"]) { border-bottom: solid #9999CC; }
1.1 mike 179:
180: div.head { margin: 0 0 1em; padding: 1em 0 0 0; }
181: div.head p { margin: 0; }
182: div.head h1 { margin: 0; }
183: div.head .logo { float: right; margin: 0 1em; }
184: div.head .logo img { border: none } /* remove border from top image */
185: div.head dl { margin: 1em 0; }
186: div.head p.copyright, div.head p.alt { font-size: x-small; font-style: oblique; margin: 0; }
187:
188: body > .toc > li { margin-top: 1em; margin-bottom: 1em; }
189: body > .toc.brief > li { margin-top: 0.35em; margin-bottom: 0.35em; }
190: body > .toc > li > * { margin-bottom: 0.5em; }
191: body > .toc > li > * > li > * { margin-bottom: 0.25em; }
192: .toc, .toc li { list-style: none; }
193:
194: .brief { margin-top: 1em; margin-bottom: 1em; line-height: 1.1; }
195: .brief li { margin: 0; padding: 0; }
196: .brief li p { margin: 0; padding: 0; }
197:
198: .category-list { margin-top: -0.75em; margin-bottom: 1em; line-height: 1.5; }
199: .category-list::before { content: '\21D2\A0'; font-size: 1.2em; font-weight: 900; }
200: .category-list li { display: inline; }
201: .category-list li:not(:last-child)::after { content: ', '; }
202: .category-list li > span, .category-list li > a { text-transform: lowercase; }
203: .category-list li * { text-transform: none; } /* don't affect <code> nested in <a> */
204:
205: .XXX { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
206: .XXX > :first-child { margin-top: 0; }
207: p .XXX { line-height: 3em; }
208: .annotation { border: solid thin black; background: #0C479D; color: white; position: relative; margin: 8px 0 20px 0; }
209: .annotation:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 6px -6px -6px 6px; background: #333333; z-index: -1; content: ''; }
210: .annotation :link, .annotation :visited { color: inherit; }
211: .annotation :link:hover, .annotation :visited:hover { background: transparent; }
212: .annotation span { border: none ! important; }
213: .note { color: green; background: transparent; font-family: sans-serif; }
214: .warning { color: red; background: transparent; }
215: .note, .warning { font-weight: bolder; font-style: italic; }
216: .note em, .warning em, .note i, .warning i { font-style: normal; }
217: p.note, div.note { padding: 0.5em 2em; }
218: span.note { padding: 0 2em; }
219: .note p:first-child, .warning p:first-child { margin-top: 0; }
220: .note p:last-child, .warning p:last-child { margin-bottom: 0; }
221: .warning:before { font-style: normal; }
222: p.note:before { content: 'Note: '; }
223: p.warning:before { content: '\26A0 Warning! '; }
224:
225: .bookkeeping:before { display: block; content: 'Bookkeeping details'; font-weight: bolder; font-style: italic; }
226: .bookkeeping { font-size: 0.8em; margin: 2em 0; }
227: .bookkeeping p { margin: 0.5em 2em; display: list-item; list-style: square; }
228: .bookkeeping dt { margin: 0.5em 2em 0; }
229: .bookkeeping dd { margin: 0 3em 0.5em; }
230:
231: h4 { position: relative; z-index: 3; }
232: h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }
233: .element {
234: background: #EEEEFF;
235: color: black;
236: margin: 0 0 1em 0.15em;
237: padding: 0 1em 0.25em 0.75em;
238: border-left: solid #9999FF 0.25em;
239: position: relative;
240: z-index: 1;
241: }
242: .element:before {
243: position: absolute;
244: z-index: 2;
245: top: 0;
246: left: -1.15em;
247: height: 2em;
248: width: 0.9em;
249: background: #EEEEFF;
250: content: ' ';
251: border-style: none none solid solid;
252: border-color: #9999FF;
253: border-width: 0.25em;
254: }
255:
256: .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin-left: 2em; padding-left: 1em; }
257: td > .example:only-child { margin: 0 0 0 0.1em; }
258:
259: ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
260: ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
261: ul.domTree li li { list-style: none; }
262: ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
263: ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
264: ul.domTree span { font-style: italic; font-family: serif; }
265: ul.domTree .t1 code { color: purple; font-weight: bold; }
266: ul.domTree .t2 { font-style: normal; font-family: monospace; }
267: ul.domTree .t2 .name { color: black; font-weight: bold; }
268: ul.domTree .t2 .value { color: blue; font-weight: normal; }
269: ul.domTree .t3 code, .domTree .t4 code, .domTree .t5 code { color: gray; }
270: ul.domTree .t7 code, .domTree .t8 code { color: green; }
271: ul.domTree .t10 code { color: teal; }
272:
273: body.dfnEnabled dfn { cursor: pointer; }
274: .dfnPanel {
275: display: inline;
276: position: absolute;
277: z-index: 10;
278: height: auto;
279: width: auto;
280: padding: 0.5em 0.75em;
281: font: small sans-serif, Droid Sans Fallback;
282: background: #DDDDDD;
283: color: black;
284: border: outset 0.2em;
285: }
286: .dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
287: .dfnPanel :link, .dfnPanel :visited { color: black; }
288: .dfnPanel p { font-weight: bolder; }
289: .dfnPanel * + p { margin-top: 0.25em; }
290: .dfnPanel li { list-style-position: inside; }
291:
292: #configUI { position: absolute; z-index: 20; top: 10em; right: 1em; width: 11em; font-size: small; }
293: #configUI p { margin: 0.5em 0; padding: 0.3em; background: #EEEEEE; color: black; border: inset thin; }
294: #configUI p label { display: block; }
295: #configUI #updateUI, #configUI .loginUI { text-align: center; }
296: #configUI input[type=button] { display: block; margin: auto; }
297:
298: fieldset { margin: 1em; padding: 0.5em 1em; }
299: fieldset > legend + * { margin-top: 0; }
300: fieldset > :last-child { margin-bottom: 0; }
301: fieldset p { margin: 0.5em 0; }
302:
1.207 sruby 303: </style><link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel="stylesheet" type="text/css"><script>
1.1 mike 304: function getCookie(name) {
305: var params = location.search.substr(1).split("&");
306: for (var index = 0; index < params.length; index++) {
307: if (params[index] == name)
308: return "1";
309: var data = params[index].split("=");
310: if (data[0] == name)
311: return unescape(data[1]);
312: }
313: var cookies = document.cookie.split("; ");
314: for (var index = 0; index < cookies.length; index++) {
315: var data = cookies[index].split("=");
316: if (data[0] == name)
317: return unescape(data[1]);
318: }
319: return null;
320: }
1.203 sruby 321: </script><link href="the-mark-element.html" rel="prev" title="4.6.19 The mark element">
322: <link href="index.html#contents" rel="contents" title="Table of contents">
323: <link href="the-rt-element.html" rel="next" title="4.6.21 The rt element">
324: <body class="split chapter" onload="fixBrokenLink();"><div class="head" id="head">
1.1 mike 325: <p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
326:
327: <h1>HTML5</h1>
1.196 sruby 328: <h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
1.213 ! sruby 329: <h2 class="no-num no-toc" id="editor's-draft-date-1-january-1970">Editor's Draft 11 November 2012</h2>
1.85 mike 330: </div>
1.199 sruby 331:
332:
1.203 sruby 333: <nav class="prev_next">
334: <a href="the-mark-element.html">← 4.6.19 The mark element</a> –
335: <a href="index.html#contents">Table of contents</a> –
336: <a href="the-rt-element.html">4.6.21 The rt element →</a>
337: </nav>
1.1 mike 338:
1.85 mike 339: <h4 id="the-ruby-element"><span class="secno">4.6.20 </span>The <dfn><code>ruby</code></dfn> element</h4>
340:
341: <dl class="element"><dt><a href="element-definitions.html#element-dfn-categories" title="element-dfn-categories">Categories</a>:</dt>
1.159 sruby 342: <dd><a href="content-models.html#flow-content-1">Flow content</a>.</dd>
343: <dd><a href="content-models.html#phrasing-content-1">Phrasing content</a>.</dd>
344: <dd><a href="content-models.html#palpable-content-0">Palpable content</a>.</dd>
1.25 mike 345: <dt><a href="element-definitions.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt>
1.159 sruby 346: <dd>Where <a href="content-models.html#phrasing-content-1">phrasing content</a> is expected.</dd>
1.25 mike 347: <dt><a href="element-definitions.html#element-dfn-content-model" title="element-dfn-content-model">Content model</a>:</dt>
1.178 sruby 348: <dd>See prose.</dd>
1.25 mike 349: <dt><a href="element-definitions.html#element-dfn-attributes" title="element-dfn-attributes">Content attributes</a>:</dt>
1.1 mike 350: <dd><a href="global-attributes.html#global-attributes">Global attributes</a></dd>
1.159 sruby 351: <dt><a href="element-definitions.html#element-dfn-dom" title="element-dfn-dom">DOM interface</a>:</dt><!--TOPIC:DOM APIs-->
1.1 mike 352: <dd>Uses <code><a href="elements.html#htmlelement">HTMLElement</a></code>.</dd>
1.159 sruby 353: </dl><!--TOPIC:HTML--><p>The <code><a href="#the-ruby-element">ruby</a></code> element allows one or more spans of
1.1 mike 354: phrasing content to be marked with ruby annotations. Ruby
355: annotations are short runs of text presented alongside base text,
356: primarily used in East Asian typography as a guide for
357: pronunciation or to include other annotations. In Japanese, this
1.85 mike 358: form of typography is also known as <i>furigana</i>.</p>
359:
1.178 sruby 360: <p>The content model of <code><a href="#the-ruby-element">ruby</a></code> elements consists of one
361: or more of the following sequences:</p>
1.85 mike 362:
1.178 sruby 363: <ol class="brief"><li>One or the other of the following:
364: <ul class="brief"><li><a href="content-models.html#phrasing-content-1">Phrasing content</a>, but with no <code><a href="#the-ruby-element">ruby</a></code> elements and with no <code><a href="#the-ruby-element">ruby</a></code> element descendants
1.206 sruby 365: <li>A single <code><a href="#the-ruby-element">ruby</a></code> element that itself has no <code><a href="#the-ruby-element">ruby</a></code> element descendants
1.203 sruby 366: </ul><li>One or the other of the following:
1.178 sruby 367: <ul class="brief"><li>One or more <code><a href="the-rt-element.html#the-rt-element">rt</a></code> elements
1.203 sruby 368: <li>An <code><a href="the-rp-element.html#the-rp-element">rp</a></code> element followed by one or more <code><a href="the-rt-element.html#the-rt-element">rt</a></code> elements, each of which is itself followed by an <code><a href="the-rp-element.html#the-rp-element">rp</a></code> element
369: </ul></ol><!-- ( ( phrasing-content | <ruby> ) ( <rt>+ | <rp> ( <rt> <rp> )+ ) )+ // with further ruby descendant restrictions --><p>The <code><a href="#the-ruby-element">ruby</a></code> and <code><a href="the-rt-element.html#the-rt-element">rt</a></code> elements can be used
1.178 sruby 370: for a variety of kinds of annotations, including in particular those
371: described below. For more details on Japanese Ruby in particular,
372: and how to render Ruby for Japanese, see <cite>Requirements for
1.204 sruby 373: Japanese Text Layout</cite>. <a href="references.html#refsJLREQ">[JLREQ]</a></p>
1.178 sruby 374:
375: <p class="note">At the time of writing, CSS does not yet provide a
376: way to fully control the rendering of the HTML <code><a href="#the-ruby-element">ruby</a></code>
377: element. It is hoped that CSS will be extended to support the styles
378: described below in due course.</p>
379:
380: <!-- examples in the following list are mostly based on those in http://www.w3.org/International/datespace/2010/02/jlreq-examples/ -->
381:
382: <dl><dt>Mono-ruby for individual base characters
383:
1.203 sruby 384: <dd>
1.178 sruby 385:
386: <p>One or more hiragana or katakana characters (the ruby
387: annotation) are placed with each ideographic character (the base
388: text). This is used to provide readings of kanji characters.
389:
1.203 sruby 390: <div class="example"> <!-- B as in BASE -->
1.178 sruby 391: <pre><ruby>B<rt>annotation</ruby></pre>
392: </div>
393:
394: <div class="example">
395: <p>In this example, notice how each annotation corresponds to a single base character.
1.203 sruby 396: <pre><ruby>君<rt>くん</ruby><ruby>子<rt>し</ruby>は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。</pre>
397: <p lang="ja"><ruby>君<rt>くん</ruby><ruby>子<rt>し</ruby>は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。
398: </div>
1.178 sruby 399:
400: </dd>
401:
402:
403: <dt>Mono-ruby for compound words (jukugo)
404:
1.203 sruby 405: <dd>
1.178 sruby 406:
407: <p>This is similar to the previous case: each ideographic
408: character in the compound word (the base text) has its reading
409: given in hiragana or katakana characters (the ruby annotation).
410: The difference is that the base text segments form a compound word
411: rather than being separate from each other.
412:
1.203 sruby 413: <div class="example"> <!-- B as in BASE -->
1.178 sruby 414: <pre><ruby>B<rt>annotation</rt>B<rt>annotation</ruby></pre>
415: </div>
416:
417: <div class="example">
418: <p>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 <code><a href="#the-ruby-element">ruby</a></code> element.</p>
419: <p>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.</p>
1.203 sruby 420: <pre><ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する</pre>
421: <p lang="ja"><ruby>鬼<rt>き</rt>門<rt>もん</ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</ruby>する
1.178 sruby 422:
1.203 sruby 423: </div>
1.178 sruby 424:
425: </dd>
426:
427:
428: <dt>Jukugo-ruby
429:
1.203 sruby 430: <dd>
1.178 sruby 431:
432: <p>This is semantically identical to the previous case (each
433: individual ideographic character in the base compound word has its
434: reading given in an annotation in hiragana or katakana
435: characters), but the rendering is the more complicated Jukugo Ruby
436: rendering.
437:
1.203 sruby 438: <div class="example">
1.178 sruby 439: <p>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.</p>
1.203 sruby 440: <pre><ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する</pre>
1.178 sruby 441: <!-- Once CSS is updated to describe this, invoke the CSS and unhide this -->
442: <!--
443: <p lang=ja><ruby>鬼<rt>き</rt>門<rt>もん</rt></ruby>の<ruby>方<rt>ほう</rt>角<rt>がく</rt></ruby>を<ruby>凝<rt>ぎょう</rt>視<rt>し</rt></ruby>する
444: -->
445: </div>
446:
447: <p class="note">For more details on <a href="http://www.w3.org/TR/jlreq/#positioning_of_jukugoruby">Jukugo
448: Ruby rendering</a>, see Appendix F in the <cite>Requirements for
1.204 sruby 449: Japanese Text Layout</cite>. <a href="references.html#refsJLREQ">[JLREQ]</a></p>
1.178 sruby 450:
451: </dd>
452:
453:
454: <dt>Group ruby for describing meanings
455:
1.203 sruby 456: <dd>
1.178 sruby 457:
458: <p>The annotation describes the meaning of the base text, rather
459: than (or in addition to) the pronunciation. As such, both the base
460: text and the annotation can be multiple characters long.
461:
1.203 sruby 462: <div class="example">
1.178 sruby 463: <pre><ruby>BASE<rt>annotation</ruby></pre>
464: </div>
465:
466: <div class="example">
467: <p>Here a compound ideographic word has its corresponding katakana given as an annotation.
1.203 sruby 468: <pre><ruby>境界面<rt>インターフェース</ruby></pre>
469: <p lang="ja"><ruby>境界面<rt>インターフェース</ruby></div>
1.178 sruby 470:
471: <div class="example">
472: <p>Here a compound ideographic word has its translation in English provided as an annotation.
1.203 sruby 473: <pre><ruby lang="ja">編集者<rt lang="en">editor</ruby></pre>
474: <p><ruby lang="ja">編集者<rt lang="en">editor</ruby></div>
1.178 sruby 475:
476: </dd>
477:
478:
479: <dt>Group ruby for Jukuji readings
480:
1.203 sruby 481: <dd>
1.178 sruby 482:
483: <p>A phonetic reading that corresponds to multiple base
484: characters, because a one-to-one mapping would be difficult. (In
485: English, the words "Colonel" and "Lieutenant" are examples of
486: words where a direct mapping of pronunciation to individual
487: letters is, in some dialects, rather unclear.)
488:
1.203 sruby 489: <div class="example">
1.178 sruby 490: <p>In this example, the name of a species of flowers has a phonetic reading provided using group ruby:
1.203 sruby 491: <pre><ruby>紫陽花<rt>あじさい</ruby></pre>
492: <p lang="ja"><ruby>紫陽花<rt>あじさい</ruby></div>
1.178 sruby 493:
494: </dd>
495:
496:
497: <dt>Text with both phonetic and semantic annotations (double-sided ruby)
498:
1.203 sruby 499: <dd>
1.178 sruby 500:
501: <p>Sometimes, ruby styles described above are combined.
502:
1.203 sruby 503: <div class="example">
1.178 sruby 504: <pre><ruby>BASE<rt>annotation 1<rt>annotation 2</ruby></pre>
505: </div>
506:
507: <div class="example">
508: <pre><ruby><ruby>B<rt>a</rt>A<rt>n</rt>S<rt>t</rt>E<rt>n</rt></ruby><rt>annotation</ruby></pre>
509: </div>
510:
511: <div class="example">
512: <p>Here both a phonetic reading and the meaning are given in ruby annotations. The annotation on the nested <code><a href="#the-ruby-element">ruby</a></code> element gives a mono-ruby phonetic annotation for each base character, while the annotation in the <code><a href="the-rt-element.html#the-rt-element">rt</a></code> element that is a child of the outer <code><a href="#the-ruby-element">ruby</a></code> element gives the meaning using hiragana.
1.203 sruby 513: <pre><ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt>たつみ</rt></ruby>の方角</pre>
514: <p lang="ja"><ruby><ruby>東<rt>とう</rt>南<rt>なん</ruby><rt>たつみ</ruby>の方角
515: </div>
1.178 sruby 516:
517: <div class="example">
518: <p>This is the same example, but the meaning is given in English instead of Japanese:
1.203 sruby 519: <pre><ruby><ruby>東<rt>とう</rt>南<rt>なん</rt></ruby><rt lang=en>Southeast</rt></ruby>の方角</pre>
520: <p lang="ja"><ruby><ruby>東<rt>とう</rt>南<rt>なん</ruby><rt lang="en">Southeast</ruby>の方角
521: </div>
1.178 sruby 522:
523: </dd>
524:
525: </dl><hr><p>Within a <code><a href="#the-ruby-element">ruby</a></code> element that does not have a
526: <code><a href="#the-ruby-element">ruby</a></code> element ancestor, content is segmented and
527: segments are placed into three categories: base text segments,
528: annotation segments, and ignored segments. Ignored segments do not
529: form part of the document's semantics (they consist of some
530: <a href="content-models.html#inter-element-whitespace">inter-element whitespace</a> and <code><a href="the-rp-element.html#the-rp-element">rp</a></code> elements,
531: the latter of which are used for legacy user agents that do not
532: support ruby at all). Base text segments can overlap (with a limit
533: of two segments overlapping any one position in the DOM, and with
534: any segment having an earlier start point than an overlapping
535: segment also having an equal or later end point, and any segment
536: have a later end point than an overlapping segment also having an
537: equal or earlier start point<!-- if anyone can find a better way of
538: phrasing this parenthetical, do let me know! -->). Annotation
539: segments correspond to <code><a href="the-rt-element.html#the-rt-element">rt</a></code> elements. Each annotation
540: segment can be associated with a base text segment, and each base
541: text segment can have annotation segments associated with it. (In a
542: conforming document, each base text segment is associated with at
543: least one annotation segment, and each annotation segment is
544: associated with one base text segment.) A <code><a href="#the-ruby-element">ruby</a></code> element
1.204 sruby 545: <a href="rendering.html#represents">represents</a> the union of the segments of base text it
1.178 sruby 546: contains, along with the mapping from those base text segments to
547: annotation segments. Segments are described in terms of DOM ranges;
1.204 sruby 548: annotation segment ranges always consist of exactly one element. <a href="references.html#refsDOMCORE">[DOMCORE]</a></p>
1.178 sruby 549:
550: <p>At any particular time, the segmentation and categorisation of
551: content of a <code><a href="#the-ruby-element">ruby</a></code> element is the result that would be
552: obtained from running the following algorithm:</p>
553:
554: <ol><li><p>Let <var title="">base text segments</var> be an empty list
555: of base text segments, each potentially with a list of base text
1.203 sruby 556: subsegments.</li>
1.178 sruby 557:
558: <li><p>Let <var title="">annotation segments</var> be an empty list
559: of annotation segments, each potentially being associated with a
1.203 sruby 560: base text segment or subsegment.</li>
1.178 sruby 561:
562: <li><p>Let <var title="">root</var> be the <code><a href="#the-ruby-element">ruby</a></code>
1.203 sruby 563: element for which the algorithm is being run.</li>
1.178 sruby 564:
565: <li><p>If <var title="">root</var> has a <code><a href="#the-ruby-element">ruby</a></code> element
1.203 sruby 566: ancestor, then jump to the step labeled <i>end</i>.</li>
1.178 sruby 567:
1.203 sruby 568: <li><p>Let <var title="">current parent</var> be <var title="">root</var>.</li>
1.178 sruby 569:
1.203 sruby 570: <li><p>Let <var title="">index</var> be 0.</li>
1.178 sruby 571:
1.203 sruby 572: <li><p>Let <var title="">start index</var> be null.</li>
1.178 sruby 573:
1.203 sruby 574: <li><p>Let <var title="">parent start index</var> be null.</li>
1.178 sruby 575:
1.203 sruby 576: <li><p>Let <var title="">current base text</var> be null.</li>
1.178 sruby 577:
578:
579: <!-- This is spaghetti code. If someone can work out a way to
580: phrase this that is as unambiguous but maps more cleanly to
581: structured code, please let me know. -->
582:
583:
584: <li><p><i>Start mode</i>: If <var title="">index</var> is equal to
585: or greater than the number of child nodes in <var title="">current
586: parent</var>, then jump to the step labeled <i>end mode</i>.</p>
587:
1.203 sruby 588: <li><p>If the <var title="">index</var>th node in <var title="">current parent</var> is an <code><a href="the-rt-element.html#the-rt-element">rt</a></code> or
1.178 sruby 589: <code><a href="the-rp-element.html#the-rp-element">rp</a></code> element, jump to the step labeled <i>annotation
1.203 sruby 590: mode</i>.</li>
1.178 sruby 591:
592: <!-- if we get here then the first node in a ruby element or after
593: an <rt> or <rp> is something we want in a base text -->
594:
1.203 sruby 595: <li><p>Set <var title="">start index</var> to the value of <var title="">index</var>.</li>
1.178 sruby 596:
597: <li><p><i>Base mode</i>: If the <var title="">index</var>th node in
598: <var title="">current parent</var> is a <code><a href="#the-ruby-element">ruby</a></code> element,
599: and if <var title="">current parent</var> is the same element as
600: <var title="">root</var>, then <a href="#push-a-ruby-level">push a ruby level</a> and
1.203 sruby 601: then jump to the step labeled <i>start mode</i>.</li>
1.178 sruby 602:
603: <li><p>If the <var title="">index</var>th node in <var title="">current parent</var> is an <code><a href="the-rt-element.html#the-rt-element">rt</a></code> or
604: <code><a href="the-rp-element.html#the-rp-element">rp</a></code> element, then <a href="#set-the-current-base-text">set the current base
605: text</a> and then jump to the step labeled <i>annotation
1.203 sruby 606: mode</i>.</li>
1.178 sruby 607:
1.203 sruby 608: <li><p>Increment <var title="">index</var> by one.</li>
1.178 sruby 609:
610: <li><p><i>Base mode post-increment</i>: If <var title="">index</var> is equal to or greater than the number of
611: child nodes in <var title="">current parent</var>, then jump to the
1.203 sruby 612: step labeled <i>end mode</i>.</li>
1.178 sruby 613:
1.203 sruby 614: <li><p>Jump back to the step labeled <i>base mode</i>.</li>
1.178 sruby 615:
616:
617: <li><p><i>Annotation mode</i>: If the <var title="">index</var>th
618: node in <var title="">current parent</var> is an <code><a href="the-rt-element.html#the-rt-element">rt</a></code>
619: element, then <a href="#push-a-ruby-annotation">push a ruby annotation</a> and jump to the
1.203 sruby 620: step labeled <i>annotation mode increment</i>.</li>
1.178 sruby 621:
622: <li><p>If the <var title="">index</var>th node in <var title="">current parent</var> is an <code><a href="the-rp-element.html#the-rp-element">rp</a></code> element, jump
1.203 sruby 623: to the step labeled <i>annotation mode increment</i>.</li>
1.178 sruby 624:
625: <li><p>If the <var title="">index</var>th node in <var title="">current parent</var> is not a <code><a href="infrastructure.html#text-0">Text</a></code> node, or
626: is a <code><a href="infrastructure.html#text-0">Text</a></code> node that is not <a href="content-models.html#inter-element-whitespace">inter-element
627: whitespace</a>, then jump to the step labeled <i>base
1.203 sruby 628: mode</i>.</li>
1.178 sruby 629:
630: <!-- index points at whitespace -->
631:
632: <li><p><i>Annotation mode increment</i>: Let <var title="">lookahead index</var> be <var title="">index</var> plus
1.203 sruby 633: one.</li>
1.178 sruby 634:
635: <li><p><i>Annotation mode white-space skipper</i>: If <var title="">lookahead index</var> is equal to the number of child
636: nodes in <var title="">current parent</var> then jump to the step
1.203 sruby 637: labeled <i>end mode</i>.</li>
1.178 sruby 638:
639: <li><p>If the <var title="">lookahead index</var>th node in <var title="">current parent</var> is an <code><a href="the-rt-element.html#the-rt-element">rt</a></code> element or an
640: <code><a href="the-rp-element.html#the-rp-element">rp</a></code> element, then set <var title="">index</var> to <var title="">lookahead index</var> and jump to the step labeled
1.203 sruby 641: <i>annotation mode</i>.</li>
1.178 sruby 642:
643: <li><p>If the <var title="">lookahead index</var>th node in <var title="">current parent</var> is not a <code><a href="infrastructure.html#text-0">Text</a></code> node, or
644: is a <code><a href="infrastructure.html#text-0">Text</a></code> node that is not <a href="content-models.html#inter-element-whitespace">inter-element
645: whitespace</a>, then jump to the step labeled <i>base mode</i>
646: (without further incrementing <var title="">index</var>, so the
647: <a href="content-models.html#inter-element-whitespace">inter-element whitespace</a> seen so far becomes part of
1.203 sruby 648: the next base text segment).</li>
1.178 sruby 649:
650: <li><p>Increment <var title="">lookahead index</var> by
1.203 sruby 651: one.</li>
1.178 sruby 652:
653: <li><p>Jump to the step labeled <i>annotation mode white-space
1.203 sruby 654: skipper</i>.</li>
1.178 sruby 655:
656:
657: <li><p><i>End mode</i>: If <var title="">current parent</var> is
658: not the same element as <var title="">root</var>, then <a href="#pop-a-ruby-level">pop a
659: ruby level</a> and jump to the step labeled <i>base mode
1.203 sruby 660: post-increment</i>.</li>
1.178 sruby 661:
662: <li><p><i>End</i>: Return <var title="">base text segments</var>
663: and <var title="">annotation segments</var>. Any content of the
664: <code><a href="#the-ruby-element">ruby</a></code> element not described by segments in either of
1.203 sruby 665: thost lists is implicitly in an <i>ignored segment</i>.</li>
1.178 sruby 666:
667: </ol><p>When the steps above say to <dfn id="set-the-current-base-text">set the current base text</dfn>,
668: it means to run the following steps at that point in the
669: algorithm:</p>
670:
671: <ol><li><p>Let <var title="">text range</var> a DOM range whose <a href="infrastructure.html#concept-range-start" title="concept-range-start">start</a> is the <a href="infrastructure.html#concept-range-bp" title="concept-range-bp">boundary point</a> (<var title="">current parent</var>, <var title="">start index</var>) and
1.203 sruby 672: whose <a href="infrastructure.html#concept-range-end" title="concept-range-end">end</a> is the <a href="infrastructure.html#concept-range-bp" title="concept-range-bp">boundary point</a> (<var title="">current parent</var>, <var title="">index</var>).</li>
1.178 sruby 673:
674: <li><p>Let <var title="">new text segment</var> be a base text
675: segment described by the range <var title="">annotation
676: range</var>.</p>
677:
1.203 sruby 678: <li><p>Add <var title="">new text segment</var> to <var title="">base text segments</var>.</li>
1.178 sruby 679:
1.203 sruby 680: <li><p>Let <var title="">current base text</var> be <var title="">new text segment</var>.</li>
1.178 sruby 681:
1.203 sruby 682: <li><p>Let <var title="">start index</var> be null.</li>
1.178 sruby 683:
684: </ol><p>When the steps above say to <dfn id="push-a-ruby-level">push a ruby level</dfn>, it
685: means to run the following steps at that point in the algorithm:</p>
686:
687: <ol><li><p>Let <var title="">current parent</var> be the <var title="">index</var>th node in <var title="">current
1.203 sruby 688: parent</var>.</li>
1.178 sruby 689:
1.203 sruby 690: <li><p>Let <var title="">index</var> be 0.</li>
1.178 sruby 691:
692: <li><p>Set <var title="">saved start index</var> to the value of
1.203 sruby 693: <var title="">start index</var>.</li>
1.178 sruby 694:
1.203 sruby 695: <li><p>Let <var title="">start index</var> be null.</li>
1.178 sruby 696:
697: </ol><p>When the steps above say to <dfn id="pop-a-ruby-level">pop a ruby level</dfn>, it means
698: to run the following steps at that point in the algorithm:</p>
699:
1.203 sruby 700: <ol><li><p>Let <var title="">index</var> be the position of <var title="">current parent</var> in <var title="">root</var>.</li>
1.178 sruby 701:
1.203 sruby 702: <li><p>Let <var title="">current parent</var> be <var title="">root</var>.</li>
1.178 sruby 703:
1.203 sruby 704: <li><p>Increment <var title="">index</var> by one.</li>
1.178 sruby 705:
706: <li><p>Set <var title="">start index</var> to the value of
1.203 sruby 707: <var title="">saved start index</var>.</li>
1.178 sruby 708:
1.203 sruby 709: <li><p>Let <var title="">saved start index</var> be null.</li>
1.178 sruby 710:
711: </ol><p>When the steps above say to <dfn id="push-a-ruby-annotation">push a ruby annotation</dfn>, it
712: means to run the following steps at that point in the algorithm:</p>
713:
714: <ol><li><p>Let <var title="">rt</var> be the <code><a href="the-rt-element.html#the-rt-element">rt</a></code> element
1.203 sruby 715: that is the <var title="">index</var>th node of <var title="">current parent</var>.</li>
1.178 sruby 716:
717: <li><p>Let <var title="">annotation range</var> a DOM range whose
718: <a href="infrastructure.html#concept-range-start" title="concept-range-start">start</a> is the <a href="infrastructure.html#concept-range-bp" title="concept-range-bp">boundary point</a> (<var title="">current parent</var>, <var title="">index</var>) and whose
719: <a href="infrastructure.html#concept-range-end" title="concept-range-end">end</a> is the <a href="infrastructure.html#concept-range-bp" title="concept-range-bp">boundary point</a> (<var title="">current parent</var>, <var title="">index</var> plus one)
1.203 sruby 720: (i.e. that contains only <var title="">rt</var>).</li>
1.178 sruby 721:
722: <li><p>Let <var title="">new annotation segment</var> be an
723: annotation segment described by the range <var title="">annotation
1.203 sruby 724: range</var>.</li>
1.178 sruby 725:
726: <li><p>If <var title="">current base text</var> is not null,
1.203 sruby 727: associate <var title="">new annotation segment</var> with <var title="">current base text</var>.</li>
1.178 sruby 728:
1.203 sruby 729: <li><p>Add <var title="">new annotation segment</var> to <var title="">annotation segments</var>.</li>
1.178 sruby 730:
731: </ol><div class="example">
1.1 mike 732:
1.159 sruby 733: <!-- this is the hiragana for the word "kanji" ("chinese character") in japanese -->
734: <!-- in japanese, ruby-like typography is called "furigana" -->
1.1 mike 735:
1.203 sruby 736: <p>In this example, each ideograph in the Japanese text <span lang="ja" title="">漢字</span> is annotated with its
1.1 mike 737: reading in hiragana.</p>
738:
739: <pre lang="ja">...
1.203 sruby 740: <ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>
1.1 mike 741: ...</pre>
742:
743: <p>This might be rendered as:</p>
744:
1.159 sruby 745: <p><img alt="The two main ideographs, each with its annotation in hiragana rendered in a smaller font above it." height="78" src="images/sample-ruby-ja.png" width="171"></p>
1.1 mike 746:
1.85 mike 747: </div>
748:
749: <div class="example">
1.1 mike 750:
1.178 sruby 751: <!-- this is the zhuyin fuhao (aka bopomofo) for the word "hanzi" ("chinese character") in traditional chinese, as used in taiwan -->
1.1 mike 752:
753: <p>In this example, each ideograph in the traditional Chinese text
1.203 sruby 754: <span lang="zh-TW" title="">漢字</span> is annotated
1.1 mike 755: with its bopomofo reading.</p>
756:
1.203 sruby 757: <pre lang="zh-TW"><ruby>漢<rt>ㄏㄢˋ</rt>字<rt>ㄗˋ</rt></ruby></pre>
1.1 mike 758:
759: <p>This might be rendered as:</p>
760:
1.159 sruby 761: <p><img alt="The two main ideographs, each with its bopomofo annotation rendered in a smaller font next to it." height="100" src="images/sample-ruby-bopomofo.png" width="78"></p>
1.1 mike 762:
1.85 mike 763: </div>
764:
765: <div class="example">
1.1 mike 766:
1.159 sruby 767: <!-- this is the pinyin for the word "hanzi" ("chinese character") in simplified chinese, as used in mainland china -->
1.1 mike 768:
769: <p>In this example, each ideograph in the simplified Chinese text
1.203 sruby 770: <span lang="zh-CN" title="">汉字</span> is annotated
1.1 mike 771: with its pinyin reading.</p>
772:
1.203 sruby 773: <pre lang="zh-CN">...<ruby>汉<rt>hàn</rt>字<rt>zì</rt></ruby>...</pre>
1.1 mike 774:
775: <p>This might be rendered as:</p>
776:
1.159 sruby 777: <p><img alt="The two main ideographs, each with its pinyin annotation rendered in a smaller font above it." height="79" src="images/sample-ruby-pinyin.png" width="173"></p>
1.1 mike 778:
1.85 mike 779: </div>
780:
1.159 sruby 781: <!-- Note: Examples are 32px/16px Stone Sans Sem ITC TT -->
1.85 mike 782:
1.178 sruby 783: <div class="example">
784:
785: <p>In this more contrived example, the acronym "HTML" has four
786: annotations: one for the whole acronym, briefly describing what it
787: is, one for the letters "HT" expanding them to "Hypertext", one for
788: the letter "M" expanding it to "Markup", and one for the letter "L"
789: expanding it to "Language".</p>
790:
791: <pre><ruby>
792: <ruby>HT<rt>Hypertext</rt>M<rt>Markup</rt>L<rt>Language</rt></ruby>
793: <rt>An abstract language for describing documents and applications
794: </ruby></pre>
795:
796: </div>
797:
1.85 mike 798:
1.203 sruby 799:
Webmaster
![[BACK]](/https/dev.w3.org/cvsweb/icons/back.gif){kind=icon}
Return to the-ruby-element.html CVS log ![[TXT]](/https/dev.w3.org/cvsweb/icons/text.gif){kind=icon}
![[DIR]](/https/dev.w3.org/cvsweb/icons/dir.gif){kind=icon}
Up to [Public] / html5 / spec