CSS text-orientation Property

Set the text orientation for different <div> elements:

div.a {
text-orientation: mixed;
}

div.b {
text-orientation: upright;
}

Definition and Usage

The text-orientation property specifies the orientation of characters.

Note: Works only when writing-mode is set to vertical.

Default value:	mixed
Inherited:	yes
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.textOrientation="upright" Try it

The numbers in the table specify the first browser version that fully supports the property.

Property
text-orientation	48.0	79.0	41.0	14.0	35.0
sideways (property value)	Not supported	Not supported	44.0	Not supported	Not supported

Value	Description	Demo
mixed	Deafult value. Characters are rotated 90 degrees clockwise.	Demo ❯
upright	Characters are not rotated, but standing upright.	Demo ❯
sideways	Only supported in Firefox. Characters are orientated the same as the text lines are oriented with writing-mode vertical, 90 degrees clockwise.
sideways-right	Equal to property value sideways. Kept for compatibility purposes.
use-glyph-orientation	For use in SVG elements, so that text inherits deprecated SVG properties glyph-orientation-vertical and glyph-orientation-horizontal.
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

The text-orientation property can be used to change orientation in table headers:

th {
writing-mode: vertical-lr;
text-orientation: upright;
}

CSS writing-mode property: CSS Writing Mode property