CSS | text-orientation Property

The text-orientation property in CSS is used to set the orientation of the character in a line. This property is useful in vertical scriptings, like creating vertical table headers, defining the row’s names, etc.

Syntax:

text-orientation: mixed|upright|sideways;

Attribute:



  • mixed: This value is used to rotate the character of text into 90 degree clockwise. It is the default value.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <head>
        <title>
            CSS | text-orientation Property
        </title>
          
        <style>
            h1 {
                color:green;
            }
            p {
                writing-mode: vertical-rl;
                text-orientation: mixed;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
              
        <p>A Computer Science Portal</p>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • upright: This value start the text from right side of the screen to the downside.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <head>
        <title>
            CSS | text-orientation Property
        </title>
          
        <style>
            h1 {
                color:green;
            }
            p {
                writing-mode: vertical-rl;
                text-orientation: upright;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
              
        <p>A Computer Science Portal</p>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  • sideways: This value rotates the text line into 90 degree clockwise.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <head>
        <title>
            CSS | text-orientation Property
        </title>
          
        <style>
            h1 {
                color:green;
            }
            p {
                writing-mode: vertical-rl;
                text-orientation: sideways;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
              
        <p>A Computer Science Portal</p>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

Note: The text-orientation property is depends on writing-mode property, if it not sets on horizontal-tb then this property will work.

Supported Browsers: The browsers supported by text-orientation Property are listed below: