This CSS attribute determines the direction of characters within a line of text, specifically in vertical text layout. It has no impact on elements that use a horizontal writing mode.
It assists in managing the presentation of languages that utilize a vertical writing system. This attribute offers five options: mixed, sideways, upright, sideways-right, and use-glyph-orientation. The default setting is mixed. These options are specifically designed for vertical orientation.
This characteristic is reliant on the writing-mode attribute and functions effectively unless the writing-mode is specified as horizontal-tb.
Syntax
text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;
The values for this attribute are listed in the table below.
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 instance, there are a pair of paragraph components styled with the CSS attributes writing-mode: vertical-rl; and writing-mode: vertical-lr; In this scenario, we are implementing the mixed and upright options of the text-orientation attribute.
In the result, we can observe the impact of the vertical value of this CSS attribute.
<!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 C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial 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 C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial 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>
Output
Example2
Here, the writing-mode is configured as vertical-rl, and we are employing the sideways setting of the text-orientation attribute.
This particular value is compatible exclusively with Firefox. The provided code will be run specifically in the Mozilla Firefox web 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 C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial 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>
Output