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

cssselector {
  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:

html<p>
  Text
</p>

cssbody {
  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:

html<p>
  Text
</p>

cssbody {
  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:

html<p>
  Text
</p>

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

Результат:

See also