Widely available Supported across all major browsers. Safe to use in production.

text-orientation

The text-orientation CSS property sets the orientation of the text characters in a line. It only affects text in vertical mode (when writing-mode is not horizontal-tb). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.

Typography

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-orientation
48
79
41
14
48
14
mixed
48
79
41
≤13.1
48
≤13.4
sideways
12
79
44
7
18
7
upright
12
79
41
≤13.1
18
≤13.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (79)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (5.1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (5)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: sideways-right (≤83)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: sideways-right (≤83)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: sideways-right (≤72)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: sideways-right (≤83)

Syntax

CSS 
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* Default */
}

/* Set all characters to upright */
.upright {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Live demo

Mixed(default)

text-orientation Mixed(default) demo.

PreviewFullscreen

Upright(positive)

text-orientation Upright(positive) demo.

PreviewFullscreen

Sideways(horizontal)

text-orientation Sideways(horizontal) demo.

PreviewFullscreen

Use cases

  • Using text-orientation

    The text-orientation CSS property sets the orientation of the text characters in a line.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links