css - Writing Modes

CSS Writing Modes allow you to control the direction and flow of text in an element. This is useful for multilingual websites, vertical menus, rotated headings, and modern layouts. It provides control over horizontal, vertical, and mixed text directions without changing the HTML structure.

1. What is CSS Writing Mode?

CSS Writing Mode specifies the direction in which text and block elements are laid out.

  • Default for most websites: horizontal left-to-right
  • Can be changed to:
    • Vertical writing
    • Right-to-left
    • Mixed layouts

2. Why Use CSS Writing Modes?

  • Supports multilingual websites (e.g., Japanese, Chinese)
  • Creates vertical menus or text layouts
  • Rotates headings or elements for design effects
  • Improves modern web design possibilities
  • No extra HTML or JavaScript needed

3. CSS Property Syntax

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;

  • horizontal-tb → default, left to right, top to bottom
  • vertical-rl → vertical, top to bottom, right to left
  • vertical-lr → vertical, top to bottom, left to right
  • sideways-rl → rotates text 90° clockwise
  • sideways-lr → rotates text 90° counterclockwise

4. Simple Horizontal Text Example

<p class="horizontal">This is horizontal text.</p>

.horizontal {

  writing-mode: horizontal-tb; /* Default mode */

}

 

5. Vertical Text Example

<p class="vertical">This is vertical text.</p>

.vertical {

  writing-mode: vertical-rl; /* Top to bottom, right to left */

  border: 1px solid #333;

  padding: 10px;

}

Text flows vertically from top to bottom, right to left.

6. Rotated / Sideways Text Example

<p class="sideways">This is sideways text.</p>

.sideways {

  writing-mode: sideways-rl;

  border: 1px solid #333;

  padding: 10px;

}

 Text is rotated 90° clockwise while keeping readable orientation.

7. Using Writing Mode for Vertical Menus

HTML:

<ul class="vertical-menu">

  <li>Home</li>

  <li>About</li>

  <li>Contact</li>

</ul>

CSS:

.vertical-menu {

  writing-mode: vertical-rl;

  list-style: none;

  padding: 0;

  margin: 0;

  background-color: #4caf50;

  color: white;

}

.vertical-menu li {

  padding: 10px;

  border-bottom: 1px solid white;

}

Menu items display vertically, suitable for side navigation.

8. Complete Example: Writing Mode Demo

<!DOCTYPE html>

<html>

<head>

  <style>

    .horizontal {

      writing-mode: horizontal-tb;

      margin: 10px;

      font-size: 18px;

    }

    .vertical {

      writing-mode: vertical-rl;

      border: 1px solid #333;

      padding: 10px;

      margin: 10px;

    }

    .sideways {

      writing-mode: sideways-rl;

      border: 1px solid #333;

      padding: 10px;

      margin: 10px;

    }

  </style>

</head>

<body> 

<h2>CSS Writing Mode Examples</h2>

<p class="horizontal">Horizontal text (default)</p>

<p class="vertical">Vertical text (top to bottom, right to left)</p>

<p class="sideways">Sideways text (rotated 90° clockwise)</p>

</body>

</html>

9. Advantages of CSS Writing Modes

  • Supports multiple languages & scripts
  • Creates vertical menus & sidebars
  •  Allows rotated headings & creative layouts
  • Easy to implement without JavaScript
  • Modern web design technique

Conclusion

CSS Writing Modes give full control over text direction and layout, making websites multilingual-friendly and visually creative. It is a must-know property for advanced CSS design.