Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS | text-orientation Property

  • Last Updated : 15 Oct, 2019

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:




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

    Output:

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




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

    Output:

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

    Example:




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

    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:

  • Google Chrome
  • Firefox
  • Opera

      My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!