CSS text-orientation Property
Example
p {
writing-mode: vertical-rl;
text-orientation: upright;
}writing-mode
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Meaning:
The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.
| Default value: | mixed |
| Inherited: | Yes |
| Animatable: | No |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
text-orientation: mixed|upright|sideways|sideways-right|use-glyph-orientation|initial|inherit|revert|revert-layer|unset;Browser Support
Status
Property Values
The following table describes the values of this property:
| Value | Description |
|---|---|
| mixed | Rotates the characters of horizontal scripts 90° clockwise. Lays out the characters of vertical scripts naturally. Default value. |
| upright | Lays out the characters of horizontal scripts naturally (upright), as well as the glyphs for vertical scripts. Note that this keyword causes all characters to be considered as left-to-right: the used value of direction is forced to be ltr. |
| sideways | Causes characters to be laid out as they would be horizontally, but with the whole line rotated 90° clockwise. |
| sideways-right | An alias to sideways that is kept for compatibility purposes. |
| use-glyph-orientation | On SVG elements, this keyword leads to use the value of the deprecated SVG properties glyph-orientation-vertical and glyph-orientation-horizontal. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
text-orientation: mixed;
}