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 3 The 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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-orientation | Chrome
Full support
48
| Edge
Full support
79
| Firefox
Full support
41
| IE No support No | Opera
Full support
15
| Safari
Full support
5.1
| WebView Android
Full support
48
| Chrome Android
Full support
48
| Firefox Android
Full support
41
| Opera Android
Full support
14
| Safari iOS
Full support
5
| Samsung Internet Android
Full support
5.0
|
sideways | Chrome No support No | Edge No support No | Firefox
Full support
44
| 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
| 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