Skip to content
Related Articles

Related Articles

CSS | writing-mode Property

Improve Article
Save Article
  • Last Updated : 04 Jul, 2022
Improve Article
Save Article

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, vertically from top to bottom. The next horizontal line is positioned below the previous line. 

Syntax:

writing-mode: horizontal-tb;

Example: 

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

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

Syntax:

writing-mode: vertical-rl;

Example: 

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

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

Syntax:

writing-mode: vertical-lr;

Example: 

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 supports 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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!