text-orientation
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2020.
La propriété text-orientation définit l'orientation du texte sur une ligne. Cette propriété n'a d'effet qu'en mode vertical (autrement dit, quand writing-mode n'est pas horizontal-tb). Elle est utile pour contrôler l'affichage de l'écriture pour les langues dont le script est vertical. Elle permet aussi de gérer les en-têtes de tableaux verticaux.
Exemple interactif
writing-mode: vertical-rl;
text-orientation: mixed;
writing-mode: vertical-rl;
text-orientation: upright;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<p>
In another moment down went Alice after it, never once considering how in
the world she was to get out again.
</p>
</div>
</section>
Syntaxe
/* Valeurs avec un mot-clé */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways-left;
text-orientation: sideways;
text-orientation: use-glyph-orientation;
/* Valeurs globales */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;
La propriété text-orientation peut valoir l'un des mots-clés suivants.
Valeurs
mixed-
Ce mot-clé permet de tourner les caractères de 90° dans le sens des aiguilles d'une montre pour les scripts horizontaux, les glyphes des scripts verticaux sont affichés normalement. C'est la valeur par défaut.
upright-
Ce mot-clé permet d'afficher les caractères des scripts horizontaux normalement et d'afficher les glyphes des scripts verticaux « debout ». Ce mot-clé implique que tous les caractères soient considérés comme ltr (left-to-right ou gauche à droite). La valeur utilisée pour
directionseraltr, quelle que soit celle définie par l'utilisateur. sideways-
Ce mot-clé permet d'afficher les caractères comme s'ils étaient disposés horizontalement et que la ligne de base était tournée de 90° dans le sens des aiguilles d'une montre.
sideways-right-
Un alias pour
sidewaysconservé pour des raisons de compatibilité. use-glyph-orientation-
Pour les éléments SVG, ce mot-clé permet d'utiliser la valeur des propriétés SVG dépréciées
glyph-orientation-verticaletglyph-orientation-horizontal.
Définition formelle
| Valeur initiale | mixed |
|---|---|
| Applicabilité | tous les éléments exceptés les groupes de lignes, les lignes, les groupes de colonnes et les colonnes de tableaux |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | Not animatable |
Syntaxe formelle
text-orientation =
mixed |
upright |
sideways
Exemples
HTML
<p class="monTexte">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
CSS
.monTexte {
writing-mode: vertical-rl;
text-orientation: sideways;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Writing Modes Level 4 # text-orientation |
Compatibilité des navigateurs
Chargement…