Den writing-modeegenskab ændrer justeringen af teksten, så den kan læses fra top til bund eller fra venstre mod højre, afhængigt af sproget. Lad os for eksempel sige, at vi vil tilføje nogle tekst, der læses fra top til bund og fra højre til venstre, som denne:
.vertical-rl ( writing-mode: vertical-rl; )Se pennens skrivemåde: lodret-rl af CSS-Tricks (@ css-tricks) på CodePen.
Dette er mest nyttigt på sprog som kinesisk, japansk eller koreansk, hvor teksten ofte indstilles lodret. På engelsk er det mere sandsynligt, at du vil bruge denne egenskab af æstetiske grunde, såsom at justere en overskrift i en tekstblok som denne:
Se pennen YWBWGA af CSS-Tricks (@ css-tricks) på CodePen.
Værdier
I eksemplerne nedenfor har jeg gjort det første bogstav i teksten rød, bare så det er lettere at se, hvilken retning du har brug for for at begynde at læse.
vandret-tb
Dette er egenskabens standardværdi: tekst læses fra venstre mod højre og top til bund.
Se pennens skrivemåde: vandret-tb af CSS-Tricks (@ css-tricks) på CodePen.
lodret-rl
Teksten læses fra højre til venstre og top til bund:
Se pennens skrivemåde: lodret-rl af CSS-Tricks (@ css-tricks) på CodePen.
lodret-lr
Teksten læses fra venstre mod højre og top til bund:
Se pennens skrivemåde: lodret-rl af CSS-Tricks (@ css-tricks) på CodePen.
Relaterede links
- Lodret tekst med CSS3-skrivemetoder
- Ahmad Shadeed om skrivemåde
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5.1 * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 5,0-5,1 * |