CSS text-orientation Property

Description

The text-orientation CSS property is used to control the orientation of characters within a block of text, particularly in vertical writing modes such as East Asian scripts like Japanese or Chinese. It determines whether the characters are displayed upright or rotated 90 degrees, allowing for better readability and aesthetics in vertical text layouts. This property is essential for web designers and developers when dealing with multi-script content or when customizing the presentation of text in non-horizontal writing modes, ensuring that text is displayed correctly and in a visually appealing manner.

Initial value

mixed

Applies to

All elements except table row groups, rows, column groups, and columns

Inherited

Yes

Computed value

Specified value

Animatable

No

JavaScript syntax

object.style.textOrientation

Interactive Demo

writing-mode: vertical-rl;
text-orientation: mixed;

writing-mode: vertical-rl;
text-orientation: upright;

writing-mode: vertical-lr;
text-orientation: mixed;

writing-mode: vertical-lr;
text-orientation: upright;

Syntax

text-orientation: mixed | upright | sideways-right | sideways | use-glyph-orientation

Values

• mixedIn vertical mode, characters rotate 90° clockwise.
• uprightIn vertical mode, characters are placed naturally under each other.
• sidewaysCauses characters to be laid out as they would be horizontally, but with the whole line rotated 90° clockwise.
• sideways-rightAn alias to sideways that is kept for compatibility purposes.
• use-glyph-orientationOn SVG elements, this keyword leads to use the value of the deprecated SVG properties glyph-orientation-vertical and glyph-orientation-horizontal.

Example

<div class="logo">CSSPortal</div>

.logo { 
   background: #1c59a5;
   color: #fff;
   padding: 10px;
   font-size: 2rem;
   writing-mode: vertical-lr;
   text-orientation: upright;
}

Browser Support

The following table will show you the current browser support for the CSS text-orientation property.

Desktop
79	48	41	35	14

Tablets / Mobile
48	41	35	14	5	48

Last updated by CSSPortal on: 2nd January 2024