CSS text-orientation

The text-orientation property in CSS allows you to specify the orientation of text within an element. This can be useful for cases where you want to rotate the text vertically or at a certain angle.

The text-orientation property accepts the following values:

mixed: The characters of the text run horizontally with each glyph rotated with respect to the line orientation.
upright: The characters of the text run vertically by default.
sideways: The characters of the text run vertically, but the line orientation is horizontal.

Let's see some examples on how to use the text-orientation property in CSS:

Result:


    .vertical-text {
      writing-mode: vertical-rl;
      text-orientation: upright;
    }

Vertical Text

In this example, we have used the text-orientation: upright; property to make the text run vertically in an element with the class vertical-text.

Result:


    .sideways-text {
      text-orientation: sideways;
    }

Sideways Text

Here, we have used the text-orientation: sideways; property to make the text appear sideways within an element with the class sideways-text.

Experiment with the text-orientation property to achieve different text orientation effects in your CSS stylesheets.