The writing-mode CSS property is used to specify the direction in which text and other elements flow within a block-level element. It allows you to control the orientation of text and the layout of elements in horizontal or vertical writing modes.
The writing-mode property accepts various values that determine the flow of content:
-
horizontal-tb: This is the default value. Text and other elements flow horizontally from top to bottom. -
vertical-rl: Text and other elements flow vertically from right to left. -
vertical-lr: Text and other elements flow vertically from left to right.
Here’s an example:
.container {
writing-mode: vertical-rl;
}
In this example, the .container class sets the writing-mode property to vertical-rl. This causes the text and other elements inside the container to flow vertically from right to left.
The writing-mode property can be combined with other CSS properties, such as text-orientation, text-combine-upright, or text-justify, to achieve specific text layouts and effects.
It’s important to note that the writing-mode property affects the flow of content within a block-level element, including how text is displayed and how other elements are positioned. It is particularly useful when designing layouts for non-Latin languages or when creating vertical text arrangements.
However, it’s worth considering that browser support for different writing modes may vary, and the behavior and rendering of text can be influenced by the specific fonts, language settings, and platform.