CSS :: Свойство writing-mode

css-свойство writing-mode (от англ. writing mode – режим записи) устанавливает горизонтальное или вертикальное направление текста элемента.

Характеристики

Значение по умолчанию: horizontal-tb.
Применяется: ко всем элементам, за исключением ячеек и строк таблицы.
Наследуется: да.
Анимируется: нет.
JavaScript: object.style.writingMode="value".

Синтаксис

writing-mode: horizontal-tb | vertical-rl | vertical-lr

Значения

horizontal-tb – устанавливает горизонтальное направление текста слева направо с заполнением строками сверху вниз.
vertical-rl – устанавливает вертикальное направление текста сверху вниз с заполнением строками справо налево.
vertical-lr – устанавливает вертикальное направление текста сверху вниз с заполнением строками слева направо.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/writing-mode

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		p{
		width: 250px;
		height: 250px;
		margin: 2em;
		}
		
		.p_1{
		writing-mode: horizontal-tb;
		background-color: yellow;
		}
		
		.p_2{
		writing-mode: vertical-rl;
		background-color: green;
		}
		
		.p_3{
		writing-mode: vertical-lr;
		background-color: violet;
		}
		
	</style>
	
</head>
<body>

	<p class="p_1">
		writing-mode: horizontal-tb writing-mode: horizontal-tb 
	</p>
	
	<p class="p_2">
		writing-mode: vertical-rl writing-mode: vertical-rl
	</p>
	
	<p class="p_3">
		writing-mode: vertical-lr writing-mode: vertical-lr
	</p>
	
</body>
</html>

Пример №1