CSS | text-orientation Property
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
Share your thoughts in the comments
Please Login to comment...