CSS text-orientation attribute

Definition and Usage

text-orientation The property specifies the direction of the character.

Note:Only when writing-mode It is only effective when set to vertical.

Example

Example 1

Set text direction for different <div> elements:

div.a {
  text-orientation: mixed;
}
div.b {
  text-orientation: upright;
}

Try It Yourself

Example 2

text-orientation The property can be used to change the direction of table headers:

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

Try It Yourself

CSS Syntax

text-orientation: mixed|upright|sideways|sideways-right|use-glyph-orientation|initial|inherit;

Property Value

Value Description
mixed Default value. The character is rotated 90 degrees clockwise.
upright The character does not rotate and remains upright.
sideways The direction of the character is the same as the direction of the text line when the writing-mode is vertical, that is, rotated 90 degrees clockwise.
sideways-right equals the value of the sideways property. Retained for compatibility purposes.
use-glyph-orientation Used for SVG elements to allow text to inherit the deprecated SVG properties glyph-orientation-vertical and glyph-orientation-horizontal.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: mixed
Inheritance: yes
Animation Creation: Not supported. See:Animation-related Properties.
Version: CSS3
JavaScript Syntax: object.style.textOrientation="upright"

Browser Support

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

Chrome Edge Firefox Safari Opera
48.0 79.0 41.0 14.0 35.0

Related Pages

Reference:CSS writing-mode attribute