Свойство writing-mode

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

Синтаксис

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

Пример

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

<p>
	Text
</p>

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

Пример

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

<p>
	Text
</p>

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

Пример

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

<p>
	Text
</p>

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

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

свойство font-kerning,
которое задает кернинг шрифту
свойство text-orientation,
которое задает ориентацию символам в вертикальном тексте