CSS Writing Modes: Vertical Layouts, CJK Typography and RTL/LTR

1. Writing modes: more than just vertical text

CSS Writing Modes are often equated with vertical typography, yet they actually describe the fundamental coordinate system of the CSS layout model. Every element has an inline axis (the direction in which text flows) and a block axis (the direction in which blocks are stacked). For horizontal Western languages, inline runs left to right and block runs top to bottom. For vertical Japanese, inline runs top to bottom and block runs right to left.

Understanding these axes is essential for modern CSS architecture, because every Flexbox and Grid concept (main axis, cross axis, justify-content, align-items) is also built on the inline/block axis rather than on physical directions. When writing-mode changes, these axes rotate along with it, and Flexbox/Grid layouts adapt automatically. This is not an accidental feature but a deliberate design principle that forms the basis for genuine internationalization on the web.

2. writing-mode: the four main values explained

The CSS property writing-mode has four main values. horizontal-tb is the default for Western languages: text flows horizontally, blocks stack from top to bottom. vertical-rl is the traditional value for East Asian vertical text: text flows top to bottom, lines stack from right to left, the classic layout for Japanese literature and traditional Chinese script. vertical-lr is the mirror image: text flows top to bottom, lines stack from left to right, rarely used but found, for example, in Mongolian script and some technical diagrams. The fourth pair, sideways-rl and sideways-lr, rotates the entire text block by 90 degrees, useful for tab labels and side navigations.

An important technical detail: when writing-mode is set to vertical-rl or vertical-lr, width and height also swap their logical meaning. What is physically defined as width becomes the block dimension (the vertical extent of the text), and height becomes the inline dimension. This is one reason logical properties such as inline-size and block-size are preferable: they remain correct relative to the writing direction, regardless of writing-mode changes.

/* The four writing-mode values and their effects */

/* Standard horizontal: text flows left-to-right, blocks top-to-bottom */
.horizontal-ltr {
  writing-mode: horizontal-tb;
  direction: ltr; /* Default */
}

/* Traditional CJK vertical: text flows top-to-bottom, columns right-to-left */
.vertical-japanese {
  writing-mode: vertical-rl;
  /* inline-size now controls the height, block-size controls the width */
}

/* Vertical left-to-right: text flows top-to-bottom, columns left-to-right */
.vertical-ltr {
  writing-mode: vertical-lr;
  /* Used in: Mongolian script, some technical diagrams */
}

/* Rotated sideways: entire block rotated 90 degrees */
.sidebar-label {
  writing-mode: sideways-lr;
  /* Useful for: tab labels, rotated headings, column headers */
}

/* writing-mode affects how width/height map to logical dimensions:
   In horizontal-tb: width = inline-size, height = block-size
   In vertical-rl:   width = block-size,  height = inline-size */

.responsive-box {
  /* Physical, breaks with writing-mode changes */
  width: 200px;  /* horizontal: inline, vertical: block */

  /* Logical, always inline dimension regardless of writing-mode */
  inline-size: 200px; /* Preferred for internationalized layouts */
}

3. text-orientation: character alignment in vertical layouts

When writing-mode is set to vertical-rl or vertical-lr, the question arises of how individual characters are aligned. The text-orientation property controls exactly that. The value mixed is the default: CJK characters (Chinese, Japanese, Korean) are placed upright, while Latin letters are rotated by 90 degrees. The value upright sets all characters upright, including letters from Latin scripts, which is useful for decorative effects or specific language requirements. sideways rotates all characters by 90 degrees, including CJK characters.

For Japanese web projects, the combination of writing-mode: vertical-rl and text-orientation: mixed is the standard. CJK characters, which are naturally designed for vertical reading, remain upright, while embedded English words or numbers appear rotated, matching the natural Japanese reading experience. For purely typographic effects in Western languages (for example, a rotated chapter title in a book design), text-orientation: sideways is the right choice, because it rotates all characters as one connected unit instead of setting them upright individually.

4. CJK typography: Chinese, Japanese, Korean, set vertically

Vertical CJK typography is a complex field that goes well beyond simply applying writing-mode: vertical-rl. Traditional Japanese uses vertical script with furigana ruby text (pronunciation hints above or beside kanji characters), tate-chu-yoko (horizontal insertions within vertical text for numbers or abbreviations) and specific character-set requirements. CSS supports these concepts through the ruby elements and the text-combine-upright property.

text-combine-upright (also known as tate-chu-yoko) makes it possible to display short character sequences, typically two- to four-digit numbers, horizontally inline within a vertical text context. text-combine-upright: all applies this to every character of an element, while text-combine-upright: digits 2 applies it specifically to two consecutive digits. This feature is essential for professional Japanese web development and is supported in Chrome, Safari and Firefox. The combination of writing-mode: vertical-rl, text-orientation: mixed and text-combine-upright forms the complete CSS system for Japanese vertical typography.

/* Complete CJK vertical typography setup */

.article-japanese {
  writing-mode: vertical-rl;
  text-orientation: mixed;    /* CJK upright, Latin rotated */
  font-family: "Noto Serif CJK JP", "Yu Mincho", serif;
  line-height: 1.8;           /* Generous spacing for vertical reading */

  /* In vertical mode: width controls number of columns (block dimension) */
  inline-size: 100%;          /* Full height of the container */
}

/* Tate-Chu-Yoko: inline horizontal numbers in vertical text */
.tcy {
  text-combine-upright: all;  /* Numbers/short sequences shown horizontally */
}

/* Example: 2024 becomes "20" combined, "24" combined, followed by the year character upright */
.year-digits {
  text-combine-upright: digits 4; /* Combine up to 4 consecutive digits */
}

/* Ruby annotations for furigana */
ruby {
  ruby-position: over;        /* In vertical: over = right side of character */
}

/* Chinese traditional vertical: right-to-left column order */
.article-traditional-chinese {
  writing-mode: vertical-rl;
  text-orientation: upright;  /* All CJK upright, which is default for CJK */
}

/* Korean vertical: less common, mostly horizontal */
.korean-vertical-decoration {
  writing-mode: vertical-lr;
  text-orientation: upright;
}

5. Logical CSS properties: the end of margin-left

Logical CSS properties are the complementary system to CSS Writing Modes. Instead of margin-left and margin-right, you use margin-inline-start and margin-inline-end. Instead of padding-top and padding-bottom, you use padding-block-start and padding-block-end. These properties are relative to the current inline and block axis, not to physical directions. When writing-mode or direction changes, logical properties adapt automatically.

The shorthand notations margin-inline, margin-block, padding-inline and padding-block let you set both sides of an axis at once, similar to margin: 0 auto, but axis-relative. For centered layouts, margin-inline: auto is the logical alternative to margin-left: auto; margin-right: auto. The dimension properties inline-size and block-size replace width and height, and min-inline-size, max-inline-size, min-block-size, max-block-size round out the system. Browser support exists in all modern browsers.

6. RTL layouts: Arabic and Hebrew in CSS

Right-to-left scripts such as Arabic and Hebrew require not just mirrored text but a fully reversed layout. The HTML attribute dir="rtl" activates RTL text direction, and the CSS property direction: rtl complements it on the CSS side. In an RTL context, the inline axis runs from right to left, while block elements still stack from top to bottom. All logical CSS properties adapt automatically: margin-inline-start then applies to the right side, margin-inline-end to the left.

For internationalized CSS architecture, the principle is this: physical properties (margin-left, padding-right, float: left, border-left) must be explicitly overridden for RTL languages. Logical properties (margin-inline-start, padding-inline-end, float: inline-start, border-inline-start) work correctly in both directions automatically. Rewriting a CSS framework from physical to logical properties is the single biggest step toward genuine internationalizability, and it substantially reduces the amount of RTL override styling needed at the same time.

7. Multilingual sites: CSS architecture for global projects

A multilingual site that needs to support LTR languages (German, English, vertical Japanese) as well as RTL languages (Arabic, Hebrew) needs a well thought out CSS architecture. The foundation is consistent use of logical properties for all layout rules. The :lang() pseudo-class selector allows language-specific CSS without extra classes: :lang(ar) for Arabic, :lang(ja) for Japanese, :lang(he) for Hebrew. The HTML lang attribute, set correctly, activates both the browser's internal reading heuristics and the CSS selector cascade.

An important aspect for multilingual CSS Writing Modes: Flexbox and Grid respond to direction and writing-mode, but only when logical properties are used. justify-content: flex-start then means "right" in RTL, exactly the desired behavior. With physical properties (text-align: left instead of text-align: start), developers would have to write RTL override styles. The value text-align: start is the logical counterpart to left/right and adapts automatically.

/* International CSS architecture with logical properties */

/* Base: all spacing uses logical properties */
.card {
  padding-inline: 1.5rem;     /* left/right in LTR, right/left in RTL */
  padding-block: 1rem;        /* top/bottom, same in all writing modes */
  margin-inline: auto;        /* Center block: equivalent of margin: 0 auto */
  border-inline-start: 4px solid currentColor; /* Left in LTR, right in RTL */
  border-radius: 0.75rem;
  inline-size: min(100%, 640px); /* Width (or height in vertical mode) */
}

/* Text alignment: logical values */
.card-title {
  text-align: start;          /* Left in LTR, right in RTL, automatic */
}

/* Language-specific overrides */
:lang(ar) {
  font-family: "Noto Sans Arabic", sans-serif;
  /* direction: rtl is set via HTML dir="rtl", no CSS override needed */
}

:lang(ja) .article-body {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Float using logical values */
.pull-quote {
  float: inline-start;        /* Left in LTR, right in RTL */
  margin-inline-end: 1.5rem;  /* Space after the floated element */
}

/* Inset shorthand: logical equivalent of top/right/bottom/left */
.tooltip {
  position: absolute;
  inset-inline-start: 0;      /* left in LTR, right in RTL */
  inset-block-start: 100%;    /* top always */
}

8. Physical vs. logical properties compared

The choice between physical and logical CSS properties has a direct impact on the maintainability of internationalized projects. With physical properties, a second stylesheet or a class layer for RTL overrides becomes unavoidable. With logical properties, the same rule works correctly in both LTR and RTL, with no override needed.

9. Writing modes for decorative typography effects

CSS Writing Modes are not just used for internationalization but also for decorative typography effects in Western designs. Rotated chapter labels in book design, vertical tab labels, sideways status badges on product cards, or watermark-like background text: all of this can be achieved with writing-mode: vertical-rl and text-orientation: sideways. The advantage over transform: rotate() is that the element occupies exactly the space it needs in its rotated form within the document flow, with no overlap with neighboring elements.

A concrete use case: table headers that should stand vertically in a compact view to save column space. Instead of narrow columns with truncated text, you set writing-mode: vertical-rl; transform: rotate(180deg) on the th elements; the rotate(180deg) correction flips the reading direction from bottom-to-top to top-to-bottom. The result is compact tables with full, readable headings and no abbreviations. Combining writing-mode and transform for this purpose is an established best practice for dense data tables.

10. Summary

CSS Writing Modes define the coordinate system on which the entire CSS box model and Flexbox/Grid are built. Understanding the inline axis and block axis is the prerequisite for correct internationalization: when writing-mode or direction changes, these axes rotate along with it, and all logical properties adapt automatically. text-orientation: mixed is the standard for CJK vertical typography, and text-combine-upright enables tate-chu-yoko for numbers in Japanese text. Logical properties such as margin-inline-start, padding-block, inline-size and text-align: start replace physical properties and make CSS RTL safe without override styles.

For international web projects, the switch from physical to logical properties is the single most important investment. A CSS system that uses logical properties from the start needs only dir="rtl" in the HTML and a font override in the CSS for RTL support, with no second stylesheet layer and no flood of [dir="rtl"] .element { margin-left: 0; margin-right: 1rem; } overrides. CSS Writing Modes combined with logical properties form the complete, maintainable foundation for global web projects.

11. FAQ: CSS Writing Modes