La propriétéruby-align définit la façon dont les éléments ruby sont distribués autour du texte de base.

/* Valeur avec un mot-clé */ruby-align: start;ruby-align: center;ruby-align: space-between;ruby-align: space-around;/* Valeurs globales */ruby-align: inherit;ruby-align: initial;ruby-align: unset;

Syntaxe

Valeurs

start

Un mot-clé indiquant que les notations ruby sont alignées avec le début du texte de base.

center

Un mot-clé indiquant que les notations ruby sont alignées avec le milieu du texte de base.

space-between

Un mot-clé indiquant qu'un espace supplémentaire sera distribué entre les éléments ruby.

space-around

Un mot-clé indiquant qu'un espace supplémentaire sera distribué entre les éléments ruby et autour d'eux.

Définition formelle

Syntaxe formelle

ruby-align =
start|
center|
space-between|
space-around

Exemples

Ce fragment HTML sera affiché différemment en fonction des valeurs deruby-align :

<ruby>  <rb>Un long texte pour tester</rb>  <rp>（</rp><rt>Un petit ruby</rt><rp>）</rp></ruby>

Alignement par rapport au début du texte de base

<ruby>  <rb>This is a long text to check</rb>  <rp>（</rp><rt>short ruby</rt><rp>）</rp></ruby>

ruby {  ruby-align: start;}

Avec ce CSS, on obtient le résultat suivant :

Alignement par rapport au centre

<ruby>  <rb>This is a long text to check</rb>  <rp>（</rp><rt>short ruby</rt><rp>）</rp></ruby>

ruby {  ruby-align: center;}

Avec ce CSS, on obtient le résultat suivant :

Un espace supplémentaire entre les éléments ruby

<ruby>  <rb>This is a long text to check</rb>  <rp>（</rp><rt>short ruby</rt><rp>）</rp></ruby>

ruby {  ruby-align: space-between;}

Avec ce CSS, on obtient le résultat suivant :

Un espace supplémentaire entre et autour des éléments ruby

ruby {  ruby-align: space-around;}

Avec ce CSS, on obtient le résultat suivant :

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les éléments HTML liés aux notations Ruby :<ruby>,<rt>,<rp> et<rtc>.
• Les propriétés CSS liées aux notations Ruby :ruby-position,ruby-merge.