writing-modeImovine mijenja poravnanje teksta, tako da se može čitati od vrha do dna ili s lijeva na desno, ovisno o jeziku. Na primjer, recimo da želimo dodati neki tekst koji se čita odozgo prema dolje i zdesna nalijevo, ovako:
.vertical-rl ( writing-mode: vertical-rl; )Pogledajte način pisanja olovkom: vertical-rl od CSS-Tricks (@ css-tricks) na CodePenu.
To je najkorisnije na jezicima kao što su kineski, japanski ili korejski gdje je tekst često postavljen okomito. Na engleskom jeziku je vjerojatnije da ćete ovo svojstvo htjeti koristiti iz estetskih razloga, poput poravnavanja naslova u bloku teksta poput ovog:
Pogledajte olovku YWBWGA tvrtke CSS-Tricks (@ css-tricks) na CodePenu.
Vrijednosti
U donjim sam primjerima prvo slovo teksta učinio crvenom, samo da bi bilo lakše vidjeti u kojem smjeru trebate početi čitati.
vodoravno-tb
Ovo je zadana vrijednost svojstva: tekst se čita slijeva udesno i odozgo prema dolje.
Pogledajte način pisanja olovkom: horizontal-tb od CSS-Tricks (@ css-tricks) na CodePen-u.
vertikalno-rl
Tekst se čita zdesna nalijevo i odozgo prema dolje:
Pogledajte način pisanja olovkom: vertical-rl od CSS-Tricks (@ css-tricks) na CodePenu.
vertikalno-lr
Tekst se čita slijeva udesno i odozgo prema dolje:
Pogledajte način pisanja olovkom: vertical-rl od CSS-Tricks (@ css-tricks) na CodePenu.
Povezani Linkovi
- Okomiti tekst s CSS3 načinima pisanja
- Ahmad Shadeed u načinu pisanja
Podrška preglednika
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5,1 * |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 5,0-5,1 * |