Related Articles

Related Articles

CSS | writing-mode Property
  • Last Updated : 08 Nov, 2019

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;

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:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:
    vertical-lr

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

  • Google Chrome 48.0
  • Internet Explorer 12.0
  • Firefox 41.0
  • Opera 35.0
  • Apple Safari 11.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :