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, quandwriting-mode n'est pashorizontal-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>  <div>    <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 commeltr (left-to-right ou gauche à droite). La valeur utilisée pourdirection seraltr, 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 poursideways conservé 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éesglyph-orientation-vertical etglyph-orientation-horizontal.

Définition formelle

Syntaxe formelle

text-orientation =
mixed|
upright|
sideways

Exemples

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>

CSS

.monTexte {  writing-mode: vertical-rl;  text-orientation: sideways;}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• writing-mode
• text-combine-upright
• unicode-bidi