Propriété CSS text-orientation
Utilisez la propriété CSS text-orientation pour définir l'orientation des caractères dans une ligne verticale. Valeurs et exemples.
La propriété CSS text-orientation contrôle l'orientation de chaque caractère dans une ligne lorsque le texte s'écoule verticalement. C'est l'outil à utiliser pour mettre en page des scripts est-asiatiques (chinois, japonais, coréen) selon leur flux vertical traditionnel, ou pour créer une étiquette ou un titre vertical dans une mise en page utilisant des scripts latins.
Seule, text-orientation ne fait rien — elle ne prend effet que lorsque la direction de la ligne est verticale. Vous définissez cette direction avec la propriété writing-mode (par exemple vertical-rl ou vertical-lr). Pensez à cette paire comme une division du travail : writing-mode détermine dans quel sens la ligne s'écoule, et text-orientation détermine comment chaque glyphe est tourné le long de cette ligne.
Ce chapitre couvre ce que fait chaque valeur, quand en choisir une plutôt qu'une autre, les pièges liés à la compatibilité des navigateurs, ainsi que des exemples exécutables que vous pouvez modifier.
Pourquoi l'utiliser
- Typographie CJK verticale. Par défaut (
mixed), les caractères latins mélangés à du texte chinois ou japonais vertical sont pivotés de 90°, ce qui est difficile à lire.uprightles maintient dans le bon sens. - Titres verticaux décoratifs et étiquettes latérales. Les titres de type reliure, les étiquettes de barre latérale et les étiquettes d'axe de graphique dans les scripts latins se lisent souvent mieux debout ou couchés sur le côté.
- Rendu fidèle de contenu à scripts mixtes où des chiffres, des acronymes ou des mots d'emprunt apparaissent dans du texte vertical.
Les valeurs en un coup d'œil
text-orientation accepte cinq valeurs liées aux scripts — mixed, upright, sideways, sideways-right et use-glyph-orientation — ainsi que les mots-clés globaux initial et inherit. Toutes les valeurs liées aux scripts ne s'appliquent que dans les modes typographiques verticaux.
Quelques remarques historiques à connaître : l'ancienne valeur sideways-left a été supprimée de la spécification, sideways-right n'est désormais conservée que comme alias de sideways, et les cas d'usage non verticaux ont été déplacés vers les valeurs sideways-lr / sideways-rl de la propriété writing-mode.
La propriété text-orientation n'a d'effet que lorsque writing-mode est vertical (vertical-rl ou vertical-lr). Dans une mise en page horizontale normale, elle est ignorée.
| Valeur initiale | mixed |
|---|---|
| S'applique à | Tous les éléments, sauf les groupes de lignes de tableau, les lignes, les groupes de colonnes et les colonnes. |
| Hérité | Oui. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.textOrientation = "upright"; |
Syntaxe
Valeurs CSS text-orientation
text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;Exemple de la propriété text-orientation avec la valeur "mixed" :
Exemple de code CSS text-orientation
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-rl;
text-orientation: mixed;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<p>Lorem ipsum is simply dummy text.</p>
</body>
</html>Avec mixed, les lettres latines restent debout tandis que la ligne elle-même s'écoule de haut en bas et de droite à gauche. Il s'agit du comportement par défaut du navigateur pour les modes d'écriture verticaux, et celui qu'il faut utiliser pour du texte CJK authentique.
Résultat
Exemple de la propriété text-orientation avec la valeur "upright" :
CSS text-orientation avec la valeur upright, exemple
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-lr;
text-orientation: upright;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<p>Lorem ipsum is simply dummy text.</p>
</body>
</html>La valeur upright force chaque glyphe à se tenir verticalement, quel que soit son script. C'est le choix habituel pour un titre vertical décoratif dans une mise en page à script latin, et pour maintenir la lisibilité des mots latins intégrés dans du texte CJK vertical. Notez que upright force également la direction bidirectionnelle direction du texte à ltr.
Exemple : titre vertical à côté du corps du texte
Autre exemple de code CSS text-orientation
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ffffff;
color: #000000;
font-size: 1.1em;
}
.example {
background: #cccccc;
color: #fff;
padding: 3em;
margin: 40px auto 0;
width: 400px;
max-width: 400px;
display: flex;
}
h1 {
color: #8ebf42;
margin: 0.15em 0.75em 0 0;
font-family: 'Bungee Shade', cursive;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
text-orientation: upright;
-webkit-font-feature-settings: "vkrn", "vpal";
font-feature-settings: "vkrn", "vpal";
}
p {
margin: 0;
line-height: 1.5;
font-size: 1.15em;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<div class="example">
<h1>Lorem Ipsum</h1>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</body>
</html>Compatibilité des navigateurs et solutions de repli
text-orientation est prise en charge par tous les navigateurs modernes (Chrome, Edge, Firefox, Safari). Deux remarques pratiques :
- Elle n'a de sens qu'avec un
writing-modevertical, donc définissez toujours les deux ensemble. - Les anciennes versions de WebKit nécessitent le préfixe
-webkit-surwriting-mode(vous pouvez le voir dans l'exemple ci-dessus). La propriététext-orientationelle-même n'a pas besoin de préfixe dans les navigateurs actuels. - Évitez
use-glyph-orientation: elle est dépréciée et n'est plus prise en charge dans les navigateurs modernes.
Valeurs
| Valeur | Description |
|---|---|
| mixed | Les scripts horizontaux sont disposés verticalement, tandis que les scripts verticaux sont pivotés de 90° dans le sens des aiguilles d'une montre. Il s'agit de la valeur par défaut de cette propriété. |
| upright | Tous les caractères sont disposés verticalement, quel que soit leur script. Cela n'affecte pas la propriété direction. |
| sideways | Les caractères sont disposés comme ils le seraient horizontalement, mais avec toute la ligne pivotée de 90° dans le sens des aiguilles d'une montre. |
| sideways-right | Un alias de sideways conservé à des fins de compatibilité. |
| use-glyph-orientation | Déprécié. Anciennement mappé aux propriétés SVG obsolètes glyph-orientation-vertical et glyph-orientation-horizontal. N'est plus pris en charge dans les navigateurs modernes. |
| initial | Permet à la propriété d'utiliser sa valeur par défaut. |
| inherit | Hérite de la propriété de son élément parent. |
Propriétés associées
writing-mode— définit la direction de la ligne (horizontale ou verticale) et est requis pour quetext-orientationprenne effet.text-combine-upright— regroupe une courte séquence de caractères (comme une année à deux chiffres) dans l'espace d'un seul caractère droit dans le texte vertical.direction— contrôle la direction de base bidirectionnelle du texte.text-align— aligne le contenu en ligne le long de la ligne, ce qui en mode vertical correspond à l'alignement haut/bas.