ruby-align est désormais disponible en tant que référence

Mariko Kosaka

Publié le 21 février 2025

L'élément HTML <ruby> vous permet d'afficher des annotations phonétiques ou d'autres informations supplémentaires au-dessus ou à côté du texte de base. Il est couramment utilisé dans les langues d'Asie de l'Est.

Un élément <ruby> se compose de deux parties principales : la base ruby, qui correspond au texte principal, et le texte ruby, qui correspond au texte d'annotation, marqué avec l'élément <rt>.


<ruby>
  絵文字
  <rt>emoji</rt>
</ruby>

Annotation ruby en anglais &quot;Emoji&quot; sur un texte en japonais.
Prononciation en anglais en tant qu'annotation sur le texte de base en japonais.

ruby-align

La propriété CSS ruby-align contrôle l'alignement du texte de base et du texte d'annotation Ruby. La propriété accepte l'une des valeurs de mot clé, space-around, space-between, start et center.

Annotation ruby en pinyin sur un texte chinois.
Image illustrant l'utilisation de la propriété ruby-align.