La balise HTML <rt>
La balise <rt> permet d'ajouter des annotations au-dessus ou en dessous du texte contenu dans la balise <ruby>.
La balise <rt> porte l'annotation — la lecture, la prononciation ou la traduction — à l'intérieur d'un élément <ruby>. L'élément <ruby> associe une portion de texte de base à une ou plusieurs annotations <rt>, une technique utilisée pour indiquer la prononciation des caractères d'Asie orientale (furigana japonais, pinyin chinois, coréen) ou, plus généralement, toute petite note explicative imprimée à côté du texte.
Par défaut, le navigateur affiche le contenu de <rt> en petits caractères au-dessus du texte de base. Le texte de base correspond à tout ce qui se trouve à l'intérieur de <ruby> sans être enveloppé dans <rt>.
La balise <rt> fait partie des éléments HTML5.
Fonctionnement de <rt> dans <ruby>
Une annotation ruby comporte deux parties : le texte de base et l'annotation. L'annotation est placée dans <rt> ; le texte de base est laissé tel quel.
<ruby>漢字<rt>かんじ</rt></ruby>Ici, 漢字 est le texte de base et かんじ est la lecture affichée au-dessus. Vous pouvez annoter chaque caractère séparément afin que chaque lecture apparaisse au-dessus du caractère correspondant :
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>Le schéma moderne avec repli <rp>
Certains navigateurs (et la plupart des contextes en texte brut, lecteurs d'écran ou copier-coller) ne peuvent pas afficher les annotations ruby. La balise <rp> (« parenthèse ruby ») fournit des parenthèses de repli qui ne s'affichent que lorsque le rendu ruby est indisponible. Les navigateurs qui prennent en charge le ruby masquent le contenu des <rp>.
Voici le schéma canonique recommandé :
<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>- Dans un navigateur compatible ruby, cela affiche
かんじau-dessus de漢字, et les parenthèses sont masquées. - Dans un contexte de repli, la dégradation est gracieuse et produit le texte lisible
漢字(かんじ).
Entourez toujours chaque <rt> d'une paire d'éléments <rp> pour un repli robuste.
Exemple complet
Balise HTML <rt>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<ruby>
漢<rp>(</rp><rt>かん</rt><rp>)</rp>
字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
</body>
</html>Résultat
Syntaxe et omission de la balise fermante
La balise <rt> fonctionne par paires, mais la balise fermante peut être omise lorsque <rt> est immédiatement suivi d'un autre <rt> ou d'un élément <rp>, ou lorsqu'il ne reste plus de contenu dans l'élément parent <ruby>.
Remarque sur <rb> et <rtc>
Vous pouvez rencontrer dans des tutoriels anciens l'utilisation de <rb> (base ruby) et <rtc> (conteneur de texte ruby) pour baliser des annotations complexes à plusieurs niveaux. Ces éléments ont été retirés du standard HTML et sont obsolètes. Leur prise en charge par les navigateurs est incohérente et ils ne doivent pas être utilisés dans du nouveau code.
Pour le texte de base, laissez-le simplement tel quel à l'intérieur de <ruby> plutôt que de l'envelopper dans <rb>. Restez fidèle au schéma moderne <ruby> + <rt> (+ <rp>) présenté ci-dessus.
Positionnement de l'annotation avec CSS
La propriété CSS ruby-position contrôle l'emplacement de l'annotation <rt> par rapport au texte de base — over (au-dessus, valeur par défaut pour la plupart des scripts), under (en dessous) ou inter-character. Par exemple :
ruby {
ruby-position: under;
}Cela déplace la lecture en dessous des caractères de base, ce qui est la convention pour certaines langues. ruby-position est pris en charge dans tous les principaux navigateurs actuels.
Prise en charge par les navigateurs
Les annotations ruby (<ruby>, <rt> et <rp>) sont prises en charge dans tous les navigateurs modernes, notamment Chrome, Edge, Firefox et Safari.
Attributs
La balise <rt> prend en charge les attributs globaux et les attributs d'événement.