ruby-position

Baseline 2024

Newly available

Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Expérimental: 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-position définit la position d'un élément ruby par rapport à son élément de base. L'élément ruby peut ainsi être positionné au-dessus de l'élément (over), en-dessous (under) ou entre les caractères, sur leur droite (inter-character).

css
/* Valeurs avec un mot-clé */
ruby-position: over;
ruby-position: under;
ruby-position: inter-character;

/* Valeurs globales */
ruby-position: inherit;
ruby-position: initial;
ruby-position: unset;

Syntaxe

Valeurs

over

Un mot-clé qui indique que les annotations ruby doivent être placée au-dessus du texte pour les scripts horizontaux et à droite pour les scripts verticaux.

under

Un mot-clé qui indique que les annotations ruby doivent être placés sous le texte pour les scripts horizontaux et à gauche pour les scripts verticaux.

inter-character

Un mot-clé qui indique que les annotations ruby doivent être placées entre les différents caractères.

Définition formelle

Valeur initialealternate
Applicabilitéannotations ruby des conteneurs
Héritéeoui
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

ruby-position = 
  [ alternate || [ over | under ] ]  |
  inter-character

Exemples

Ce fragment HTML rendra un résultat différent pour chaque valeur de ruby-position :

html
<ruby>
  <rb>超電磁砲</rb>
  <rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>

Au-dessus du texte

css
ruby {
  ruby-position: over;
}

On obtiendra le résultat suivant :

En-dessous du texte

css
ruby {
  ruby-position: under;
}

On obtiendra le résultat suivant :

Spécifications

Specification
CSS Ruby Annotation Layout Module Level 1
# rubypos

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi