Javatpoint Logo
Javatpoint Logo

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

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.

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.

Test it Now

Output

CSS text-orientation property




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA