writing-modeOminaisuuksien muutokset linjaus tekstiä niin, että se voidaan lukea ylhäältä alas tai vasemmalta oikealle, riippuen kielestä. Oletetaan esimerkiksi, että haluamme lisätä tekstiä, joka luetaan ylhäältä alas ja oikealta vasemmalle, kuten tämä:
.vertical-rl ( writing-mode: vertical-rl; )Katso CSS-Tricksin (@ css-tricks) kynäkirjoitustila: vertical-rl CodePenistä.
Tämä on eniten hyötyä kielillä, kuten kiina, japani tai korea, joissa teksti asetetaan usein pystysuunnassa. Englannin kielellä on todennäköisempää, että haluat käyttää tätä ominaisuutta esteettisistä syistä, kuten otsikon kohdistaminen tekstilohkoon näin:
Katso CSS-Tricksin kynä YWBWGA (@ css-tricks) CodePenistä.
Arvot
Alla olevissa esimerkeissä olen tehnyt tekstin ensimmäisen kirjaimen punaiseksi, jotta on helpompi nähdä, mihin suuntaan sinun on aloitettava lukeminen.
vaaka-tb
Tämä on ominaisuuden oletusarvo: teksti luetaan vasemmalta oikealle ja ylhäältä alas.
Katso CSS-Tricksin (@ css-tricks) kynäkirjoitustila: horizontal-tb CodePenistä.
pystysuora-rl
Teksti luetaan oikealta vasemmalle ja ylhäältä alas:
Katso CSS-Tricksin (@ css-tricks) kynäkirjoitustila: vertical-rl CodePenistä.
pystysuuntainen-lr
Teksti luetaan vasemmalta oikealle ja ylhäältä alas:
Katso CSS-Tricksin (@ css-tricks) kynäkirjoitustila: vertical-rl CodePenistä.
Liittyvät linkit
- Pystyteksti CSS3-kirjoitusmoodeilla
- Ahmad Varjostettu kirjoitustilassa
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5,1 * |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 5,0-5,1 * |