Propriété CSS ruby-position
Baseline 2024
Nouvellement disponible
*
Depuis décembre 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.
La propriété CSS 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).
Exemple interactif
ruby-position: over;
ruby-position: under;
<section id="default-example">
<ruby id="example-element"> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
</section>
#example-element {
font-size: 2em;
}
Syntaxe
/* Valeurs avec un mot-clé */
ruby-position: over;
ruby-position: under;
ruby-position: alternate;
ruby-position: alternate over;
ruby-position: alternate under;
ruby-position: inter-character;
/* Valeurs globales */
ruby-position: inherit;
ruby-position: initial;
ruby-position: revert;
ruby-position: revert-layer;
ruby-position: unset;
Valeurs
Cette propriété est définie comme l'un des mots-clés suivants :
over-
Est un mot-clé indiquant que le ruby doit être placé au-dessus du texte principal pour les scripts horizontaux et à droite pour les scripts verticaux. under-
Est un mot-clé indiquant que le ruby doit être placé sous le texte principal pour les scripts horizontaux et à gauche pour les scripts verticaux. alternate-
Est un mot-clé indiquant que le ruby alterne entre au-dessus et en-dessous, lorsqu'il y a plusieurs niveaux d'annotation.
inter-character-
Lorsqu'il est défini, il se comporte comme
overdans les modes d'écriture verticale. Sinon, il indique que le ruby doit être placé entre les différents caractères, apparaissant à droite de la base dans le texte horizontal et forçant les enfants du conteneur d'annotation ruby à avoir un mode d'écriturevertical-rl.
Définition formelle
| Valeur initiale | alternate |
|---|---|
| Applicabilité | annotations ruby des conteneurs |
| Héritée | oui |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
ruby-position =
[ alternate || [ over | under ] ] |
inter-character
Exemples
Ruby positionné au-dessus du texte
HTML
<ruby>
<rb>超電磁砲</rb>
<rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
CSS
ruby {
ruby-position: over;
}
Résultat
Ruby positionné en-dessous du texte
HTML
<ruby>
<rb>超電磁砲</rb>
<rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
CSS
ruby {
ruby-position: under;
}
Résultat
Ruby alterné
HTML
<ruby>
<rb>A</rb><rb>B</rb><rb>C</rb>
<rtc>Above</rtc>
<rtc>Below</rtc>
</ruby>
CSS
ruby {
ruby-position: alternate; /* ceci est également la valeur initiale */
}
Résultat
Spécifications
| Spécification |
|---|
| CSS Ruby Annotation Layout Module Level 1 # rubypos |
Compatibilité des navigateurs
Voir aussi
- Les éléments HTML
<ruby>,<rt>,<rp>et<rtc> - La propriété
ruby-align - Le module de disposition ruby CSS