Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Propriété CSS 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
/* 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
<ruby>
<rb>Un long texte pour tester</rb>
<rp>(</rp><rt>Un petit ruby</rt><rp>)</rp>
</ruby>
CSS
ruby {
ruby-align: start;
}
Résultat
Ruby aligné au centre du texte de base
HTML
<ruby>
<rb>Ceci est un long texte pour tester</rb>
<rp>(</rp><rt>un petit ruby</rt><rp>)</rp>
</ruby>
CSS
ruby {
ruby-align: center;
}
Résultat
Un espace supplémentaire entre les éléments ruby
HTML
<ruby>
<rb>Ceci est un long texte pour tester</rb>
<rp>(</rp><rt>un petit ruby</rt><rp>)</rp>
</ruby>
CSS
ruby {
ruby-align: space-between;
}
Résultat
Un espace supplémentaire entre et autour des éléments ruby
HTML
<ruby>
<rb>Ceci est un long texte pour tester</rb>
<rp>(</rp><rt>un petit ruby</rt><rp>)</rp>
</ruby>
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
Activez JavaScript pour afficher ce tableau de 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>
Aider à améliorer MDN
Cette page a été modifiée le par les contributeur·ice·s du MDN.