Open In App

CSS | text-orientation Property

Improve
Improve
Like Article
Like
Save
Share
Report

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: 

html




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

html




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

html




<!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 48
  • Edge 79
  • Firefox 41
  • Opera 35
  • Safari 14


Last Updated : 04 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads