MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

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;

Valeur initialespace-around
Applicabilitébases ruby, annotations ruby, conteneurs de bases ruby, conteneurs d'annotations ruby
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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.

Syntaxe formelle

start | center | space-between | space-around

Exemples

Ce fragment HTML sera affiché différemment en fonction des valeurs de ruby-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 {
  ruby-align:start;
}

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

Alignement par rapport au centre

ruby {
  ruby-align:center;
}

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

Un espace supplémentaire entre les éléments 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

Spécification État Commentaires
CSS Ruby Layout Module Level 1
La définition de 'ruby-align' dans cette spécification.
Version de travail Définition initiale

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple Pas de support Pas de support[1] 38 (38) Pas de support[1] Pas de support Pas de support
Fonctionnalité Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple Pas de support (Oui) 38.0 (38) Pas de support[1] Pas de support Pas de support

[1] Microsoft Edge et antérieur (Internet Explorer 9 à 11) implémentent une ancienne version de la spécification CSS Ruby où la propriété ruby-align pouvait prendre les valeurs auto, left, center, right, distribute-letter, distribute-space et line-edge. Dans le tableau qui suit, on trouvera des équivalences entre ces valeurs et la spécification actuelle CSS Ruby de niveau 1 :

Syntaxe pour Edge et IE Syntaxe standard
auto space-around (la valeur par défaut) pour les scripts idéographiques ou center pour les scripts latins. Afin d'obtenir un effet similaire, on pourra utiliser les codes de scripts ISO 15924 avec l'attribut HTML universel lang ou xml:lang en XML et grâce à la pseudo-classe CSS :lang.
left start pour les scripts de gauche à droite.
center center sans le comportement optionnel défini dans CSS Ruby, Level 1, Section 5.2: Line‐Edge Alignment, c'est le comportement de Firefox.
right start pour les scripts de droite à gauche.
distribute-letter space-between
distribute-space space-around (la valeur par défaut)
line-edge center avec le comportement optionnel défini dans CSS Ruby, Level 1, Section 5.2: Line‐Edge Alignment. Firefox ne prend en charge aucun mot-clé qui ait ce comportement. Sous Firefox, afin d'obtenir des effets similaires, on peut utiliser des règles CSS ciblant des éléments ruby spécifiques avec les mots-clés center et start selon la position et la largeur du texe ruby.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,