AI CSS Writing Mode — Master Multilingual Typography and Vertical Text

Published February 23, 2026 · 9 min read · Design

The web was born in English, and English reads left-to-right, top-to-bottom. But more than half the world reads differently. Japanese novels flow top-to-bottom, right-to-left. Arabic newspapers run right-to-left, top-to-bottom. Mongolian script descends in vertical columns from left to right. The CSS writing-mode property is what makes all of this possible on the web — and most developers have never touched it.

An AI CSS writing-mode generator lets you visually configure text direction, orientation, and flow without memorizing the spec. Preview how your layout behaves with real multilingual content, then export clean CSS that handles every script correctly.

Understanding CSS Writing Modes

The writing-mode property controls two things: the direction in which lines of text stack (the block flow direction) and the direction in which text runs within each line (the inline base direction). CSS defines three primary values:

/* Default: horizontal lines, stacking top to bottom */
.horizontal {
  writing-mode: horizontal-tb;
}

/* Vertical lines, stacking right to left (Japanese, Chinese) */
.vertical-rl {
  writing-mode: vertical-rl;
}

/* Vertical lines, stacking left to right (Mongolian) */
.vertical-lr {
  writing-mode: vertical-lr;
}

With horizontal-tb, text flows left-to-right (or right-to-left for RTL scripts) and lines stack downward. With vertical-rl, text flows top-to-bottom and columns stack from right to left — exactly how traditional Japanese and Chinese are typeset. With vertical-lr, columns stack left to right, matching Mongolian script conventions.

Vertical Text for CJK Languages

Traditional Chinese, Japanese, and Korean (CJK) typography uses vertical text extensively. Books, newspapers, signage, and formal documents in Japan still default to vertical layout. Here is how to implement a proper vertical reading experience:

.japanese-article {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1.8;
  letter-spacing: 0.05em;
  padding: 24px;
  height: 600px;
  overflow-x: auto;
}

/* Numbers and Latin characters rotate correctly */
.japanese-article span.upright {
  text-orientation: upright;
  text-combine-upright: all;
}

The text-orientation: mixed setting is critical. It keeps CJK characters upright while rotating Latin letters and numbers to read naturally within the vertical flow. Without it, English words embedded in Japanese text look awkward and break the reading rhythm.

Pro tip: Use text-combine-upright: all on short numeric sequences (like years or page numbers) to compress them into a single vertical character space. This is called tate-chū-yoko in Japanese typography and is essential for professional-looking vertical text.

Right-to-Left Layout for Arabic and Hebrew

RTL languages like Arabic, Hebrew, Farsi, and Urdu require more than just flipping text direction. The entire page layout needs to mirror — navigation moves to the right, scroll bars shift, and content alignment reverses:

/* Set document direction */
html[dir="rtl"] {
  direction: rtl;
}

/* Flip flexbox layouts */
.nav-rtl {
  display: flex;
  flex-direction: row-reverse;
}

/* Logical properties: work in any direction */
.card {
  margin-inline-start: 16px;
  padding-inline-end: 24px;
  border-inline-start: 3px solid var(--accent);
  text-align: start;
}

The key insight is using CSS logical properties instead of physical ones. Replace margin-left with margin-inline-start, padding-right with padding-inline-end, and text-align: left with text-align: start. These properties automatically adapt to the document direction, so a single stylesheet works for both LTR and RTL layouts. For more on responsive layout techniques, see our CSS media query guide.

Bidirectional Text Handling

Real-world multilingual content often mixes scripts. An Arabic paragraph might contain English brand names, URLs, or code snippets. The Unicode Bidirectional Algorithm handles most cases automatically, but sometimes you need explicit control:

/* Isolate embedded LTR content in RTL context */
.brand-name {
  unicode-bidi: isolate;
  direction: ltr;
}

/* Force direction for user-generated content */
.user-comment {
  unicode-bidi: plaintext;
}

The unicode-bidi: isolate value prevents the embedded text from affecting the bidirectional ordering of surrounding content. This is essential when displaying mixed-direction content like email addresses or URLs within Arabic text.

Creative Vertical Layouts for Any Language

Vertical writing mode is not just for CJK languages. Designers use it for creative English layouts too — sidebar labels, decorative headings, timeline markers, and navigation elements:

/* Vertical sidebar label */
.sidebar-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Vertical timeline axis */
.timeline-year {
  writing-mode: vertical-lr;
  font-size: 4rem;
  font-weight: 800;
  opacity: 0.1;
  position: absolute;
  left: -20px;
}

The transform: rotate(180deg) trick on vertical-rl text makes it read bottom-to-top, which often feels more natural for English sidebar labels. Without the rotation, vertical English text reads top-to-bottom, which can feel unusual for Western readers. For more creative CSS techniques, explore our CSS text shadow guide and gradient text effects.

Logical Properties: The Foundation of Multilingual CSS

If you are building a site that needs to support multiple writing modes, logical properties are non-negotiable. They replace physical directions (top, right, bottom, left) with flow-relative ones (block-start, inline-end, block-end, inline-start):

/* Physical properties: break in vertical/RTL modes */
.old-way {
  margin-top: 16px;
  padding-left: 24px;
  border-bottom: 1px solid #333;
  width: 300px;
  height: auto;
}

/* Logical properties: work in every writing mode */
.new-way {
  margin-block-start: 16px;
  padding-inline-start: 24px;
  border-block-end: 1px solid #333;
  inline-size: 300px;
  block-size: auto;
}

In horizontal-tb mode, margin-block-start equals margin-top. In vertical-rl mode, it equals margin-right. The browser handles the mapping automatically. This means your grid layouts, card components, and spacing systems all work correctly regardless of writing direction.

Flexbox and Grid in Vertical Modes

Flexbox and CSS Grid already use logical axes internally. When you change the writing mode, flex-direction: row follows the inline direction and flex-direction: column follows the block direction. This means a horizontal flex layout automatically becomes vertical when you switch writing modes — no additional CSS needed.

Testing and Debugging Writing Modes

Testing multilingual layouts requires real content in the target scripts. Do not rely on Lorem Ipsum — use actual Japanese, Arabic, or Chinese text to catch issues with character spacing, line breaking, and overflow. Common pitfalls include:

Browser DevTools let you toggle dir="rtl" on the HTML element for quick RTL testing. For vertical modes, add writing-mode: vertical-rl directly in the inspector to see how components respond. Check our CSS variable manager guide for organizing direction-aware design tokens.

Building a Multilingual Typography System

CSS writing modes unlock the full typographic potential of the web. Whether you are building a Japanese e-reader, an Arabic news portal, or simply adding creative vertical labels to an English site, understanding writing-mode, text-orientation, and logical properties is essential. Combine these with other layout tools:

Configure writing modes visually
Preview vertical text, RTL layouts, and mixed-direction content in real time. Export production-ready CSS with logical properties and proper text orientation settings.
Try AI CSS Writing Mode Generator →

The AI CSS Writing Mode Generator gives you a visual playground for experimenting with every writing direction. Switch between horizontal, vertical-rl, and vertical-lr modes, test with real multilingual content, and export CSS with logical properties that work everywhere.