ruby-align

Baseline 2024

Newly available

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.

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

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

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: 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

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 spécifié
Type d'animation	by computed value type

Syntaxe formelle

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

Exemples

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

html

<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>

css

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>

css

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>

css

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

css

ruby {
  ruby-align: space-around;
}

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

Spécifications

Specification
CSS Ruby Annotation Layout Module Level 1 # ruby-align-property

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.

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨3 août 2023⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content