← Back to CSS Course | Chapter 9: Modern CSS Features | Lesson 5 of 25

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:

  1. Introduction to Writing Modes
  2. Horizontal-TB Mode
  3. Vertical-RL and Vertical-LR Modes
  4. Text Orientation Options
  5. Combining Writing Modes with Grid Layouts
Syntax
css 
selector {
  writing-mode: horizontal-tb | vertical-rl | vertical-lr;
}

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.
  • Accepted values:
  • horizontal-tb — horizontal lines flowing top to bottom (default)
  • vertical-rl — vertical lines flowing right to left
  • vertical-lr — vertical lines flowing left to right
  • sideways-rl | sideways-lr — rotated horizontal text
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • horizontal-tb — default, horizontal lines, blocks stack top to bottom
  • writing-mode: vertical-rl — for comparison
  • direction: ltr | rtl — inline direction within it
  • text-align: start — follows the writing direction
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.
  • Accepted values:
  • horizontal-tb — default, horizontal lines, blocks flow top to bottom
  • vertical-rl — vertical lines, blocks flow right to left
  • vertical-lr — vertical lines, blocks flow left to right
  • sideways-rl — like vertical-rl but glyphs rotated sideways (limited support)
  • sideways-lr — like vertical-lr but glyphs rotated sideways (limited support)
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • text-orientation: mixed — default, Latin glyphs rotated
  • text-orientation: upright — every glyph upright
  • text-orientation: sideways — all glyphs rotated
  • writing-mode: vertical-rl | vertical-lr — text-orientation only applies in vertical modes
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • writing-mode: vertical-rl — swaps the inline and block axes of the grid
  • grid-template-columns — columns follow the inline axis
  • grid-template-rows — rows follow the block axis
  • inline-size | block-size — logical sizing
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>
Live Example
Related Topics

CSS Blend Modes · CSS Logical Sizing · CSS Aspect Ratio · CSS Logical Properties

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using transform: rotate to rotate text blocks instead of using native, accessible writing-mode properties.
  2. Attempting to set text-orientation upright inside standard horizontal layouts, which is ignored.
  3. 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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.