Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

ruby-position

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.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

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

Voir aussi