CSS Writing Modes

Imagine designing an international book. In Western cultures, we read books horizontally from top to bottom. But in East Asian cultures (like Japanese or Chinese), books are read vertically from right to left, with sentences running down the page. CSS writing modes allow you to control this layout direction natively. By changing the writing mode property, you can rotate your text blocks and vertical menus natively, making your site accessible to global readers and enabling creative design layouts.

In this page:

Introduction to Writing Modes
Horizontal-TB Mode
Vertical-RL and Vertical-LR Modes
Text Orientation Options
Combining Writing Modes with Grid Layouts

Introduction to Writing Modes

The writing-mode property specifies whether lines of text are laid out horizontally or vertically, and the direction in which blocks progress across the container.

Note: Use writing-mode: vertical-rl to rotate English headers elegantly on your side panels.

Warning: Changing writing modes rotates your logical coordinates (block and inline axes) automatically.

Example: Introduction to Writing Modes

css

<style>
p {
  writing-mode: vertical-rl;
}
</style>
<p>Text lays out vertically instead of horizontally</p>

Horizontal-TB Mode

The horizontal-tb (top-to-bottom) mode is the default setting for Western languages. Text runs horizontally from left to right, and paragraph blocks stack vertically from top to bottom.

Note: Always specify this default mode inside your global resets to ensure layout consistency.

Warning: Avoid manually rotating horizontal text blocks using transform rotate if they can be formatted natively.

Example: Horizontal-TB Mode

css

<style>
p {
  writing-mode: horizontal-tb;
}
</style>
<p>Default: left-to-right text, blocks stack top to bottom</p>

Vertical-RL and Vertical-LR Modes

The vertical-rl (right-to-left) and vertical-lr (left-to-right) modes rotate text to run vertically from top to bottom. They are essential for East Asian vertical layouts and can be used to create stylish design features in Western layouts.

Note: Use vertical-lr for design-centric sidebars to align text along the left edge of the page cleanly.

Warning: Vertical text blocks can require manual height adjustments to prevent them from running off the screen.

Example: Vertical-RL and Vertical-LR Modes

css

<style>
.rl { writing-mode: vertical-rl; }
.lr { writing-mode: vertical-lr; }
</style>
<p class="rl">Vertical, right to left</p>
<p class="lr">Vertical, left to right</p>

Text Orientation Options

When you rotate Western text vertically, the browser rotates the letters sideways by default. The text-orientation property allows you to change this behavior, letting you display letters upright in vertical layouts.

Note: Use text-orientation: upright to keep vertical numbers or words easily readable for Western readers.

Warning: The upright orientation only works inside vertical-rl or vertical-lr writing modes.

Example: Text Orientation Options

css

<style>
p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
</style>
<p>Letters stay upright instead of rotated sideways</p>

Combining Writing Modes with Grid Layouts

You can combine custom writing modes with grid layouts to build complex, multi-directional web designs (such as horizontal grids next to vertical sidebars) cleanly.

Note: Use Flexbox to easily align and center your rotated vertical elements.

Warning: Ensure your container dimensions are set using logical properties to prevent alignment errors when rotating grids.

Example: Combining Writing Modes with Grid Layouts

css

<style>
.layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
}
.sidebar {
  writing-mode: vertical-rl;
  background: steelblue;
  color: white;
  padding: 8px;
}
.layout > div:not(.sidebar) {
  background: #ddd;
  padding: 8px;
}
</style>
<div class="layout">
  <div class="sidebar">Vertical sidebar</div>
  <div>Horizontal main content</div>
</div>

Common Mistakes

Using transform: rotate to rotate text blocks instead of using native, accessible writing-mode properties.
Attempting to set text-orientation upright inside standard horizontal layouts, which is ignored.
Forgetting that changing writing modes automatically rotates your block and inline axes, which can break layout dimensions.

Chapter Summary

The writing-mode property specifies if lines of text are laid out horizontally or vertically.
Use vertical-rl and vertical-lr to rotate text blocks to run vertically on your page.
Control character orientation inside vertical layouts using the text-orientation property, and pair with Flexbox for clean vertical alignments.

Browser Support

Standard CSS writing modes and text orientation properties are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Logical Sizing Next Lesson → CSS Aspect Ratio