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 |
| sideways (property value) |
Not supported | Not supported | 44.0 | Not supported | Not supported |
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 | Only supported in Firefox. 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
