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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
/* Keyword values */ text-orientation: mixed; text-orientation: upright; text-orientation: sideways-right; text-orientation: sideways; text-orientation: use-glyph-orientation; /* Global values */ text-orientation: inherit; text-orientation: initial; text-orientation: unset;
The text-orientation
property is specified as a single keyword from the list below.
Values
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 beltr
. 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
andglyph-orientation-horizontal
.
Formal definition
Initial value | mixed
|
Applies to | all elements, except table row groups, rows, column groups, and columns |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
mixed | upright | sideways
Examples
HTML
<p>Lorem ipsum dolet semper quisquam.</p>
CSS
p {
writing-mode: vertical-rl;
text-orientation: upright;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Writing Modes Module Level 3The definition of 'text-orientation' in that specification. | Proposed Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-orientation
|
Chrome Full support 48 Full support 48 Full support 11 Prefixed' Implemented with the vendor prefix: -webkit- |
Edge Full support 79 Full support 79 Full support 79 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Full support 41 Full support 41 No support 38 — 51 Disabled' From version 38 until version 51 (exclusive): this feature is behind the |
IE
No support No |
Opera Full support 15 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari Full support 14 Full support 14 Full support 5.1 Prefixed' Implemented with the vendor prefix: -webkit- |
WebView Android Full support 48 Full support 48 Full support ≤37 Prefixed' Implemented with the vendor prefix: -webkit- |
Chrome Android Full support 48 Full support 48 Full support 18 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Android Full support 41 Full support 41 No support 38 — 51 Disabled' From version 38 until version 51 (exclusive): this feature is behind the |
Opera Android Full support 14 Full support 14 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari iOS Full support 14 Full support 14 Full support 5 Prefixed' Implemented with the vendor prefix: -webkit- |
Samsung Internet Android Full support 5.0 Full support 5.0 Full support 1.0 Prefixed' Implemented with the vendor prefix: -webkit- |
sideways
|
Chrome
No support No |
Edge
No support No |
Firefox Full support 44 Full support 44 Notes' |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android Full support 44 Full support 44 Notes' |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.'
- See implementation notes.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
See also
- The other vertical-script related CSS properties:
writing-mode
,text-combine-upright
, andunicode-bidi
. - CSS Logical properties
- Styling vertical text (Chinese, Japanese, Korean and Mongolian)
- Extensive browsers support test results: https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation
text-orientation by Mozilla Contributors is licensed under CC-BY-SA 2.5.