CSS text-orientation Property


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
Applies to
All elements except table row groups, rows, column groups, and columns
Computed value
Specified value
JavaScript syntax

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass.


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


  • 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.


<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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 2nd January 2024