CSS text-orientation Property
Example
Set the text orientation for different <div> elements:
div.a {
text-orientation: mixed;
}
div.b {
text-orientation: upright;
}
Try it Yourself »
Definition and Usage
The text-orientation
property specifies the orientation of characters.
Note: Works only when writing-mode is set to vertical.
Default value: | mixed |
---|---|
Inherited: | yes |
Animatable: | no. Read about animatable |
Version: | CSS3 |
JavaScript syntax: | object.style.textOrientation="upright" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
text-orientation | 48.0 | 79.0 | 41.0 | 14.0 | 35.0 |
CSS Syntax
text-orientation: mixed|upright|sideways|sideways-right|use-glyph-orientation|initial|inherit;
Property Values
Value | Description | Demo |
---|---|---|
mixed | Deafult value. Characters are rotated 90 degrees clockwise. | Demo ❯ |
upright | Characters are not rotated, but standing upright. | Demo ❯ |
sideways | Characters are orientated the same as the text lines are oriented with writing-mode vertical, 90 degrees clockwise. | |
sideways-right | Equal to property value sideways. Kept for compatibility purposes. | |
use-glyph-orientation | For use in SVG elements, so that text inherits deprecated SVG properties glyph-orientation-vertical and glyph-orientation-horizontal. | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
The text-orientation property can be used to change orientation in table headers:
th {
writing-mode: vertical-lr;
text-orientation: upright;
}
Try it Yourself »
Related Pages
CSS writing-mode property: CSS Writing Mode property