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.
* Some parts of this feature may have varying levels of support.
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).
/* 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 initiale | alternate |
|---|---|
| Applicabilité | annotations ruby des conteneurs |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrè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 :
<ruby>
<rb>超電磁砲</rb>
<rp>（</rp><rt>レールガン</rt><rp>）</rp>
</ruby>
Au-dessus du texte
ruby {
ruby-position: over;
}
On obtiendra le résultat suivant :
En-dessous du texte
ruby {
ruby-position: under;
}
On obtiendra le résultat suivant :
Spécifications
| Specification |
|---|
| CSS Ruby Annotation Layout Module Level 1 # rubypos |
Compatibilité des navigateurs
Loading…
Voir aussi
- Les éléments HTML à propos de Ruby :
<ruby>,<rt>,<rp>et<rtc>. - Les propriétés CSS à propos de Ruby :
ruby-align,ruby-merge.