CSS text-orientation Property

The text-orientation property specifies the characters’ orientation in a line.

It has five values: mixed, upright, sideways, sideways-right, use-glyph-orientation. All of them work in vertical typographic modes.

This property had the "sideways-left" and the "sideways-right" values, now they are redefined as one the "sideways-right" value. Instead, the "sideways-lr" and the "sideways-rl" values are added to the writing-mode property for usage with non-vertical writing systems.

The text-orientation property only has an effect when writing-mode is "vertical".

Initial Value mixed
Applies to All elements, except table row groups, rows, column groups and columns.
Inherited Yes.
Animatable No.
Version CSS3
DOM Syntax object.style.textOrientation = "upright";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      }
    </style>
  </head>
  <body>
    <h2>Text-orientation property example</h2>
    <p>Lorem ipsum is simply dummy text.</p>
  </body>
</html>

An example with the "upright" value:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
      writing-mode: vertical-lr;
      text-orientation: upright;
      }
    </style>
  </head>
  <body>
    <h2>Text-orientation property example</h2>
    <p>Lorem ipsum is simply dummy text.</p>
  </body>
</html>

Another example with the text-orientation property:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      background-color: #fff;
      color: #000;
      font-size: 1.1em;
      }
      .example {
      background: #ccc;
      color: #fff;
      padding: 3em;
      margin: 40px auto 0;
      width: 400px;
      max-width: 400px;
      display: flex;
      }
      h1 {
      color: #8ebf42;
      margin: 0.15em 0.75em 0 0;
      font-family: 'Bungee Shade', cursive;
      -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
      text-orientation: upright;
      -webkit-font-feature-settings: "vkrn", "vpal";
      font-feature-settings: "vkrn", "vpal";
      }
      p {
      margin: 0;
      line-height: 1.5;
      font-size: 1.15em;
      }
    </style>
  </head>
  <body>
    <h2>Text-orientation property example</h2>
    <div class="example">
      <h1>Lorem Ipsum</h1>
      <p>
        Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
      </p>
    </div>
  </body>
</html>

Values

Value Description
mixed The characters are rotated 90° clockwise. This is the default value of this property.
upright The characters of horizontal scripts are laid out naturally (upright), as well as the glyphs for vertical scripts. This property makes all the characters to be considered as left-to-right: the used value of direction is forced to be ltr.
sideways The characters are laid out as they would be horizontally, but with the whole line rotated 90° clockwise.
sideways-right An alias to sideways that is kept for compatibility purposes.
use-glyph-orientation Leads to use the value of the obsolete SVG properties glyph-orientation-vertical and glyph-orientation-horizontal.
This value is not in use anymore.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.


Practice Your Knowledge

CSS text-orientation property has five values:




Related articles