CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML (Hypertext Markup Language). CSS provides a wide range of properties to style the content of a web page. One such property is the writing-mode property, which is used to define the direction of the text flow in a block-level element.
Writing-mode is a CSS property that defines the direction of the text flow in a block-level element. It specifies whether the text should be displayed horizontally or vertically, and the direction in which it should flow. The writing-mode property is used to control the layout of text in a web page, and it is particularly useful for languages that are written vertically, such as Chinese, Japanese, and Korean.
The writing-mode property can take one of four values:
horizontal-tb
: This is the default value, and it specifies that the text should be displayed horizontally from left to right.vertical-rl
: This value specifies that the text should be displayed vertically from top to bottom, with the text flowing from right to left.vertical-lr
: This value specifies that the text should be displayed vertically from top to bottom, with the text flowing from left to right.sideways-rl
: This value specifies that the text should be displayed horizontally, but rotated 90 degrees clockwise, with the text flowing from top to bottom and from right to left.Let's take a look at some code examples to see how the writing-mode property works:
In this example, we have a paragraph of text that is displayed horizontally from left to right:
<p style="writing-mode: horizontal-tb;">
This is a paragraph of text that is displayed horizontally.
</p>
The output of this code will be:
This is a paragraph of text that is displayed horizontally.
In this example, we have a paragraph of text that is displayed vertically from top to bottom, with the text flowing from right to left:
<p style="writing-mode: vertical-rl;">
This is a paragraph of text that is displayed vertically from top to bottom, with the text flowing from right to left.
</p>
The output of this code will be:
This is a paragraph of text that is displayed vertically from top to bottom, with the text flowing from right to left.
In this example, we have a paragraph of text that is displayed vertically from top to bottom, with the text flowing from left to right:
<p style="writing-mode: vertical-lr;">
This is a paragraph of text that is displayed vertically from top to bottom, with the text flowing from left to right.
</p>
The output of this code will be:
This is a paragraph of text that is displayed vertically from top to bottom, with the text flowing from left to right.
In this example, we have a paragraph of text that is displayed horizontally, but rotated 90 degrees clockwise, with the text flowing from top to bottom and from right to left:
<p style="writing-mode: sideways-rl;">
This is a paragraph of text that is displayed sideways, with the text flowing from top to bottom and from right to left.
</p>
The output of this code will be:
This is a paragraph of text that is displayed sideways, with the text flowing from top to bottom and from right to left.
The writing-mode property is a useful CSS property that allows you to control the direction of the text flow in a block-level element. It is particularly useful for languages that are written vertically, such as Chinese, Japanese, and Korean. By using the writing-mode property, you can ensure that your web page is displayed correctly for users who speak these languages.