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