writing-modeVara muutub viimist teksti nii, et seda saab lugeda ülevalt alla või vasakult paremale, olenevalt keelest. Oletame näiteks, et tahame lisada teksti, mida loetakse ülevalt alla ja paremalt vasakule:
.vertical-rl ( writing-mode: vertical-rl; )Vaadake CodeSenilt CSS-Tricks (@ css-tricks) pliiatsi kirjutamisrežiimi: vertical-rl.
See on kõige kasulikum sellistes keeltes nagu hiina, jaapani või korea, kus tekst on sageli seatud vertikaalselt. Inglise keeles on tõenäolisem, et soovite seda omadust kasutada esteetilistel põhjustel, näiteks pealkirja joondamiseks järgmises tekstiplokis:
Vaadake CodePenil CSS-Tricksi sulepea YWBWGA (@ css-tricks).
Väärtused
Allpool toodud näidetes olen teksti esimese tähe punaseks teinud, et oleks lihtsam näha, millises suunas peate lugema hakkama.
horisontaalne-tb
See on atribuudi vaikeväärtus: teksti loetakse vasakult paremale ja ülevalt alla.
Vaadake CodePenil CSS-Tricksi (@ css-tricks) pliiatsi kirjutamisrežiimi: horizontal-tb.
vertikaalne-rl
Teksti loetakse paremalt vasakule ja ülevalt alla:
Vaadake CodeSenilt CSS-Tricks (@ css-tricks) pliiatsi kirjutamisrežiimi: vertical-rl.
vertikaalne-lr
Teksti loetakse vasakult paremale ja ülevalt alla:
Vaadake CodeSenilt CSS-Tricks (@ css-tricks) pliiatsi kirjutamisrežiimi: vertical-rl.
Seotud lingid
- Vertikaalne tekst CSS3 kirjutusrežiimidega
- Ahmad Varjutatud kirjutamisrežiimis
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5,1 * |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 5,0–5,1 * |