Propriété CSS text-orientation
La propriété text-orientation spécifie l'orientation des caractères dans une ligne.
Elle possède cinq valeurs : mixed, upright, sideways, sideways-right et use-glyph-orientation. Toutes fonctionnent en modes typographiques verticaux. La valeur sideways-left a été supprimée de la spécification, et sideways-right n'est désormais conservée que comme un alias de sideways. Pour les systèmes d'écriture non verticaux, les valeurs sideways-lr et sideways-rl ont été ajoutées à la propriété writing-mode à la place.
INFO
La propriété text-orientation n'a d'effet que lorsque writing-mode est « vertical ».
| Valeur initiale | mixed |
|---|---|
| S'applique à | Tous les éléments, à l'exception des groupes de lignes de tableau, des lignes, des groupes de colonnes et des colonnes. |
| Héritée | Oui. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.textOrientation = "upright"; |
Syntaxe
Valeurs CSS de 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 pour 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>Résultat
Exemple de la propriété text-orientation avec la valeur « upright » :
Exemple de CSS text-orientation avec la valeur upright
<!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>Exemple de la propriété text-orientation :
Autre exemple de code CSS pour 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>Valeurs
| Valeur | Description |
|---|---|
| mixed | Les scripts horizontaux sont affichés à la verticale, tandis que les scripts verticaux sont tourné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 affichés à la verticale, quel que soit leur script. Cela n'affecte pas la propriété direction. |
| sideways | Les caractères sont disposés comme s'ils étaient horizontaux, mais avec toute la ligne tournée de 90° dans le sens des aiguilles d'une montre. |
| sideways-right | Un alias de sideways conservé pour des raisons de compatibilité. |
| use-glyph-orientation | Déprécié. Correspondait précédemment aux propriétés SVG obsolètes glyph-orientation-vertical et glyph-orientation-horizontal. Il n'est plus pris en charge dans les navigateurs modernes. |
| initial | Définit la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
En CSS, quelles propriétés sont utilisées pour contrôler l'orientation verticale du texte ?