Definition and Usage
This property specifies the orientation of text within a line. Current values only have an effect in vertical writing modes; the property has no effect on elements in horizontal writing modes.
| Name: | text-orientation |
|---|---|
| Value: | mixed | upright | sideways-right | sideways-left | sideways | use-glyph-orientation |
| Initial: | mixed |
| Applies to: | all elements except table row groups, rows, column groups, and columns |
| Inherited: | yes |
| Media: | visual |
| Computed value: | specified value |
| Canonical order: | n/a |
| Percentages: | n/a |
| Animatable: | no |
Syntax
text-orientation: mixed | upright | sideways-right | sideways-left | sideways | use-glyph-orientation
Values
- mixed
-
In vertical writing modes, characters from horizontal-only scripts are set sideways, i.e. 90° clockwise from their standard orientation in horizontal text. Characters from vertical scripts are set with their intrinsic orientation.
This value is typical for layout of primarily vertical-script text.
- upright
-
In vertical writing modes, characters from horizontal-only scripts are rendered upright, i.e. in their standard horizontal orientation. Characters from vertical scripts are set with their intrinsic orientation and shaped normally.
For the purposes of bidi reordering, this value causes all characters to be treated as strong LTR. This value causes the used value of direction to be ltr.
- sideways-right
-
In vertical writing modes, this causes text to be set as if in a horizontal layout, but rotated 90° clockwise.
- sideways-left
-
In vertical writing modes, this causes text to be set as if in a horizontal layout, but rotated 90° counter-clockwise.
If set on a non-replaced inline whose parent is not sideways-left, this forces bidi isolation: the normal and embed values of unicode-bidi compute to isolate, and bidi-override computes to isolate-override. Layout of text is exactly as for sideways-right except that the baseline table of each of the element's inline boxes is mirrored around a vertical axis along the center of its content box and text layout is rotated 180° to match. The positions of text decorations propagated from an ancestor inline (including the block container's root inline) are not mirrored, but any text decorations introduced by the element are positioned using the mirrored baseline table.
Similarly, if an inline child of the element has a text-orientation value other than sideways-left, an analogous transformation (and bidi isolation) is applied.
- sideways
-
This value is equivalent to sideways-right in vertical-rl writing mode and equivalent to sideways-left in vertical-lr writing mode. It can be useful when setting horizontal script text vertically in a primarily horizontal-only document.
- use-glyph-orientation
-
SVG defines glyph-orientation-vertical and glyph-orientation-horizontal properties that were intended to control text orientation. These properties are deprecated and do not apply to non-SVG elements. If an implementation supports these properties, the use-glyph-orientation value when set on SVG elements indicates that the SVG glyph-orientation-vertical and glyph-orientation-horizontal behavior control the layout of text. Such UAs must set text-orientation: use-glyph-orientation on all SVG text content elements in their default UA style sheet for SVG.
In all other contexts, and for implementations that do not support the glyph orientation properties, the use-glyph-orientation behavior is the same as for mixed.
This value is at-risk and may be dropped during CR.
Examples
:root { text-orientation: sideways; }
caption { caption-side: left; writing-mode: vertical-lr; }
thead th { writing-mode: vertical-lr; }
h1.banner { position: absolute; top: 0; right: 0; writing-mode: vertical-rl; }
