text-orientation CSS property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.
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.
Try it
writing-mode: vertical-rl;
text-orientation: mixed;
writing-mode: vertical-rl;
text-orientation: upright;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<p>
In another moment down went Alice after it, never once considering how in
the world she was to get out again.
</p>
</div>
</section>
Syntax
css
/* 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: revert;
text-orientation: revert-layer;
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
directionis 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
sidewaysthat 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-verticalandglyph-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 | Not animatable |
Formal syntax
text-orientation =
mixed |
upright |
sideways
Examples
HTML
html
<p>Lorem ipsum dolet semper quisquam.</p>
CSS
css
p {
writing-mode: vertical-rl;
text-orientation: upright;
}
Result
Specifications
| Specification |
|---|
| CSS Writing Modes Level 4 # text-orientation |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-orientation
|
|
|
|
|
|
|
|
|
|
|
|
|
mixed
|
|
|
|
|
|
|
|
|
|
|
|
|
sideways
|
|
|
|
|
|
|
|
|
|
|
|
|
upright
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Uses a non-standard name
- Requires a vendor prefix or different name for use.
- Has more compatibility info.
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