CSS text-orientation property

This CSS property specifies the orientation of characters in the line of content. It only applies to the vertical mode of content. This property does not affect elements with horizontal writing mode.

It helps us to control the display of languages that use a vertical script. This property has five values: mixed, sideways, upright, sideways-right, and use-glyph-orientation. Its default value is mixed. All of the values of this property work only in vertical mode.

This property depends upon the writing-mode property. It works only when the writing-mode is not set to horizontal-tb.

Syntax

  text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;  

The values of this property are tabulated as follows.

Property values

Values	Description
mixed	It is the default value that rotates the characters 90o degree clockwise. It set the characters of vertical script naturally.
upright	This value sets the characters of horizontal scripts naturally (upright), as well as the glyphs for the vertical scripts. It makes all characters to be considered as left-to-right.
sideways	It rotates the line to 90o clockwise. This value causes the characters to be laid out as horizontally. This value does not work in Google Chrome and other major browsers except Firefox, i.e., it only works in Firefox.
sideways-right	It is kept for compatibility purposes. It is an alias to the value sideways.
use-glyph-orientation	This value is not used anymore.
initial	It sets the property to its default value.
inherit	It inherits the property from its parent element.

Let’s understand this property by using some examples.

Example1

In this example, there are two paragraph elements with the CSS properties writing-mode: vertical-rl; and writing-mode: vertical-lr; Here, we are applying the mixed and upright values of the text-orientation property.

In the output, we can see the effect of the upright value of this CSS property.

  <!DOCTYPE html>  <html>  <head>  <style>  #lr, #rl {  border: 2px solid black;  width: 300px;  height: 300px;  }  #lr {  writing-mode: vertical-lr;  text-orientation: mixed;  }    #rl {  writing-mode: vertical-rl;  text-orientation: upright;  }    </style>  </head>  <center>  <body>  <h1> Example of CSS text-orientation property </h1>  <h3> writing-mode: vertical-lr; and text-orientation: mixed; </h3>  <p id = “lr”>  Hi, Welcome to the  tutoraspire.com. This site is developed so that students may learn computer science related technologies easily. The  tutoraspire.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.  </p>  <h3> writing-mode: vertical-rl; and text-orientation: upright; </h3>  <p id = “rl”>  Hi, Welcome to the  tutoraspire.com. This site is developed so that students may learn computer science related technologies easily. The  tutoraspire.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.  </p>    </center>  </body>  </html>  

Test it Now

Output

CSS text-orientation property

Example2

Here the writing-mode is set to vertical-rl, and we are using the sideways value of the text-orientation property.

This value works only in Firefox. We will execute the following code in the Mozilla Firefox browser.

  <!DOCTYPE html>  <html>  <head>  <title> text-orientation property </title>  <style>  p{  border: 2px solid black;  width: 250px;  height: 300px;  }    #rl {  writing-mode: vertical-rl;  text-orientation: sideways;  }    </style>  </head>  <body>  <h1> Example of CSS text-orientation property </h1>  <h3> writing-mode: vertical-rl; and text-orientation: sideways; </h3>  <p id = “rl”>  Hi, Welcome to the  tutoraspire.com. This site is developed so that students may learn computer science related technologies easily. The  tutoraspire.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.  </p>  </body>  </html>  

Test it Now

Output

CSS text-orientation property

Next TopicCSS transition-delay

CSS text-orientation property

CSS text-orientation property

Syntax

Property values

Example1

Example2

CSS min-width property

External CSS

You may also like