English

<ruby>

Annotations phonétiques (langues CJK)

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • internationalisation

<ruby> + <rt> + <rp> — Les annotations phonétiques

La balise <ruby> entoure un mot qui a besoin d'une annotation phonétique. <rt> contient la prononciation affichée au-dessus du texte. <rp> fournit des parenthèses de fallback pour les navigateurs qui ne supportent pas le ruby.

Quand l'utiliser

Tu affiches du texte en japonais (kanji avec furigana), en chinois (caractères avec pinyin) ou en coréen. Les annotations aident les apprenants et les lecteurs qui ne maîtrisent pas tous les caractères.

Ce que tu gagnes

Accessibilité : les lecteurs d'écran lisent à la fois le caractère de base et l'annotation <rt>. Sans <ruby>, un apprenant n'a aucun indice de prononciation. Le <rp> assure un fallback gracieux : le texte reste lisible même sans support ruby.

Exemple de code

<p lang="ja">
  <ruby>
    漢<rp>(</rp><rt>かん</rt><rp>)</rp>
    字<rp>(</rp><rt>じ</rt><rp>)</rp>
  </ruby>
  are Chinese characters used in Japanese.
</p>

Pour aller plus loin