CSS - Writing Mode
Types of Writing Modes
Horizontal-tb (Default)
The horizontal-tb writing mode is the default in CSS. In this mode, the text flows horizontally from left to right, and the next line appears below the previous one. This is common for languages written horizontally, such as English.
Example code snippet
.horizontal-tb {
writing-mode: horizontal-tb;
}Vertical-rl
The vertical-rl writing mode displays text vertically, with lines flowing from right to left. The text is rotated 90 degrees clockwise, and the next line appears to the left of the previous one. This mode is useful for vertical navigation menus or displaying text in languages traditionally written vertically, such as Japanese or Chinese.
Example code snippet
.vertical-rl {
writing-mode: vertical-rl;
}Vertical-lr
The vertical-lr writing mode is similar to vertical-rl, but lines flow from left to right. The text is rotated 90 degrees counter-clockwise, and the next line appears to the right of the previous one. This mode can be used for vertical text layouts.
Example code snippet
.vertical-lr {
writing-mode: vertical-lr;
}Sideways-rl
The sideways-rl writing mode displays text vertically with lines flowing from right to left. Unlike vertical-rl, characters are not rotated and remain upright. This mode is useful for compact vertical layouts or short vertical labels.
Example code snippet
.sideways-rl {
writing-mode: sideways-rl;
}Sideways-lr
The sideways-lr writing mode is similar to sideways-rl, but lines flow from left to right. Characters remain upright, and the next line appears to the right of the previous one. This mode can be applied in specific design scenarios needing a compact vertical layout.
Example code snippet
.sideways-lr {
writing-mode: sideways-lr;
}