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.

<!DOCTYPE html>
<html>
 <head>
  <style>
    p {   
      border: 2px solid black;
      width: 300px;
      height: 300px;
	  font-size: 23px;
    }
    #tb {
      writing-mode: horizontal-tb;
    }
    
    #lr {
      writing-mode: vertical-lr;
    }
    
    #rl {
       writing-mode: vertical-rl;
    }
  </style>
 </head>
 <center>
 <body>
   <h1> Example of CSS writing-mode property </h1>
   <h2> writing-mode: horizontal-tb; </h2>
   <p id="tb"> 
   Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
   </p>
   <h2> writing-mode: vertical-lr; </h2>
   <p id="lr">
   Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
   </p>
   <h2> writing-mode: vertical-rl; </h2>
   <p id="rl">
   Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
   </p>
   </center>
 </body>
</html>

Test it Now

Output

Example2

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

<!DOCTYPE html>
<html>
 <head>
  <style>
    h2 {   
      border: 2px solid black;
      width: 300px;
      height: 150px;
	  letter-spacing: 15px;
    }
    #tb {
      writing-mode: horizontal-tb;
    }
    
    #lr {
      writing-mode: vertical-lr;
    }
    
    #rl {
       writing-mode: vertical-rl;
    }
  </style>
 </head>
 <center>
 <body>
   <h1> Example of CSS writing-mode property </h1>
   <h2 id="tb"> writing-mode: horizontal-tb; </h2>
   <h2 id="lr" style= "height: 300px;"> writing-mode: vertical-lr; </h2><br>
   <h2 id="rl" style= "height: 300px;"> writing-mode: vertical-rl; </h2>
   </center>
 </body>
</html>

Test it Now

Output

Next TopicCSS background-origin

← prev next →