De writing-modeeigenschap verandert de uitlijning van de tekst zodat deze van boven naar beneden of van links naar rechts kan worden gelezen, afhankelijk van de taal. Laten we bijvoorbeeld zeggen dat we wat tekst willen toevoegen die van boven naar beneden en van rechts naar links wordt gelezen, als volgt:
.vertical-rl ( writing-mode: vertical-rl; )Zie de Pen-schrijfmodus: vertical-rl door CSS-Tricks (@ css-tricks) op CodePen.
Dit is vooral handig in talen zoals Chinees, Japans of Koreaans, waar de tekst vaak verticaal wordt geplaatst. In de Engelse taal is de kans groter dat u deze eigenschap om esthetische redenen wilt gebruiken, zoals het uitlijnen van een kop in een tekstblok als volgt:
Zie de Pen YWBWGA door CSS-Tricks (@ css-tricks) op CodePen.
Waarden
In de onderstaande voorbeelden heb ik de eerste letter van de tekst rood gemaakt, zodat je gemakkelijker kunt zien in welke richting je moet beginnen met lezen.
horizontaal-tb
Dit is de standaardwaarde van de eigenschap: tekst wordt van links naar rechts en van boven naar beneden gelezen.
Zie de Pen-schrijfmodus: horizontaal-tb door CSS-Tricks (@ css-tricks) op CodePen.
verticaal-rl
Tekst wordt van rechts naar links en van boven naar beneden gelezen:
Zie de Pen-schrijfmodus: vertical-rl door CSS-Tricks (@ css-tricks) op CodePen.
verticaal-lr
Tekst wordt van links naar rechts en van boven naar beneden gelezen:
Zie de Pen-schrijfmodus: vertical-rl door CSS-Tricks (@ css-tricks) op CodePen.
Gerelateerde Links
- Verticale tekst met CSS3-schrijfmodi
- Ahmad Shadeed in de schrijfmodus
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5,1 * |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 5.0-5.1 * |