CSS

CSS

🎯 What is writing-mode?

The writing-mode property defines the direction in which the text or content inside an HTML element is displayed.

In other words, it controls whether the text flows:

  • From left to right
  • From top to bottom
  • From right to left

This property is especially useful for:

  • Asian languages such as Japanese or Chinese
  • Vertical text layouts
  • Creative or modern web designs

πŸ”Ή Basic Usage

CSS

p { 
    writing-mode: horizontal-tb; 
}

➑️ In this example, the text flows horizontally from left to right, which is the normal writing direction used in most websites.

This is the default direction for languages like English or Turkish.

πŸ”Ή Values

1. horizontal-tb (Default)

  • Text is written horizontally
  • Lines flow from left to right
  • New lines appear from top to bottom

This is the standard writing mode for languages like:

  • English
  • Turkish
  • French

🧩 Example

HTML

<p style="writing-mode: horizontal-tb;">
    This text is written in the normal horizontal direction.
</p>

πŸ“˜ Result

πŸ‘‰ This text is written in the normal horizontal direction.

2. vertical-rl

(Vertical Right to Left)

  • Text is written vertically from top to bottom
  • Lines progress from right to left

This writing mode is commonly used in:

  • Japanese
  • Chinese

🧩 Example

HTML

<p style="writing-mode: vertical-rl;">
    Vertical text example
</p>

πŸ“˜ Result

➑️ The text flows vertically from top to bottom, while the lines move from right to left.

3. vertical-lr

(Vertical Left to Right)

  • Text is also written vertically
  • Lines progress from left to right

This is the opposite of vertical-rl.

🧩 Example

HTML

<p style="writing-mode: vertical-lr;">
    Vertical text from left to right
</p>

πŸ“˜ Result

➑️ The text flows vertically from top to bottom, while the lines move from left to right.

4. initial

Resets the property to its default value ( horizontal-tb ).

🧩 Example

CSS
writing-mode: initial;

5. inherit

The element inherits the writing-mode value from its parent element.

🧩 Example

CSS
writing-mode: inherit;

πŸ’‘ Summary Table

Value Description
horizontal-tb Text flows horizontally from left to right (default)
vertical-rl Text flows vertically, lines move right to left
vertical-lr Text flows vertically, lines move left to right
initial Resets to the default value
inherit Inherits the value from the parent element

  • 🧠 Summary

  • The writing-mode property controls the text flow direction inside an element.
  • Common Usage:
  • For English, Turkish, and most Western languages β†’ horizontal-tb
  • For Japanese, Chinese, or vertical layouts β†’ vertical-rl or vertical-lr
  • This property is very useful when creating:
  • Multilingual websites
  • Vertical typography designs
  • Creative UI layouts
  • Magazine-style text sections
  • Using writing-mode correctly helps create flexible and visually unique text layouts with pure CSS.
CSS unicode-bidi
CSS text-orientation