🎯 What is text-orientation?

The text-orientation property defines how text inside an HTML element is rotated or aligned when used with the writing-mode property.

In other words, it controls whether characters:

• Stand upright
• Appear sideways
• Or follow mixed alignment rules

This property is especially important for vertical writing modes used in:

• Japanese
• Chinese
• Other East Asian languages
• Vertical design layouts

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

➡️ In this example, the text flows vertically (right to left), and each character is displayed upright.

The default behavior.

• Latin characters (like English) stay horizontal
• East Asian characters are displayed vertically

<p style="writing-mode: vertical-rl; text-orientation: mixed;">
    Hello 世界
</p>
                

• “Hello” remains horizontal
• “世界” (Chinese characters) are displayed vertically

Displays all characters upright in a vertical flow.

• Every character stands vertically
• Letters are stacked from top to bottom

<p style="writing-mode: vertical-rl; text-orientation: upright;">
    Hello World
</p>
                

Each letter is displayed upright, one below the other in a vertical line.

Resets the property to its default value ( mixed ).

text-orientation: initial;

The element inherits the text-orientation value from its parent element.

text-orientation: inherit;