Css Text Orientation
Introduction:
The text-orientation property of CSS is used to specify the orientation of the text characters in the line of content. This property applies only with the vertical writing-mode and not with the text which is in horizontal writing-mode.
This property is used for controlling the display of languages using vertical script and to create vertical table headers.
The text-orientation property is completely dependent on the writing-mode property. So it is mandatory that the writing-mode is set to vertical-rl. If the writing-mode is set to horizontal-tb, text-orientation won't work.
It can be applied to all the element except the table rows, columns, row groups and column groups.
What is writing-mode?
The writing-mode property indicates whether the script/text is displayed vertically or horizontally.
Default value of this property is horizontal-tb
There are three values associated with writing-mode:
| Value | Description |
|---|---|
| horizontal-tb | This allows the text to flow horizontally from left to right and vertically from top to bottom. |
| vertical-rl | This allows the text to flow vertically from top to bottom and horizontally from right to left. |
| vertical-lr | This allows the text to flow vertically from top to bottom and horizontally from left to right. |
Text - orientation property values:
CSS text-orientation has following values:
- mixed
- upright
- sideways
- sideways-right
- use-glyph-orientation
- initial
- inherit
- mixed:
This is the default value of text-orientation and it rotates the horizontal text 90oclockwise. Characters which are already in their vertical orientation are displayed naturally.
Syntax:
text-orientation: mixed;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 1px solid;
font-size: 20px;
width: 250px;
height: 300px;
}
div{
writing-mode: vertical-lr;
text-orientation: mixed;
}
h2{
color: tomato;
}
</style>
</head>
<body>
<h2>Example of text-orientation: mixed; </h2>
<div>
This is an example of CSS text-orientation. The example display the mixed value of this property.
</div>
</body>
</html>
Output:
In above output, the horizontal text rotates 90oclockwise using mixed keyword of text-orientation.
- upright:
The characters in the horizontal orientation are set upright naturally, including the glyphs for the vertical oriented scripts. This keyword treats all the characters as left to right in the writing mode, so the value for the directionproperty is forcefully set as ltr.
Syntax:
text-orientation: upright;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 1px solid;
font-size: 20px;
width: 250px;
height: 300px;
}
div{
writing-mode: vertical-rl;
text-orientation: upright;
}
h2{
color: tomato;
}
</style>
</head>
<body>
<h2>Example of text-orientation: upright; </h2>
<div>
This is an example of CSS text-orientation. The example display the upright value of this property.
</div>
</body>
</html>
Output:
Here, the above text is displayed upright from left to right using text-orientation: upright value.
- sideways:
This keyword sets the text in vertical writing mode sideways i.e., it allows the characters to be laid out horizontally It rotates the complete line 90o clockwise.
Syntax:
text-orientation: sideways;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 1px solid;
font-size: 20px;
width: 250px;
height: 300px;
writing-mode: vertical-rl;
text-orientation: sideways;
}
h2{
color: tomato;
width: 400px;
}
</style>
</head>
<body>
<h2>Example of text-orientation: sideways; and writing-mode: vertical-rl;</h2>
<div>
This is an example of CSS text-orientation. The example display the sideways value of this property.
</div>
</body>
</html>
Output:
Here, the text is displayed to the sideways with the writing-mode right to left.
- sideways-right:
This is an alias for the sideways value, and is used for compatibility purposes.
Syntax:
text-orientation: sideways-right;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 1px solid;
font-size: 20px;
width: 250px;
height: 300px;
writing-mode: vertical-lr;
text-orientation: sideways-right;
}
h2{
color: tomato;
width: 400px;
}
</style>
</head>
<body>
<h2>Example of text-orientation: sideways-right; and writing-mode: vertical-lr; </h2>
<div>
This is an example of CSS text-orientation. The example display the sideways-right value of this property.
</div>
</body>
</html>
Output:
The output displays the text in sideways-right format.
- use-glyph-orientation:
This property value has been removed from use since December 2015.
It was used with SVG elements to define SVG properties glyph-orientation-vertical and glyph-orientation-horizontal.
glyph-orientation-horizontal is used as an alias of text-orientation.
Syntax:
text-orientation: use-glyph-orientation; - initial:
The initial keyword assigns default value to the text-overflow property.
Default value of text-orientation is mixed.
Syntax:
text-orientation: initial;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.id{
width: 300px;
height: 300px;
border: 1px solid black;
font-size: 25px;
writing-mode: vertical-lr;
text-orientation: initial;
}
h2{
color: skyblue;
}
</style>
</head>
<body>
<h2>text-orientation: initial; </h2>
<div class="id">
This is an example of CSS text-orientation. The example display the initial value of this property
</div>
</body>
</html>
Output:
Here, the script takes the initial value of the property which is mixed.
- inherit:
This value inherits the text-overflow property of its parent element.
Syntax:
text-orientation: inherit;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height:300px;
font-size: 15px;
border: 2px solid;
writing-mode:vertical-lr;
text-orientation: upright;
}
h2{
width: 400px;
text-orientation: inherit;
color: skyblue;
}
</style>
</head>
<body>
<h2 style="color: red">text-orientation: inherit</h2>
<div>
<h2>text-orientation: inherit derives the property of its parent element </h2>
This is an example of CSS text-orientation. The example display the inherit value of this property.
</div>
</body>
</html>
Output:
Here the <h2> element inherits the text-orientation: upright; property of the <div> element.