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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
---
title: '<rb> : l''élément de base ruby'
slug: Web/HTML/Element/rb
tags:
- Element
- HTML
- Reference
- Ruby
translation_of: Web/HTML/Element/rb
---
{{HTMLRef}}
L'élément de **base ruby (`<rb>`)** est utilisé afin de délimiter le composant texte de base d'une annotation {{HTMLElement("ruby")}}. Autrement dit, le texte qui est annoté. Un élément `<rb>` devrait encadrer chaque segment atomique du texte de base.
## Attributs
Seuls les [attributs universels](/fr/docs/Web/HTML/Attributs_universels) peuvent être utilisés sur cet élément.
## Notes d'utilisation
- Les annotations ruby sont utilisées afin d'afficher la prononciation pour les caractères d'Asie orientale tels que les caractères japonais furigana ou les caractères taïwanais bopomofo. L'élément `<rb>` permet de séparer chaque segment du texte de base ruby.
- Bien que `<rb>` ne soit pas un élément vide, il est courant de n'inclure que la balise d'ouverture de chaque élément afin de simplifier le balisage dédié aux annotations ruby.
- Il faut inclure un élément {{htmlelement("rt")}} pour chaque segment de base `<rb>` qu'on souhaite annoter.
## Exemples
Dans cet exemple, on fournit une annotation pour le caractère original correspondant à "Kanji" :
```html
<ruby>
<rb>漢<rb>字
<rp>(</rp><rt>kan<rt>ji<rp>)</rp>
</ruby>
```
On voit ici que deux éléments `<rb>` sont inclus et permettent de délimiter les deux segments du texte de base. Pour l'annotation, chaque partie correspondante est délimitée par un élément {{htmlelement("rt")}}.
On aurait également pu écrire cet exemple avec les deux parties du texte de base complètement séparées. Dans ce cas, il n'aurait pas été nécessaire d'inclure les éléments `<rb>` :
```html
<ruby>
漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
```
### Avec prise en charge de ruby
```html hidden
<ruby> <rb>漢<rb>字 <rp>(</rp><rt>kan<rt>ji<rp>)</rp> </ruby>
```
```css hidden
body {
font-size: 22px;
}
```
Voici le résultat obtenu :
{{EmbedLiveSample("Avec_prise_en_charge_de_ruby", "100%", 60)}}
Pour un navigateur qui ne prend pas en charge les annotations ruby, voici à quoi aurait ressemblé le résultat :
### Sans prise en charge de ruby
```html hidden
漢字 (kan ji)
```
```css hidden
body {
font-size: 22px;
}
```
{{EmbedLiveSample("Sans_prise_en_charge_de_ruby", "100%", 60)}}
> **Note :** Voir l'article sur l'élément {{HTMLElement("ruby")}} pour de plus amples exemples.
## Résumé technique
<table class="properties">
<tbody>
<tr>
<th scope="row">
<a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu"
>Catégories de contenu</a
>
</th>
<td>Aucune.</td>
</tr>
<tr>
<th scope="row">Contenu autorisé</th>
<td>
Cet élément peut être l'élément fils d'un élément
{{htmlelement("ruby")}}.
</td>
</tr>
<tr>
<th scope="row">Omission de balise</th>
<td>
La balise de fin peut être omise si l'élément est immédiatement suivi
d'un élément {{HTMLElement("rt")}}, {{HTMLElement("rtc")}}
ou {{HTMLElement("rp")}} ou encore par un autre élément
<code><rb></code> ou s'il n'y a plus de contenu dans l'élément
parent.
</td>
</tr>
<tr>
<th scope="row">Éléments parents autorisés</th>
<td>Un élément {{HTMLElement("ruby")}}.</td>
</tr>
<tr>
<th scope="row">Rôles ARIA autorisés</th>
<td>N'importe quel rôle</td>
</tr>
<tr>
<th scope="row">Interface DOM</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
## Spécifications
| Spécification | État | Commentaires |
| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rb-element', '<rb>')}} | {{Spec2('HTML5 W3C')}} | |
## Compatibilité des navigateurs
{{Compat("html.elements.rb")}}
## Voir aussi
- {{HTMLElement("ruby")}}
- {{HTMLElement("rt")}}
- {{HTMLElement("rp")}}
- {{HTMLElement("rtc")}}
|
