ruby-align

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 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é
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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

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 Statut 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 Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple Pas de support 38 (38) Pas de support[1] Pas de support Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple Pas de support 38.0 (38) Pas de support[1] Pas de support Pas de support

[1] Depuis la version 9, Internet Explorer implémente une ancienne version du brouillon de la spécification CSS Ruby où ruby-align pouvait prendre les valeurs suivantes : auto, left, center, right, distribute-letter, distribute-space ou line-edge. Voici une table de conversion basique :

Syntaxe d'Internet Explorer Syntaxe standard
auto Ne pas utiliser ruby-align
left Utiliser start (dans les scripts de gauche à droite)
center center
right Utiliser start (dans les scripts de droite à gauche)
distribute-letter Pas d'équivalent direct, utiliser space-between ou space-around
distribute-space space-around
line-edge Pas d'équivalent direct

Voir aussi

Étiquettes et contributeurs liés au document

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