Den writing-modeegenskapen ändrar inriktningen av texten så att den kan läsas uppifrån och ned eller från vänster till höger, beroende på vilket språk. Låt oss till exempel säga att vi vill lägga till lite text som läses uppifrån och ner och från höger till vänster, så här:
.vertical-rl ( writing-mode: vertical-rl; )Se pennans skrivläge: vertical-rl av CSS-Tricks (@ css-tricks) på CodePen.
Detta är mest användbart på språk som kinesiska, japanska eller koreanska, där texten ofta är vertikalt. På engelska är det mer troligt att du vill använda den här egenskapen av estetiska skäl, som att justera en rubrik i ett textblock så här:
Se pennan YWBWGA av CSS-Tricks (@ css-tricks) på CodePen.
Värden
I exemplen nedan har jag gjort den första bokstaven i texten röd, bara så att det är lättare att se vilken riktning du behöver för att börja läsa.
horisontell-tb
Detta är standardvärdet för egenskapen: texten läses från vänster till höger och uppifrån och ner.
Se pennans skrivläge: horisontell-tb av CSS-Tricks (@ css-tricks) på CodePen.
vertikal-rl
Text läses från höger till vänster och uppifrån och ned:
Se pennans skrivläge: vertical-rl av CSS-Tricks (@ css-tricks) på CodePen.
vertikal-lr
Text läses från vänster till höger och uppifrån och ned:
Se pennans skrivläge: vertical-rl av CSS-Tricks (@ css-tricks) på CodePen.
Relaterade länkar
- Vertikal text med CSS3-skrivlägen
- Ahmad Shadeed om skrivläge
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5,1 * |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 5,0-5,1 * |