<rt>
Le texte de l’annotation dans un élément ruby : la prononciation ou le sens affiché au-dessus du texte de base.
- Affichage
- ruby-text
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu phrasant
Exemple
#<p lang="zh" style="font-size: 2rem;">
<ruby>学<rt>xué</rt>习<rt>xí</rt></ruby>
</p>
<p>« Apprendre » en chinois. Chaque caractère a ici sa propre annotation.</p>Définition et utilisation
#L’élément <rt> (de l’anglais ruby text) contient le contenu de l’annotation dans un élément <ruby>, le plus souvent la prononciation. Le navigateur l’affiche dans une police plus petite au-dessus du texte de base, et à côté de lui en écriture verticale.
Chaque <rt> se rapporte au texte de base qui le précède : depuis le début de <ruby> ou depuis le <rt> précédent. Vous pouvez donc donner une annotation à chaque caractère séparément, ou une seule à tout un mot. Des annotations séparées permettent au navigateur de couper la ligne entre les caractères.
<rt> ne peut se trouver qu’à l’intérieur de <ruby>. La balise fermante peut formellement être omise si elle est immédiatement suivie d’un autre <rt>, d’un <rp>, ou de la fin de l’élément <ruby>, mais il est plus lisible de l’écrire.
Syntaxe
#<ruby>字<rt>zì</rt></ruby>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
Plus d’exemples
#<p lang="ja" style="font-size: 2rem;">
<ruby>東京<rt>とうきょう</rt></ruby>
</p>
<p>Tokyo en japonais, avec la prononciation écrite en hiragana au-dessus de tout le mot.</p>CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
rt {
display: ruby-text;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Les annotations doivent être courtes : une prononciation ou un seul mot de traduction.
- Placez
<rt>uniquement à l’intérieur de<ruby>. - Vous changez la taille et la couleur de l’annotation en CSS, par exemple
rt { font-size: 0.6em; color: gray; }.
Entrées associées
#- <ruby>Les annotations ruby : un petit texte au-dessus des caractères, le plus souvent la prononciation de caractères chinois ou japonais.
- <rp>Des parenthèses de secours autour d’une annotation ruby, visibles seulement là où ruby n’est pas pris en charge.
- <abbr>Une abréviation ou un acronyme, avec un développement facultatif dans l’attribut title.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.