The text-orientation
CSS property defines the orientation of the text characters in a line. This property only has an effect in vertical mode, that is, 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.
/* 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;
Initial value | mixed |
---|---|
Applies to | all elements, except table row groups, rows, column groups, and columns |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
The text-orientation
property is specified as a single keyword from the list below.
mixed
upright
direction
is forced to be ltr
.sideways
writing-mode
is vertical-rl
, or to the left if it is vertical-lr
.sideways-right
sideways
that is kept for compatibility purposes.use-glyph-orientation
glyph-orientation-vertical
and glyph-orientation-horizontal
.mixed | upright | sideways
<p>Lorem ipsum dolet semper quisquam.</p>
p { writing-mode: vertical-rl; text-orientation: upright; }
Specification | Status | Comment |
---|---|---|
CSS Writing Modes Module Level 3 The definition of 'text-orientation' in that specification. | Candidate Recommendation | Initial definition. |
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support |
48 Yes -webkit- |
? |
41 38 — 511 |
No | Yes -webkit- | No |
sideways |
No | ? | 442 | No | No | No |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support |
48 Yes -webkit- |
48 Yes -webkit- |
? |
41 38 — 511 |
No | No | No |
sideways |
No | No | ? | 442 | No | No | No |
1. From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
2. sideways-right
has become an alias of sideways
.
writing-mode
, text-combine-upright
, and unicode-bidi
.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation