L'élément HTML <ruby> est un outil puissant qui permet d'améliorer la présentation du texte, en particulier pour les langues d'Asie de l'Est. Cet élément vous permet d'afficher des annotations phonétiques ou d'autres informations complémentaires au-dessus ou à côté du texte de base. À partir de Chrome 128, l'annotation Ruby sera cassable à la ligne, et vous pourrez appliquer un style au texte en ruby avec la propriété CSS ruby-align.
Un élément <ruby> se compose de deux parties principales : la base Ruby qui correspond au texte principal et le texte Ruby au texte de l'annotation, balisée avec l'élément <rt>. Le texte Ruby peut être affiché sur ou sous la base Ruby, comme illustré dans les exemples suivants.
<ruby>
絵文字
<rt>emoji</rt>
</ruby>
<ruby style="ruby-position: under;">
강남대로
<rt>江南大路</rt>
</ruby>
Pourquoi s'appelle-t-elle "rubis" ?
Lorsque les livres étaient composés à l'aide de types mobiles, la taille de ces types mobiles était définie dans des noms de taille de point tels que Perl et Diamond. Ruby était utilisé dans le système britannique pour désigner la taille à 5,5 points. Les imprimantes japonaises utilisaient une taille semblable à Ruby (5,5 points) pour le texte d'annotation et ont donc commencé à désigner le texte d'annotation lui-même comme Ruby (ou Rubi phonétiquement) dans les impressions. Lorsque le texte de l'annotation était inclus dans le code HTML, l'élément était défini en tant que <ruby>. Pica (pc) est un autre nom historique de taille de point utilisé en CSS comme unité de taille de police.
Rubis anti-ligne
Auparavant, si une base ou un texte en ruby était plus long qu'une ligne entière, ils étaient encapsulés individuellement pour créer des défis de mise en page. Pour contourner ce problème, les développeurs Web balisent souvent un texte à l'aide de plusieurs balises ruby. Avec le matériau rubis cassable à la ligne, vous pouvez ignorer la création d'un tel balisage.
Dans l'exemple suivant, le pinyin (romanisation du chinois) est ajouté sous la forme d'une série d'annotations en rubis sur la poésie chinoise classique. Les résultats du rendu actuel s'encapsulent dans la zone de texte de l'annotation Ruby.
Rendu à partir de Chrome 128 avec des zones de texte en rubis sécables à la ligne encapsulant le texte d'annotation en rubis sur le texte de base encapsulé, pour un rendu de texte idéal.
Dans un autre exemple de la littérature japonaise, le saut de ligne se produit avant le long élément rubis, créant ainsi un espace vide dans la première ligne.
Le rubis striable permet de placer un saut de ligne au milieu d'un long élément rubis pour obtenir une mise en page idéale.
Cette fonctionnalité ne casse pas les textes courts en rubis comportant moins de quatre caractères de base et huit caractères d'annotation.
Lorsqu'un élément <ruby> est imbriqué dans un autre élément <ruby>, l'élément <ruby> interne ne fait pas de saut de ligne.
Étant donné que cela modifie le comportement des pages Web actuelles utilisant du texte en rubis long, si vous devez désactiver ce comportement de saut de ligne, l'application de white-space:nowrap désactive le saut de ligne dans l'élément cible comme d'habitude.
Propriété CSS ruby-align
La nouvelle propriété CSS ruby-align est également disponible depuis Chrome 128. La propriété accepte l'une des valeurs de mot clé space-around, space-between, start ou center, et contrôle l'alignement du texte de base et du texte d'annotation Ruby.
