diff options
Diffstat (limited to 'files/fr/web/html/element/rb/index.md')
| -rw-r--r-- | files/fr/web/html/element/rb/index.md | 190 |
1 files changed, 96 insertions, 94 deletions
diff --git a/files/fr/web/html/element/rb/index.md b/files/fr/web/html/element/rb/index.md index 033176d14d..983f583aa2 100644 --- a/files/fr/web/html/element/rb/index.md +++ b/files/fr/web/html/element/rb/index.md @@ -8,131 +8,133 @@ tags: - Ruby translation_of: Web/HTML/Element/rb --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>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é. Un élément <code><rb></code> devrait encadrer chaque segment atomique du texte de base.</p> +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. -<h2 id="Attributs">Attributs</h2> +## Attributs -<p>Seuls les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> peuvent être utilisés sur cet élément.</p> +Seuls les [attributs universels](/fr/docs/Web/HTML/Attributs_universels) peuvent être utilisés sur cet élément. -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> +## Notes d'utilisation -<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> +- 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. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans cet exemple, on fournit une annotation pour le caractère original correspondant à "Kanji" :</p> +Dans cet exemple, on fournit une annotation pour le caractère original correspondant à "Kanji" : -<pre class="brush: html"><ruby> - <rb>漢<rb>字 - <rp>(</rp><rt>kan<rt>ji<rp>)</rp> -</ruby></pre> +```html +<ruby> + <rb>漢<rb>字 + <rp>(</rp><rt>kan<rt>ji<rp>)</rp> +</ruby> +``` -<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> +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")}}. -<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> +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>` : -<pre class="brush: html"><ruby> - 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> - 字 <rp>(</rp><rt>ji</rt><rp>)</rp> -</ruby></pre> +```html +<ruby> + 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> + 字 <rp>(</rp><rt>ji</rt><rp>)</rp> +</ruby> +``` -<h3 id="Avec_prise_en_charge_de_ruby">Avec prise en charge de ruby</h3> +### Avec prise en charge de ruby -<pre class="brush: html hidden"><ruby> <rb>漢<rb>字 <rp>(</rp><rt>kan<rt>ji<rp>)</rp> </ruby> -</pre> +```html hidden +<ruby> <rb>漢<rb>字 <rp>(</rp><rt>kan<rt>ji<rp>)</rp> </ruby> +``` -<pre class="brush: css hidden">body { +```css hidden +body { font-size: 22px; -}</pre> +} +``` -<p>Voici le résultat obtenu :</p> +Voici le résultat obtenu : -<p>{{EmbedLiveSample("Avec_prise_en_charge_de_ruby", "100%", 60)}}</p> +{{EmbedLiveSample("Avec_prise_en_charge_de_ruby", "100%", 60)}} -<p>Pour un navigateur qui ne prend pas en charge les annotations ruby, voici à quoi aurait ressemblé le résultat :</p> +Pour un navigateur qui ne prend pas en charge les annotations ruby, voici à quoi aurait ressemblé le résultat : -<h3 id="Sans_prise_en_charge_de_ruby">Sans prise en charge de ruby</h3> +### Sans prise en charge de ruby -<pre class="brush: html hidden">漢字 (kan ji)</pre> +```html hidden +漢字 (kan ji) +``` -<pre class="brush: css hidden">body { +```css hidden +body { font-size: 22px; } -</pre> +``` + +{{EmbedLiveSample("Sans_prise_en_charge_de_ruby", "100%", 60)}} -<p>{{EmbedLiveSample("Sans_prise_en_charge_de_ruby", "100%", 60)}}</p> +> **Note :** Voir l'article sur l'élément {{HTMLElement("ruby")}} pour de plus amples exemples. -<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> +## 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> + <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 -<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> +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rb-element', '<rb>')}} | {{Spec2('HTML5 W3C')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.rb")}}</p> +{{Compat("html.elements.rb")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{HTMLElement("ruby")}}</li> - <li>{{HTMLElement("rt")}}</li> - <li>{{HTMLElement("rp")}}</li> - <li> - <p>{{HTMLElement("rtc")}}</p> - </li> -</ul> +- {{HTMLElement("ruby")}} +- {{HTMLElement("rt")}} +- {{HTMLElement("rp")}} +- {{HTMLElement("rtc")}} |