writing-modeNuosavybė keičia teksto lygiavimą, kad juos būtų galima perskaityti iš viršaus į apačią arba iš kairės į dešinę, priklausomai nuo kalbos. Pvz., Tarkime, kad norime pridėti šiek tiek teksto, kuris būtų skaitomas iš viršaus į apačią ir iš dešinės į kairę:
.vertical-rl ( writing-mode: vertical-rl; )„CodePen“ žr. „CSS-Tricks“ (@ css-tricks) rašiklio rašymo režimas: vertical-rl.
Tai naudingiausia kalbomis, tokiomis kaip kinų, japonų ar korėjiečių, kur tekstas dažnai nustatomas vertikaliai. Anglų kalba labiau tikėtina, kad šią ypatybę norėsite naudoti dėl estetinių priežasčių, pvz., Antraštės sulyginimo teksto bloke:
Peržiūrėkite „CSS-Tricks“ rašiklį „YWBWGA“ (@ css-tricks) „CodePen“.
Vertybės
Žemiau pateiktuose pavyzdžiuose pirmą teksto raidę padariau raudoną, kad būtų lengviau pamatyti, kuria kryptimi reikia pradėti skaityti.
horizontaliai-tb
Tai yra numatytoji ypatybės vertė: tekstas skaitomas iš kairės į dešinę ir iš viršaus į apačią.
Žr. „CSP-Tricks“ (@ css-tricks) „CodePen“ rašymo rašymo režimą: horizontal-tb.
vertikalus-rl
Tekstas skaitomas iš dešinės į kairę ir iš viršaus į apačią:
„CodePen“ žr. „CSS-Tricks“ (@ css-tricks) rašiklio rašymo režimas: vertical-rl.
vertikalus-lr
Tekstas skaitomas iš kairės į dešinę ir iš viršaus į apačią:
„CodePen“ žr. „CSS-Tricks“ (@ css-tricks) rašiklio rašymo režimas: vertical-rl.
Susijusios nuorodos
- Vertikalus tekstas su CSS3 rašymo režimais
- Ahmad Shadeed rašymo režimu
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5,1 * |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 3 * | 5,0–5,1 * |