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