CSS `writing-mode` Property

Example

The table demonstrates different writing modes:

.example.Text1 span, .example.Text1 {
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: horizontal-tb;
}

.example.Text2 span, .example.Text2 {
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
}

.example.Text3 span, .example.Text3 {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
}

.example.Text4 span, .example.Text4 {
  writing-mode: sideways-lr;
  -webkit-writing-mode: sideways-lr;
  -ms-writing-mode: sideways-lr;
}

.example.Text5 span, .example.Text5 {
  writing-mode: sideways-rl;
  -webkit-writing-mode: sideways-rl;
  -ms-writing-mode: sideways-rl;
}

Property Definition and Usage

The writing-mode property defines how text is laid out horizontally or vertically.

The syntax is as follows:

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

horizontal-tb: Text flows horizontally from left to right, then vertically from top to bottom.
vertical-rl: Text flows vertically from top to bottom, then horizontally from right to left.
vertical-lr: Text flows vertically from top to bottom, then horizontally from left to right.
sideways-rl: Text flows vertically from top to bottom.
sideways-lr: Text flows vertically from bottom to top.

Browser Support

The numbers in the table indicate the first browser version that fully supports the property.

Property
writing-mode	8.0	6.0	41.0	5.1	15

❮ Pr Padding Left Sel Last Of Type ❯

CSS writing-mode Property

Example

Property Definition and Usage

Browser Support

CSS `writing-mode` Property