Open In App
Related Articles

CSS writing-mode Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The writing-mode CSS property is used to signify whether the lines of text are laid out horizontally or vertically and also the direction in which the block progress. 

Syntax:

writing-mode: horizontal-tb|vertical-rl|vertical-lr;

Default Value: Its default value is horizontal-tb.

Property values:

  • horizontal-tb: This mode lets the content flow horizontally from left to right, and vertically from top to bottom. The next horizontal line is positioned below the previous line. 
  • vertical-rl: This mode lets the content flow vertically from top to bottom, and horizontally from right to left. The next vertical line is positioned to the left of the previous line. 
  • vertical-lr: This mode lets the content flow vertically from top to bottom, and horizontally from left to right. The next vertical line is positioned to the right of the previous line. 

Example: In this example, we are using writing-mode: horizontal-tb; property.

html

<!DOCTYPE html>
<html>
   
<head>
    <title>writing-mode Property</title>
    <style>
        p.geek {
            width: 300px;
            height: 100px;
            border: 1px solid black;
            writing-mode: horizontal-tb;
            color: white;
            background: green;
        }
    </style>
</head>
 
<body style="text-align: center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <p class="geek">
        Geeks Classes is a classroom program in Noida.
        This is a quick course to cover algorithms
        questions.
    </p>
</body>
   
</html>

                    

Output:

 horizontal-tb

Example: In this example, we are using writing-mode: vertical-rl; property.

html

<!DOCTYPE html>
<html>
   
<head>
    <title>writing-mode Property</title>
    <style>
        p.geek {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            writing-mode: vertical-rl;
            color: white;
            background: green;
        }
    </style>
</head>
 
<body style="text-align: center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <p class="geek">
        Geeks Classes is a classroom program in Noida.
        This is a quick course to cover algorithms
        questions.
    </p>
</body>
   
</html>

                    

Output:

 vertical-rl

Example: In this example, we are using writing-mode: vertical-lr property.

html

<!DOCTYPE html>
<html>
   
<head>
    <title>writing-mode Property</title>
    <style>
        p.geek {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            writing-mode: vertical-lr;
            color: white;
            background: green;
        }
    </style>
</head>
 
<body style="text-align: center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <p class="geek">
        Geeks Classes is a classroom program in Noida.
        This is a quick course to cover algorithms
        questions.
    </p>
</body>
   
</html>

                    

Output:

 vertical-lr

Supported Browsers: The browsers that support the writing-mode property are listed below:

  • Google Chrome 48.0
  • Edge 12.0
  • Internet Explorer 9.0
  • Firefox 41.0
  • Opera 35.0
  • Apple Safari 10.1


Last Updated : 20 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads