text-orientation
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
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
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 | Not animatable |
Formal syntax
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
BCD tables only load in the browser
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