CSS Writing Modes

CSS writing modes are crucial for determining how text is presented in a document, especially for languages that utilize different writing directions. This is particularly important for accommodating both horizontal and vertical scripts.

Key Concepts

• Writing Modes: Defines the direction in which text flows and the layout of content blocks. The primary modes include:
  • horizontal-tb: Text flows horizontally from left to right and top to bottom (default for most Western languages).
  • vertical-rl: Text flows vertically from top to bottom and right to left (common in some Asian languages).
  • vertical-lr: Text flows vertically from top to bottom and left to right.
• Text Orientation: This property controls the orientation of text characters:
  • mixed: Characters are oriented based on their respective writing modes.
  • upright: Characters are displayed upright, regardless of the writing mode.
  • sideways: Characters are rotated for sideways display.

CSS Properties

text-orientation: Defines the orientation of the text within the writing mode.

p {
    text-orientation: upright;
}

direction: Specifies the text direction for the content.

p {
    direction: rtl; /* right-to-left */
}

writing-mode: Sets the writing mode for an element.

p {
    writing-mode: vertical-rl;
}

Examples

Combining Properties:

<div style="writing-mode: vertical-rl; text-orientation: upright;">
    This text is displayed vertically and oriented upright.
</div>

Vertical Writing Mode:

<p style="writing-mode: vertical-rl;">This text flows vertically from top to bottom.</p>

Horizontal Writing Mode:

<p style="writing-mode: horizontal-tb;">This text flows horizontally.</p>

Conclusion

Understanding writing modes in CSS is essential for designing web pages that accommodate diverse languages and scripts. By leveraging the appropriate properties, developers can effectively control text display, enhancing the reading experience for users across various cultures.