The writing-mode property

The writing-mode property specifies a vertical or horizontal direction of text on a page. Values can be horizontal-tb (horizontal from left to right and top to bottom), vertical-rl (vertical from top to bottom and right to left), vertical-lr (vertically from top to bottom and left to right).

Syntax

selector {
	writing-mode: horizontal-tb or vertical-rl or vertical-lr;
}

Example

Let's give our text a horizontal direction from left to right and from top to bottom:

<p>
	Text
</p>

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

Example

Now let's change the vertical direction from top to bottom and from right to left:

<p>
	Text
</p>

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

Example

Let's give our text a vertical direction from top to bottom and left to right:

<p>
	Text
</p>

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

The writing-mode property

Syntax

Example

Example

Example

See also