Un site qui enseigne le japonais affiche un kanji suivi d'une petite annotation positionnée au-dessus, plus petite que le texte principal, qui donne sa prononciation en hiragana, pour que le lecteur puisse lire le mot sans le connaître par coeur.
<ruby> est le conteneur HTML pensé pour cet affichage précis : il regroupe le texte de base et son annotation dans une seule composition, avec un repli propre pour les navigateurs qui ne savent pas l'afficher correctement.
Définition
<ruby> encadre une composition ruby : un texte de base accompagné d'une courte annotation, le plus souvent une prononciation ou une glose, affichée au-dessus grâce à <rt> imbriquée à l'intérieur. Le nom vient de la typographie d'imprimerie, où ces petites annotations portaient déjà ce nom bien avant le web.
Le cas d'usage le plus cité est le furigana japonais : un kanji suivi de sa lecture en hiragana, pour aider un lecteur qui débute à prononcer un caractère qu'il ne reconnaît pas encore. Le même mécanisme sert aussi pour du chinois, du coréen, ou pour gloser un mot rare dans n'importe quelle langue.
Structure : base, annotation et repli
Une composition ruby complète associe trois éléments : le texte de base directement dans <ruby>, l'annotation dans rt, et une paire de <rp> qui encadrent l'annotation avec des parenthèses de secours.
<ruby>
漢字
<rp>(</rp><rt>かんじ</rt><rp>)</rp>
</ruby>Un navigateur qui comprend le ruby ignore les parenthèses de rp et affiche かんじ en petit, positionné au-dessus de 漢字. Un navigateur qui ne le comprend pas affiche tout le texte à la suite, parenthèses comprises, ce qui reste lisible même sans mise en forme particulière.
Sémantique et accessibilité
La composition ruby porte un sens précis que ne rendrait pas un simple texte réduit placé au-dessus avec du CSS seul : elle relie explicitement une base et son annotation, ce que les technologies d'assistance et les outils de traduction automatique peuvent exploiter pour restituer les deux correctement, dans le bon ordre et avec la bonne relation entre eux.
Un piège fréquent consiste à recréer visuellement un effet ruby avec deux blocs positionnés en CSS, sans utiliser ni <ruby> ni rt. Le rendu peut sembler identique à l'écran, mais la relation entre le texte de base et son annotation disparaît pour tout ce qui ne voit pas la mise en forme : lecteurs d'écran, moteurs de recherche, copie du texte dans un traducteur en ligne.
Bonnes pratiques
Toujours coupler <ruby> avec rt pour l'annotation et une paire de rp pour le repli coûte deux petites balises supplémentaires et sécurise l'affichage pour n'importe quel navigateur, ancien ou récent. Tester le rendu sans feuille de style ruby reste le moyen le plus simple de vérifier qu'un texte annoté reste lisible en toutes circonstances.
Cas d'usage au-delà du japonais
Le furigana reste l'exemple le plus cité, mais <ruby> convient à toute annotation courte liée à un mot précis : une transcription phonétique dans un dictionnaire en ligne, une traduction rapide d'un terme technique la première fois qu'il apparaît dans un texte, ou une glose grammaticale dans un support d'apprentissage des langues.
Believemy pourrait par exemple s'en servir dans une leçon de vocabulaire, pour afficher la prononciation d'un mot anglais directement au-dessus de son orthographe, sans alourdir la phrase d'une parenthèse explicite.
Questions fréquentes
<ruby> fonctionne-t-il pour d'autres langues que le japonais ?
Oui, rien dans la spécification ne le limite au japonais. Il sert aussi couramment pour le chinois et le coréen, et reste tout à fait valable pour gloser un mot rare en français ou en anglais avec sa prononciation ou une courte traduction, dès qu'une annotation doit rester collée à un mot précis.
Que se passe-t-il si rt est utilisée sans <ruby> autour ?
Techniquement le texte s'affiche quand même, mais la relation entre l'annotation et sa base disparaît : le navigateur ne sait plus à quel mot précis rattacher la prononciation. <ruby> est le conteneur qui donne son sens à <rt>, pas un simple emballage visuel facultatif autour d'elle.
Les parenthèses de rp s'affichent-elles sur les navigateurs modernes ?
Non, sur un navigateur qui prend correctement en charge le ruby, leur contenu reste invisible à l'écran : le navigateur sait déjà positionner l'annotation au bon endroit et n'a besoin d'aucune parenthèse. Elles ne réapparaissent que dans les rares navigateurs incapables d'afficher une composition ruby correctement.