<ruby>
Les annotations ruby : un petit texte au-dessus des caractères, le plus souvent la prononciation de caractères chinois ou japonais.
- Affichage
- ruby
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu phrasant ainsi que les éléments
<rt>et<rp>
Exemple
#<p lang="zh" style="font-size: 2rem;">
<ruby>你<rt>nǐ</rt>好<rt>hǎo</rt></ruby>
</p>
<p>« Bonjour » en chinois, avec la prononciation en pinyin au-dessus des caractères.</p>Définition et utilisation
#L’élément <ruby> permet d’ajouter à un texte de courtes annotations affichées au-dessus de lui (en écriture horizontale). C’est une notation connue de la typographie est-asiatique : en japonais, on écrit au-dessus des caractères kanji leur prononciation en hiragana (ce qu’on appelle le furigana), et en chinois, la prononciation en transcription pinyin.
La structure est simple : dans <ruby>, vous placez le texte de base, suivi immédiatement d’un <rt> avec l’annotation. Vous pouvez donner un <rt> séparé à chaque caractère, ou un seul à tout un mot. Les éléments <rp> facultatifs, avec des parenthèses, assurent la lisibilité dans les programmes qui ne prennent pas en charge ruby.
Les annotations ruby sont utiles au-delà des langues asiatiques. Vous pouvez les utiliser pour ajouter la prononciation d’un mot difficile ou la traduction d’un terme, à condition que l’annotation reste courte.
Syntaxe
#<ruby>texte de base<rt>annotation</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="en" style="font-size: 1.5rem;">
<ruby>array<rp> (</rp><rt lang="fr">tableau</rt><rp>)</rp></ruby>
<ruby>loop<rp> (</rp><rt lang="fr">boucle</rt><rp>)</rp></ruby>
<ruby>function<rp> (</rp><rt lang="fr">fonction</rt><rp>)</rp></ruby>
</p>CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
ruby {
display: ruby;
}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
#- Entourez chaque
<rt>d’éléments<rp>, pour que le texte reste lisible même sans prise en charge de ruby. - Indiquez la langue du texte avec l’attribut
lang, par exemplelang="ja"oulang="zh", pour que le navigateur choisisse la bonne police. - Les éléments
<rb>et<rtc>des anciens tutoriels sont obsolètes.<ruby>,<rt>et<rp>suffisent.
Entrées associées
#- <rt>Le texte de l’annotation dans un élément ruby : la prononciation ou le sens affiché au-dessus du texte de base.
- <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.
- <bdi>Isole un fragment de texte dont le sens d’écriture est inconnu, par exemple un nom d’utilisateur écrit en arabe.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.