La writing-modepropriété modifie l'alignement du texte afin qu'il puisse être lu de haut en bas ou de gauche à droite, selon la langue. Par exemple, disons que nous voulons ajouter du texte qui se lit de haut en bas et de droite à gauche, comme ceci:
.vertical-rl ( writing-mode: vertical-rl; )Voir le mode d'écriture Pen: vertical-rl par CSS-Tricks (@ css-tricks) sur CodePen.
Ceci est particulièrement utile dans des langues telles que le chinois, le japonais ou le coréen où le texte est souvent placé verticalement. En anglais, il est plus probable que vous souhaitiez utiliser cette propriété pour des raisons esthétiques, telles que l'alignement d'un titre dans un bloc de texte comme celui-ci:
Voir le Pen YWBWGA par CSS-Tricks (@ css-tricks) sur CodePen.
Valeurs
Dans les exemples ci-dessous, j'ai rendu la première lettre du texte rouge, afin qu'il soit plus facile de voir dans quelle direction vous devez commencer la lecture.
horizontal-tb
Il s'agit de la valeur par défaut de la propriété: le texte est lu de gauche à droite et de haut en bas.
Voir le mode d'écriture Pen: horizontal-tb par CSS-Tricks (@ css-tricks) sur CodePen.
vertical-rl
Le texte est lu de droite à gauche et de haut en bas:
Voir le mode d'écriture Pen: vertical-rl par CSS-Tricks (@ css-tricks) sur CodePen.
vertical-lr
Le texte est lu de gauche à droite et de haut en bas:
Voir le mode d'écriture Pen: vertical-rl par CSS-Tricks (@ css-tricks) sur CodePen.
Liens connexes
- Texte vertical avec modes d'écriture CSS3
- Ahmad Shadeed en mode écriture
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5,1 * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 3 * | 5,0-5,1 * |