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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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
direction
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 pour
sideways
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ées
glyph-orientation-vertical
etglyph-orientation-horizontal
.
Syntaxe formelle
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écification
Spécification | Statut | Commentaires |
---|---|---|
CSS Writing Modes Module Level 3 La définition de 'text-orientation' dans cette spécification. |
Recommendation proposée | Définition initiale. |
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 | discrète |
Compatibilité des navigateurs
BCD tables only load in the browser