writing-modeĪpašums maina saskaņošanu tekstu tā, lai to var nolasīt no augšas uz leju vai no kreisās uz labo pusi, atkarībā no valodas. Piemēram, pieņemsim, ka mēs vēlamies pievienot tekstu, kas tiek lasīts no augšas uz leju un no labās uz kreiso, piemēram:
.vertical-rl ( writing-mode: vertical-rl; )Skatiet CSS-Tricks (@ css-tricks), izmantojot CodePen, pildspalvas rakstīšanas režīmu: vertical-rl.
Tas ir visnoderīgākais tādās valodās kā ķīniešu, japāņu vai korejiešu valoda, kur teksts bieži tiek iestatīts vertikāli. Angļu valodā, visticamāk, šo īpašību vēlaties izmantot estētisku apsvērumu dēļ, piemēram, virsraksta izlīdzināšanai teksta blokā šādi:
Skatiet CSS-Tricks Pen YWBWGA (@ css-tricks) vietnē CodePen.
Vērtības
Tālāk sniegtajos piemēros teksta pirmo burtu esmu padarījis sarkanu, lai būtu vieglāk saprast, kurā virzienā jāsāk lasīt.
horizontāli-tb
Šī ir rekvizīta noklusējuma vērtība: teksts tiek lasīts no kreisās uz labo un no augšas uz leju.
Skatiet CSS-Tricks (@ css-tricks) rakstīšanas režīmu Pildspalva: horizontal-tb vietnē CodePen.
vertikāli-rl
Teksts tiek lasīts no labās uz kreiso un no augšas uz leju:
Skatiet CSS-Tricks (@ css-tricks), izmantojot CodePen, pildspalvas rakstīšanas režīmu: vertical-rl.
vertikāli-lr
Teksts tiek lasīts no kreisās uz labo un no augšas uz leju:
Skatiet CSS-Tricks (@ css-tricks), izmantojot CodePen, pildspalvas rakstīšanas režīmu: vertical-rl.
Saistītās saites
- Vertikāls teksts ar CSS3 rakstīšanas režīmiem
- Ahmads Aizēnoja rakstīšanas režīmu
Pārlūkprogrammas atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5,1 * |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 5,0–5,1 * |