CSS writing-modeProperty
Example
The table shows 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;
}
Try it Yourself »
Attribute definitions and usage instructions
The writing-mode property defines how text is laid out horizontally or vertically.
The syntax format is as follows:
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
- horizontal-tb: A horizontal writing mode from top to bottom. That is, left-right-top-bottom.
- vertical-rl: A vertical writing mode from right to left. That is, top-bottom-right-left.
- vertical-lr: content flows from top to bottom vertically, and from left to right horizontally.
- sideways-rl: content is arranged from top to bottom vertically.
- sideways-lr: content is arranged from bottom to top vertically.
Browser Support
The numbers in the table indicate the first browser version that supports the property.
| Property | |||||
|---|---|---|---|---|---|
| writing-mode | 8.0 | 6.0 | 41.0 | 5.1 | 15 |