writing-modeVlastnosť zmení zarovnanie textu, takže možno čítať zhora nadol alebo zľava doprava, v závislosti na jazyku. Povedzme napríklad, že chceme pridať text, ktorý sa číta zhora nadol a sprava doľava, napríklad takto:
.vertical-rl ( writing-mode: vertical-rl; )Pozrite si režim písania perom: vertical-rl od CSS-Tricks (@ css-tricks) na CodePen.
To je najužitočnejšie v jazykoch, ako sú čínština, japončina alebo kórejčina, kde je text často nastavený zvisle. V anglickom jazyku je pravdepodobnejšie, že túto vlastnosť budete chcieť použiť z estetických dôvodov, ako je napríklad zarovnanie nadpisu v bloku textu, ako je tento:
Prezrite si pero YWBWGA od CSS-Tricks (@ css-tricks) na stránkach CodePen.
Hodnoty
V nižšie uvedených príkladoch som urobil prvé písmeno textu červeným, aby bolo ľahšie zistiť, ktorým smerom je potrebné začať čítať.
horizontálne-tb
Toto je predvolená hodnota vlastnosti: text sa číta zľava doprava a zhora nadol.
Pozrite si režim písania perom: horizontal-tb od CSS-Tricks (@ css-tricks) na CodePen.
vertikálne-rl
Text sa číta sprava doľava a zhora nadol:
Pozrite si režim písania perom: vertical-rl od CSS-Tricks (@ css-tricks) na CodePen.
vertikálne-lr
Text sa číta zľava doprava a zhora nadol:
Pozrite si režim písania perom: vertical-rl od CSS-Tricks (@ css-tricks) na CodePen.
Súvisiace odkazy
- Vertikálny text s režimami zápisu CSS3
- Ahmad Shadeed v režime písania
Podpora prehliadača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5,1 * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 5,0-5,1 * |