<rt> en HTML : l'annotation phonétique au-dessus d'un caractère

Dans une leçon de japonais affichée en HTML, un kanji est suivi d'une petite ligne de caractères hiragana positionnée juste au-dessus, plus petite que le texte principal : cette petite ligne a besoin d'une balise à elle pour être reconnue comme une annotation, et non comme du texte normal.

<rt> est cette balise : elle encadre l'annotation elle-même, glose ou indication de prononciation, à l'intérieur d'une composition <ruby>.

Définition

<rt> contient le texte d'annotation d'une composition ruby, à savoir la prononciation ou la glose affichée au-dessus d'un segment de texte de base. Elle n'a de sens que placée à l'intérieur d'une balise <ruby>, qui établit le lien entre l'annotation et le texte qu'elle annote.

Le cas le plus cité reste le furigana japonais, une petite lecture en hiragana posée au-dessus d'un kanji, mais <rt> sert dans toute langue où une courte annotation doit rester visuellement rattachée à un mot précis, comme une transcription phonétique ou une traduction très brève.

Position dans une composition ruby

<rt> suit immédiatement le texte de base qu'elle annote, à l'intérieur de <ruby>, et s'entoure généralement d'une paire de <rp> qui fournit des parenthèses de repli pour les navigateurs sans support ruby.

<ruby>
  東京
  <rp>(</rp><rt>とうきょう</rt><rp>)</rp>
</ruby>

Ici, とうきょう est l'annotation phonétique de 東京, Tokyo en kanji : un navigateur qui gère le ruby l'affiche en petit, au-dessus du texte de base, sans les parenthèses qui l'entourent dans le code source.

Sémantique et accessibilité

Isoler l'annotation dans sa propre balise plutôt que de l'écrire simplement à côté du mot en petite taille avec du CSS permet aux technologies d'assistance et aux outils de traitement du texte de distinguer clairement les deux rôles : le mot lui-même, et sa prononciation ou sa glose. Un lecteur d'écran correctement configuré peut ainsi annoncer la base puis son annotation dans un ordre cohérent, plutôt que de lire un bloc de texte confus mélangeant les deux.

Ce qu'elle n'est pas

<rt> n'est ni une bulle d'aide qui apparaît au survol, ni une simple note de bas de page : elle reste visible en permanence, collée visuellement à son texte de base, et fait partie intégrante du contenu affiché plutôt que d'un mécanisme d'interaction. Une info-bulle qui n'apparaîtrait qu'au survol de la souris exclurait d'office tout usage tactile ou clavier, ce que <rt> évite justement en restant affichée par défaut.

Écrite à la main ou générée automatiquement

Sur un site multilingue ou un dictionnaire en ligne, le furigana n'est presque jamais saisi caractère par caractère : une bibliothèque JavaScript ou un convertisseur dédié génère automatiquement la paire <rt> et <rp> à partir d'un texte source annoté dans un format plus simple, souvent entre crochets. Écrire la structure à la main garde tout son intérêt pour un exemple isolé dans un article, une leçon de vocabulaire ponctuelle, ou un petit site qui préfère ne dépendre d'aucun outil externe pour quelques annotations occasionnelles.

Questions fréquentes

Techniquement le navigateur affiche quand même le texte, mais l'annotation perd tout son sens : sans <ruby>, rien n'indique à quel texte de base elle se rapporte. La structure complète, base et annotation réunies dans <ruby>, est ce qui donne à <rt> sa fonction réelle.

Oui, une seule balise <ruby> peut regrouper plusieurs segments de texte de base, chacun suivi de sa propre <rt>, ce qui permet d'annoter mot par mot une phrase entière plutôt que de tout regrouper sous une seule annotation globale peu précise.

Oui, la spécification ne limite pas le contenu à une prononciation : une courte traduction, une définition express ou une glose grammaticale conviennent tout autant, tant que le texte reste bref et directement lié au mot annoté juste en dessous ou à côté.