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 |
Syntax
The text-orientation
property is specified as a single keyword from the list below.
Values
mixed
- Rotates the characters of horizontal scripts 90°. 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 if they were laid out horizontally, but with the whole line rotated 90° to the right if
writing-mode
isvertical-rl
, or to the left if it isvertical-lr
. 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 syntax
mixed | upright | sideways
Examples
HTML
<p>Lorem ipsum dolet semper quisquam.</p>
CSS
p { writing-mode: vertical-rl; text-orientation: upright; }
Result
Specification
Specification | Status | Comment |
---|---|---|
CSS Writing Modes Module Level 3 The definition of 'text-orientation' in that specification. |
Candidate Recommendation | Initial definition. |
Browser compatibility
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
.
See also
- The other vertical-script related CSS properties:
writing-mode
,text-combine-upright
, andunicode-bidi
.