W3docs

Balise HTML <rb>

Utilisez la balise HTML <rb> pour délimiter le texte de base des annotations <ruby> utilisées en typographie est-asiatique. Exemples inclus.

L'élément HTML <rb> était utilisé pour délimiter le composant de texte de base d'une annotation <ruby> — les caractères auxquels un guide de prononciation est associé.

Avertissement

Déprécié — n'utilisez pas <rb> dans le nouveau code. L'élément <rb> a été supprimé de la norme HTML, et la prise en charge par les navigateurs est peu fiable. Il n'est pas nécessaire de l'utiliser : en HTML moderne, le texte de base est placé directement à l'intérieur de <ruby>, sans élément englobant. Cette page est conservée uniquement pour vous aider à identifier et migrer le balisage hérité.

Ce que sont les annotations ruby

Une annotation ruby est une courte suite de texte présentée à côté d'un texte de base, généralement utilisée en typographie est-asiatique pour indiquer la prononciation (lecture) des caractères. L'annotation est rendue dans une police plus petite, généralement au-dessus ou sur le côté des caractères de base.

Une annotation ruby est construite à partir de trois éléments modernes :

  • <ruby> — le conteneur de l'annotation complète.
  • <rt> — le texte ruby : la prononciation ou l'annotation elle-même.
  • <rp> — des parenthèses ruby facultatives affichées uniquement par les navigateurs qui ne peuvent pas afficher le ruby, afin que le texte se dégrade en quelque chose comme 漢字 (kanji).

Dans les anciens balisages, <rb> (et l'élément également déprécié <rtc>) encadrait le texte de base. Aujourd'hui, le texte de base n'a besoin d'aucun élément englobant.

Le modèle moderne (à utiliser)

Placez le texte de base directement à l'intérieur de <ruby>, puis faites suivre chaque segment de base par son <rt>. Encadrez le contenu du <rt> avec des parenthèses <rp> pour que l'annotation reste lisible là où ruby n'est pas pris en charge.

Exemple d'annotation ruby moderne (sans <rb>) :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <ruby>
      漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
      字 <rp>(</rp><rt>ji</rt><rp>)</rp>
    </ruby>
  </body>
</html>

Résultat

Exemple d'annotation ruby HTML

Un navigateur qui prend en charge ruby affiche kan au-dessus de et ji au-dessus de . Un navigateur qui ne le prend pas en charge revient à 漢 (kan) 字 (ji), grâce aux éléments <rp>.

Balisage <rb> hérité (à reconnaître, ne pas utiliser)

Vous pouvez encore rencontrer des documents anciens qui encadrent chaque segment de base dans <rb>. L'exemple ci-dessous est montré uniquement pour vous permettre de le reconnaître — remplacez-le par le modèle moderne ci-dessus.

<!-- Legacy markup — DO NOT USE in new code -->
<ruby>
  <rb>漢</rb>
  <rb>字</rb>
  <rp>(</rp><rt>kan</rt><rt>ji</rt><rp>)</rp>
</ruby>

Pour migrer, supprimez les balises <rb> et laissez les caractères de base directement à l'intérieur de <ruby>.

Prise en charge par les navigateurs

<rb> ne fait pas partie de la spécification HTML actuelle. Même là où les navigateurs le tolèrent, le comportement est incohérent, et vous ne devriez donc pas vous y fier. La combinaison moderne <ruby> / <rt> / <rp> est bien prise en charge par les navigateurs actuels.

Balises associées

  • <ruby> — le conteneur de l'annotation ruby.
  • <rt> — le texte (annotation) ruby.
  • <rp> — parenthèses de repli pour les navigateurs non compatibles.

Exercice

Pratique
Quelles affirmations concernant la balise <rb> dépréciée et les annotations ruby modernes sont correctes ?
Quelles affirmations concernant la balise <rb> dépréciée et les annotations ruby modernes sont correctes ?
Was this page helpful?