# 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; }`

:

## See also

- the `font-kerning` property
  that sets kerning for a font
- the `text-orientation`,
  that sets the orientation of characters in vertical text

← →
↑
en ru