ruby-align
Baseline
2024
Nouvellement disponible
Depuis December 2024, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
La propriété CSS ruby-align définit la façon dont les éléments ruby sont distribués autour du texte de base.
Syntaxe
css
/* 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: revert;
ruby-align: revert-layer;
ruby-align: unset;
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
| Valeur initiale | space-around |
|---|---|
| Applicabilité | bases ruby, annotations ruby, conteneurs de bases ruby, conteneurs d'annotations ruby |
| Héritée | oui |
| Valeur calculée | comme défini |
| Type d'animation | par type de valeur calculée |
Syntaxe formelle
ruby-align =
start |
center |
space-between |
space-around
Exemples
Ruby aligné au début du texte de base
HTML
html
<ruby>
<rb>Un long texte pour tester</rb>
<rp>（</rp><rt>Un petit ruby</rt><rp>）</rp>
</ruby>
CSS
css
ruby {
ruby-align: start;
}
Résultat
Ruby aligné au centre du texte de base
HTML
html
<ruby>
<rb>Ceci est un long texte pour tester</rb>
<rp>（</rp><rt>un petit ruby</rt><rp>）</rp>
</ruby>
CSS
css
ruby {
ruby-align: center;
}
Résultat
Un espace supplémentaire entre les éléments ruby
HTML
html
<ruby>
<rb>Ceci est un long texte pour tester</rb>
<rp>（</rp><rt>un petit ruby</rt><rp>）</rp>
</ruby>
CSS
css
ruby {
ruby-align: space-between;
}
Résultat
Un espace supplémentaire entre et autour des éléments ruby
HTML
html
<ruby>
<rb>Ceci est un long texte pour tester</rb>
<rp>（</rp><rt>un petit ruby</rt><rp>）</rp>
</ruby>
CSS
css
ruby {
ruby-align: space-around;
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Ruby Annotation Layout Module Level 1 # ruby-align-property |
Compatibilité des navigateurs
Voir aussi
- La propriété
ruby-position - Le module de disposition ruby CSS
- Les éléments HTML Ruby :
<ruby>,<rt>,<rp>et<rtc>