CssConceptBeginner · 3 min read

What is writing-mode in CSS: Definition and Usage

The writing-mode property in CSS controls the direction in which text and blocks flow on a webpage, such as horizontal or vertical. It changes how content is laid out, supporting languages that read top-to-bottom or right-to-left.

⚙️

How It Works

The writing-mode property sets the direction that text and block elements flow inside a container. Imagine reading a book: most English books flow left to right and top to bottom. But some languages, like Japanese or Arabic, have different reading directions. writing-mode lets you tell the browser how to arrange text to match those directions.

Think of it like changing the orientation of a page. Instead of lines going left to right, you can make them go top to bottom or right to left. This affects not only text but also how block elements stack and flow inside their container.

💻

Example

This example shows text flowing vertically from top to bottom, like traditional Japanese writing.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Writing Mode Example</title>
<style>
  .vertical-text {
    writing-mode: vertical-rl;
    border: 1px solid #333;
    padding: 1rem;
    width: 4rem;
    font-size: 1.2rem;
    background-color: #f0f0f0;
  }
</style>
</head>
<body>
  <div class="vertical-text">This text flows vertically from top to bottom.</div>
</body>
</html>

Output

A narrow box with text arranged vertically from top to bottom, reading down the right side.

🎯

When to Use

Use writing-mode when you need to support languages with vertical or right-to-left text directions, such as Japanese, Chinese, Arabic, or Hebrew. It helps create layouts that feel natural for those readers.

It is also useful for creative designs where vertical text or rotated layouts improve the look or fit better in a space, like in sidebars, menus, or artistic headings.

✅

Key Points

writing-mode controls text flow direction: horizontal or vertical.
Common values include horizontal-tb, vertical-rl, and vertical-lr.
It affects block layout, not just text.
Essential for multilingual websites supporting vertical or right-to-left scripts.
Works well for creative and responsive designs.

✅

Key Takeaways

writing-mode changes the direction text and blocks flow on a webpage.

It supports vertical and right-to-left languages for proper reading experience.

Use it to create natural layouts for different languages or creative designs.

Common values are horizontal-tb, vertical-rl, and vertical-lr.

It affects both text direction and block stacking inside containers.