Den writing-modeegenskapen endrer justeringen av teksten slik at den kan leses fra topp til bunn eller fra venstre mot høyre, avhengig av språket. La oss for eksempel si at vi vil legge til litt tekst som leses fra topp til bunn og fra høyre til venstre, slik:
.vertical-rl ( writing-mode: vertical-rl; )Se pennens skrivemodus: vertical-rl av CSS-Tricks (@ css-tricks) på CodePen.
Dette er mest nyttig på språk som kinesisk, japansk eller koreansk der teksten ofte er satt vertikalt. På engelsk er det mer sannsynlig at du vil bruke denne egenskapen av estetiske grunner, for eksempel å justere en overskrift i en tekstblokk som denne:
Se pennen YWBWGA av CSS-Tricks (@ css-tricks) på CodePen.
Verdier
I eksemplene nedenfor har jeg laget den første bokstaven i teksten rød, bare så det er lettere å se hvilken retning du trenger for å begynne å lese.
horisontal-tb
Dette er standardverdien for egenskapen: tekst leses fra venstre til høyre og topp til bunn.
Se pennens skrivemodus: horisontal-tb av CSS-Tricks (@ css-tricks) på CodePen.
vertikal-rl
Teksten leses fra høyre til venstre og topp til bunn:
Se pennens skrivemodus: vertical-rl av CSS-Tricks (@ css-tricks) på CodePen.
vertikal-lr
Teksten leses fra venstre til høyre og topp til bunn:
Se pennens skrivemodus: vertical-rl av CSS-Tricks (@ css-tricks) på CodePen.
Relaterte linker
- Vertikal tekst med CSS3 skrivemodus
- Ahmad Shadeed om skrivemodus
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5,1 * |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 5,0-5,1 * |