Свойство writing-mode

Свойство writing-mode задает вертикальное или горизонтальное направление текста на странице. Значения могут быть horizontal-tb (по горизонтали слева направо и сверху вниз), vertical-rl (по вертикали сверху вниз и справа налево), vertical-lr (по вертикали сверху вниз и слева направо).

Синтаксис

cssселектор {
  writing-mode: horizontal-tb или vertical-rl или vertical-lr;
}

Пример

Давайте зададим нашему тексту направление по горизонтали слева направо и сверху вниз:

html<p>
  Text
</p>

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

Результат:

Пример

А теперь давайте поменяем направление по вертикали сверху вниз и справа налево:

html<p>
  Text
</p>

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

Результат:

Пример

Давайте зададим нашему тексту направление по вертикали сверху вниз и слева направо:

html<p>
  Text
</p>

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

Результат:

Смотрите также