CSS writing-mode Property

What You’ll Learn

The writing-mode property controls text direction and line stacking — essential for vertical East Asian layouts and creative design patterns.

Introduction

The writing-mode property in CSS is used to define the direction and orientation of text. This property is particularly useful for languages that are written vertically, such as Japanese and Chinese, as well as for creating unique layouts where text direction plays a key role.

By using the writing-mode property, you can control whether text is laid out horizontally or vertically and the direction in which lines are stacked.

Definition and Usage

Apply writing-mode on blocks of text, labels, or layout containers when you need vertical flow or when logical properties should follow a rotated writing axis. Pair it with text-orientation for fine control over character rotation inside vertical lines.

📝 Syntax

The syntax for the writing-mode property is simple and consists of specifying one of the predefined values.

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

Basic Example

p {
  writing-mode: vertical-rl;
  width: 200px;
  height: 100px;
}

Syntax Rules

• horizontal-tb is the default for most web content.
• vertical-rl and vertical-lr are widely supported for vertical layouts.
• sideways-rl and sideways-lr rotate horizontal text; check browser support before relying on them.
• Vertical modes swap how width and height behave for text flow — set both dimensions when needed.
• The property is inherited.

Related Properties

• text-orientation — controls character rotation in vertical lines
• direction — sets inline text direction (ltr or rtl)
• text-combine-upright — combines digits or letters in vertical text
• margin-block-start, padding-inline — logical properties that follow writing-mode

🎯 Default Value

The default value of the writing-mode property is horizontal-tb, which means text is written horizontally and lines are stacked from top to bottom.

💎 Property Values

The writing-mode property accepts keyword values that define text flow and line stacking.

When to Use writing-mode

writing-mode is helpful when text direction is part of the design or language requirements:

• Japanese and Chinese vertical layouts — Traditional top-to-bottom, right-to-left reading flow.
• Sidebar and axis labels — Compact vertical labels in charts and panels.
• Multilingual sites — Match writing direction to each language section.
• Logical CSS layouts — Use with margin-block and padding-inline for writing-mode-aware spacing.
• Creative typography — Vertical headlines and decorative text blocks.

Examples Gallery

In this example, we’ll change the writing mode of a paragraph to vertical, with lines stacked from right to left.

<style>
  p {
    writing-mode: vertical-rl;
    border: 1px solid #000;
    width: 200px;
    height: 100px;
    padding: 10px;
  }
</style>

<p>Vertical text with lines stacked right to left.</p>

.horizontal-tb { writing-mode: horizontal-tb; }
.vertical-rl { writing-mode: vertical-rl; }
.vertical-lr { writing-mode: vertical-lr; }

.sidebar-label {
  writing-mode: vertical-rl;
  font-weight: 600;
  text-transform: uppercase;
}

.vertical-block {
  writing-mode: vertical-rl;
  text-orientation: upright;
  height: 14rem;
}

♿ Accessibility

• Language expectations — Use vertical modes when the content language genuinely reads vertically; do not rotate body text arbitrarily.
• Reading order — Ensure DOM order still matches the intended reading sequence for screen readers.
• Zoom and mobile — Test vertical blocks at different viewport sizes so text remains readable.
• Contrast and size — Vertical labels still need sufficient font size and color contrast.

writing-mode + text-orientation

Vertical layouts often need both properties: writing-mode sets line direction, and text-orientation controls how individual characters rotate within each line.

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

💡 Best Practices