Ominaisuus writing-mode

Ominaisuus writing-mode asettaa tekstin pystysuunnan tai vaakasuunnan sivulla. Arvot voivat olla horizontal-tb (vaakasuunnassa vasemmalta oikealle ja ylhäältä alas), vertical-rl (pystysuunnassa ylhäältä alas ja oikealta vasemmalle), vertical-lr (pystysuunnassa ylhäältä alas ja vasemmalta oikealle).

Syntaksi

cssvalitsija {
  writing-mode: horizontal-tb tai vertical-rl tai vertical-lr;
}

Esimerkki

Asetetaan tekstillemme suunta vaakasuunnassa vasemmalta oikealle ja ylhäältä alas:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  writing-mode: horizontal-tb;
  font-size: 2em;
  margin-top: 0;
}

Результат:

Esimerkki

Ja nyt vaihdetaan suunta pystysuunnassa ylhäältä alas ja oikealta vasemmalle:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  writing-mode: vertical-rl;
  font-size: 2em;
  margin-top: 0;
}

Результат:

Esimerkki

Asetetaan tekstillemme suunta pystysuunnassa ylhäältä alas ja vasemmalta oikealle:

html<p>
  Text
</p>

cssbody {
  width: 100px;
  height: 50px;
}
p {
  writing-mode: vertical-lr;
  font-size: 2em;
  margin-top: 0;
}

Результат:

Katso myös