W3docs
en
Log in

CSS text-orientation Property

Use the text-orientation CSS property to define the orientation of the characters within a line of content. See property values and try examples.

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

It has five values: mixed, upright, sideways, sideways-right, and use-glyph-orientation. All of them work in vertical typographic modes. The sideways-left value was removed from the specification, and sideways-right is now kept only as an alias for sideways. For non-vertical writing systems, the sideways-lr and sideways-rl values were added to the writing-mode property instead.

Info

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

Initial Valuemixed
Applies toAll elements, except table row groups, rows, column groups and columns.
InheritedYes.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.textOrientation = "upright";

Syntax

CSS text-orientation values

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

Example of the text-orientation property with the "mixed" value:

CSS text-orientation code 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>
Try it Yourself »

Result

CSS text-orientation with upright value

Example of the text-orientation property with the "upright" value:

CSS text-orientation with 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>
Try it Yourself »

Example of the text-orientation property:

CSS text-orientation another code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ffffff;
        color: #000000;
        font-size: 1.1em;
      }
      .example {
        background: #cccccc;
        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>
Try it Yourself »

Values

ValueDescription
mixedHorizontal scripts are laid out upright, while vertical scripts are rotated 90° clockwise. This is the default value of this property.
uprightAll characters are laid out upright, regardless of their script. It does not affect the direction property.
sidewaysThe characters are 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-orientationDeprecated. Previously mapped to the obsolete SVG glyph-orientation-vertical and glyph-orientation-horizontal properties. It is no longer supported in modern browsers.
initialIt makes the property use its default value.
inheritIt inherits the property from its parents element.

Practice

Practice

In CSS, which properties are used to control the vertical orientation of the text?