-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
106 lines (85 loc) · 2.54 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
---
title: "<rt>: The Ruby Text element"
slug: Web/HTML/Element/rt
page-type: html-element
browser-compat: html.elements.rt
---
{{HTMLSidebar}}
The **`<rt>`** [HTML](/en-US/docs/Web/HTML) element specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for East Asian typography. The `<rt>` element must always be contained within a {{HTMLElement("ruby")}} element.
{{EmbedInteractiveExample("pages/tabbed/rt.html", "tabbed-shorter")}}
See the article about the {{HTMLElement("ruby")}} element for more examples.
## Attributes
This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).
## Examples
### Using ruby annotations
This simple example provides Romaji transliteration for the kanji characters within the {{HTMLElement("ruby")}} element:
```html
<ruby> 漢 <rt>Kan</rt> 字 <rt>ji</rt> </ruby>
```
```css hidden
body {
font-size: 22px;
}
```
#### Result
{{EmbedLiveSample("Using_ruby_annotations", 600, 60)}}
## Technical summary
<table class="properties">
<tbody>
<tr>
<th scope="row">
<a href="/en-US/docs/Web/HTML/Content_categories"
>Content categories</a
>
</th>
<td>None.</td>
</tr>
<tr>
<th scope="row">Permitted content</th>
<td>
<a href="/en-US/docs/Web/HTML/Content_categories#phrasing_content"
>Phrasing content</a
>.
</td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>
The end tag may be omitted if the <code><rt></code> element is
immediately followed by an <code><rt></code> or
{{HTMLElement("rp")}} element, or if there is no more content in
the parent element
</td>
</tr>
<tr>
<th scope="row">Permitted parents</th>
<td>A {{HTMLElement("ruby")}} element.</td>
</tr>
<tr>
<th scope="row">Implicit ARIA role</th>
<td>
<a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
>No corresponding role</a
>
</td>
</tr>
<tr>
<th scope="row">Permitted ARIA roles</th>
<td>Any</td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{HTMLElement("ruby")}}
- {{HTMLElement("rp")}}
- {{HTMLElement("rb")}}
- {{HTMLElement("rtc")}}
- {{CSSXRef("text-transform", "text-transform: full-size-kana")}}