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
141
142
143
144
145
146
147
148
|
---
title: '<rb> : l''élément de base ruby'
slug: Web/HTML/Element/rb
tags:
- Element
- HTML
- Reference
- Ruby
translation_of: Web/HTML/Element/rb
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary">L'élément de <strong>base ruby (<code><rb></code>) </strong>est utilisé afin de délimiter le composant texte de base d'une annotation {{HTMLElement("ruby")}}. Autrement dit, le texte qui est annoté.</span> Un élément <code><rb></code> devrait encadrer chaque segment atomique du texte de base.</p>
<div class="hidden">\{{EmbedInteractiveExample("pages/tabbed/rb.html", "tabbed-standard")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<h2 id="Attributs">Attributs</h2>
<p>Seuls les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> peuvent être utilisés sur cet élément.</p>
<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
<ul>
<li>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 <code><rb></code> permet de séparer chaque segment du texte de base ruby.</li>
<li>Bien que <code><rb></code> 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.</li>
<li>Il faut inclure un élément {{htmlelement("rt")}} pour chaque segment de base <code><rb></code> qu'on souhaite annoter.</li>
</ul>
<h2 id="Exemples">Exemples</h2>
<p>Dans cet exemple, on fournit une annotation pour le caractère original correspondant à "Kanji" :</p>
<pre class="brush: html"><ruby>
<rb>漢<rb>字
<rp>(</rp><rt>kan<rt>ji<rp>)</rp>
</ruby></pre>
<p>On voit ici que deux éléments <code><rb></code> 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")}}.</p>
<p>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 <code><rb></code> :</p>
<pre class="brush: html"><ruby>
漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby></pre>
<div class="hidden">
<div id="with-ruby">
<pre class="brush: html"><ruby> <rb>漢<rb>字 <rp>(</rp><rt>kan<rt>ji<rp>)</rp> </ruby>
</pre>
<pre class="brush: css">body {
font-size: 22px;
}</pre>
</div>
</div>
<p>Voici le résultat obtenu :</p>
<p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p>
<p>Pour un navigateur qui ne prend pas en charge les annotations ruby, voici à quoi aurait ressemblé le résultat :</p>
<div id="without-ruby">
<div class="hidden">
<pre class="brush: html">漢字 (kan ji)</pre>
<pre class="brush: css">body {
font-size: 22px;
}
</pre>
</div>
</div>
<p>{{EmbedLiveSample("without-ruby", "100%", 60)}}</p>
<div class="note">
<p><strong>Note :</strong> Voir l'article sur l'élément {{HTMLElement("ruby")}} pour de plus amples exemples.</p>
</div>
<h2 id="Résumé_technique">Résumé technique</h2>
<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>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rb-element', '<rb>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
<p>{{Compat("html.elements.rb")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{HTMLElement("ruby")}}</li>
<li>{{HTMLElement("rt")}}</li>
<li>{{HTMLElement("rp")}}</li>
<li>
<p>{{HTMLElement("rtc")}}</p>
</li>
</ul>
|
