Javatpoint Logo
Javatpoint Logo

CSS writing-mode property

The writing-mode CSS property specifies whether the text is written in the vertical or horizontal direction. If the direction is vertical, it can be from right to left (vertical-rl) or from left to right (vertical-lr). This property sets whether the lines of text are laid out vertically or horizontally. It specifies the direction in which the content flows on the page. It specifies the block flow direction, the direction in which the block-level boxes (or containers) are stacked, and the direction in which they flow within the container.

Syntax

Property values

The values of this property are defined as follows.

horizontal-tb: It is the default value of this property. On using this value, the text will be in the horizontal direction and read from left to right and top to bottom.

vertical-rl: This value displays the text in the vertical direction, and the text is read from top to bottom and right to left.

vertical-lr: This value works similar to the vertical-rl, but the text is read from left to right.

Example1

In this example, we are using all the main values of the CSS writing-mode property. Here, there are three paragraph elements having some lines of text. We are applying the writing-mode: horizontal-tb; to the first paragraph element, writing-mode: vertical-lr; to the second paragraph and writing-mode: vertical-rl; to the third paragraph.

In the output, we can see that the content of the second paragraph lays vertically in left to right direction, and the content of the third paragraph also lays out vertically but in right to left direction.

Test it Now

Output

Example2

In this example, we are also using the letter-spacing property with the writing-mode property.

Test it Now

Output






Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA