CSS Vertical Text & CJK Considerations: Writing Modes and Layout

Vertical text is common in Japanese, Chinese, and some design-driven web layouts, but it is easy to get wrong if you rely on rotation alone. This article explains how CSS vertical writing works, how it affects CJK text, and which properties you need to control layout, orientation, spacing, and readability.

Quick answer: Use writing-mode to switch text flow to vertical layout, then refine character direction with text-orientation. For CJK content, vertical writing is usually better than rotating a horizontal block with transforms.

Difficulty: Intermediate

You'll understand this better if you know: basic CSS layout, how inline text flows, and the difference between block and inline elements.

1. What Is Vertical Text in CSS?

Vertical text in CSS means the text flow runs top-to-bottom, and lines advance horizontally across the page. This is different from simply turning a block of text with a transform, because CSS vertical writing changes how the browser lays out lines, punctuation, spacing, and mixed scripts.

writing-mode controls the direction in which text flows.
text-orientation controls how individual characters are oriented inside vertical lines.
CJK languages often use vertical layout as a native or traditional reading direction.
Rotation with transform changes appearance, but not text layout behavior.

For internationalized interfaces, this matters because the browser needs to treat punctuation, Latin words, numbers, and line wrapping differently from a simple visual rotation.

2. Why Vertical Text Matters

Vertical text is not just a decorative effect. In Japanese publishing, signage, book layouts, labels, and some editorial designs, vertical text can be a core part of the reading experience. In UI design, it can also help fit narrow sidebars, decorative headings, or mixed-language content in a culturally appropriate way.

Using the correct CSS approach helps you preserve reading order and avoid awkward character spacing. It also reduces accessibility and maintenance issues compared with hand-rotated text or image-based text.

3. Core CSS Properties for Vertical Writing

The most important properties are writing-mode and text-orientation. Together, they define whether text runs horizontally or vertically and whether individual glyphs remain upright or are rotated sideways.

Basic vertical writing syntax

The simplest starting point is to switch writing mode on an element that contains the text.

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

This example makes text flow vertically from top to bottom, with line progression from right to left. The upright orientation keeps each character upright instead of rotating the line as a whole.

The main writing-mode values

horizontal-tb is the default horizontal flow, top to bottom lines.
vertical-rl makes text flow vertically, with new columns placed from right to left.
vertical-lr makes text flow vertically, with new columns placed from left to right.

In most CJK typography, vertical-rl is the most common choice.

The main text-orientation values

mixed preserves upright CJK characters and rotates Latin text as needed.
upright keeps all characters upright, including Latin letters and digits.
sideways rotates horizontal characters sideways in vertical flow.

Pick the orientation based on whether the text is mostly CJK, mostly Latin, or a mix of both.

4. Step-by-Step Examples

Example 1: A vertical heading

A vertical heading is a common design use case. Here the text is decorative, but it still uses real text and CSS, not an image.

<div class="card">
  <h2 class="vertical-heading">東京</h2>
  <p>City guide</p>
</div>

.vertical-heading {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 2rem;
}

This works well for short labels, section markers, and poster-style content. The important part is that the browser understands the text is vertical from the start.

Example 2: Mixed Japanese and Latin text

Vertical CJK layouts often contain numbers, acronyms, or English terms. Mixed content needs special care because Latin text can become hard to read if it is oriented incorrectly.

<p class="vertical-copy">CSS 3 と 日本語</p>

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

With mixed, CJK characters stay upright while Latin characters and digits are handled in a more readable way for vertical text.

Example 3: A sidebar label with vertical columns

Vertical writing is useful when you need a slim label area beside a content panel.

<aside class="sidebar-label">お知らせ</aside>

.sidebar-label {
  writing-mode: vertical-lr;
  text-orientation: upright;
  padding: 0.5rem;
  border: 1px solid #ccc;
}

This layout is more natural than rotating the sidebar with transform, because the browser still calculates the text flow vertically.

Example 4: Vertical text inside a constrained box

Sometimes the layout must stay within a fixed-size panel. In that case, the browser may need wrapping or clipping to keep the vertical text readable.

<div class="badge">新商品</div>

.badge {
  writing-mode: vertical-rl;
  text-orientation: upright;
  width: 2.5rem;
  height: 8rem;
  overflow: hidden;
}

This demonstrates how vertical text still participates in layout like normal content, so dimensions and overflow matter.

5. Practical Use Cases

Japanese book-style headings or chapter markers on a website.
Editorial side labels where a narrow vertical strip is more readable than a horizontal one.
Posters, product packaging previews, and cultural landing pages that need authentic vertical typography.
Navigation or decorative text where vertical flow is part of the brand style.
UI labels in multilingual interfaces where CJK text should stay natural and not be rotated as an image effect.

Use vertical writing when the text itself is meant to be read vertically. Use rotation only when you need a visual effect and readability is secondary.

6. Common Mistakes

Mistake 1: Rotating text instead of using writing-mode

A common beginner approach is to rotate a horizontal block with transform. That may look vertical, but it does not behave like vertical writing for line flow, punctuation, or mixed scripts.

Problem: The text looks rotated, but the browser still lays it out horizontally, which often causes spacing, wrapping, and accessibility issues.

<h2 class="rotated-title">日本語</h2>

.rotated-title {
  transform: rotate(90deg);
}

Fix: Use vertical writing properties so the browser handles text flow correctly.

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

The corrected version works because layout, not just appearance, becomes vertical.

Mistake 2: Using the wrong text-orientation for Latin content

When vertical text includes English words, acronyms, or numbers, upright can make the line hard to scan. Many layouts need mixed or sideways instead.

Problem: All characters are forced upright, so Latin text may look unnatural or become difficult to read in a mixed-language layout.

<p class="label">CSS Tips 2025</p>

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

Fix: Choose an orientation that matches the script mix.

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

The corrected version is easier to read because the browser can handle script-specific orientation more naturally.

Mistake 3: Forgetting that width and height behave differently

In vertical writing, the inline direction changes. This means width and height may not affect the text box the way you expect if you are thinking in horizontal terms.

Problem: A fixed width may not control the text flow the way you expect, so the text can overflow or appear clipped.

<div class="panel">縦書きテキスト</div>

.panel {
  writing-mode: vertical-rl;
  width: 3rem;
}

Fix: Size the box with the vertical flow in mind and test the resulting content dimensions.

.panel {
  writing-mode: vertical-rl;
  inline-size: 3rem;
  block-size: 12rem;
}

The corrected version works because logical properties match the writing direction more reliably than physical width and height.

7. Best Practices

1. Prefer logical properties in vertical layouts

When text can switch between horizontal and vertical writing, logical properties such as inline-size, block-size, margin-inline, and padding-block adapt better than physical properties.

.label {
  writing-mode: vertical-rl;
  inline-size: 2rem;
  padding-inline: 0.5rem;
}

This makes the component easier to reuse in multilingual interfaces.

2. Keep vertical text short when possible

Long paragraphs in vertical layout are harder to scan on the web than in print. Use vertical writing for headings, labels, short notices, or decorative text, and keep body copy horizontal unless the design strongly requires otherwise.

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

Short content stays legible and reduces the chance of awkward line breaks.

3. Test mixed scripts and punctuation

CJK vertical text often contains parentheses, commas, Latin abbreviations, and numbers. Check how the actual content behaves, not just the sample phrase, because punctuation and digit sequences are where layout problems show up first.

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

Testing with realistic content helps you catch orientation issues before launch.

8. Limitations and Edge Cases

Vertical writing support is good in modern browsers, but older browsers may have uneven behavior with advanced values or mixed scripts.
Some fonts are optimized for horizontal reading and can look awkward when used vertically, especially for punctuation and Latin letters.
Replacing vertical text with a rotated image or SVG can solve one design problem but creates others, such as accessibility and localization pain.
Vertical layout can interact with line wrapping, overflow, and spacing in ways that differ from horizontal text, so test actual content lengths.
In some UI components, the surrounding layout may need logical properties and flexible sizing to avoid clipped text.

If vertical text seems to be “not working,” first confirm the element is not overridden by another rule, then check whether the browser supports the specific writing-mode and text-orientation values you are using.

9. Practical Mini Project

Here is a small, complete example of a product card with a vertical CJK badge and a horizontal description. It shows how to combine vertical writing with a normal layout without breaking the rest of the card.

<article class="product-card">
  <div class="product-badge">新発売</div>
  <div class="product-body">
    <h2>Matcha Tea Set</h2>
    <p>A compact gift set with a vertical Japanese badge and horizontal product details.</p>
  </div>
</article>

.product-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #ddd;
}

.product-badge {
  writing-mode: vertical-rl;
  text-orientation: upright;
  background: #f5f0d8;
  padding: 0.5rem;
  font-weight: bold;
}

.product-body {
  flex: 1;
}

This mini project demonstrates the normal pattern for vertical CJK text on the web: keep the vertical content small and intentional, and let the surrounding content flow naturally.

10. Key Points

writing-mode changes the actual text flow, not just the visual appearance.
vertical-rl is a common choice for CJK vertical writing.
text-orientation controls how characters appear inside vertical lines.
Logical properties make vertical layouts easier to maintain.
Rotation is not a substitute for true vertical text layout.

11. Practice Exercise

Create a vertical badge for a Japanese event flyer using real text, not an image.
Make the badge flow vertically from top to bottom and keep the rest of the flyer horizontal.
Test the badge with both CJK characters and a short Latin acronym.

Expected output: A narrow badge whose CJK text is readable vertically, while the flyer content remains in a normal horizontal layout.

Hint: Start with writing-mode: vertical-rl and then try text-orientation: mixed for the badge.

Solution:

<section class="flyer">
  <div class="flyer-badge">EVENT 2025</div>
  <div class="flyer-content">
    <h2>秋の祭り</h2>
    <p>Join us for food, music, and workshops.</p>
  </div>
</section>

.flyer {
  display: flex;
  gap: 1rem;
}

.flyer-badge {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 0.5rem;
  border: 1px solid #aaa;
}

.flyer-content {
  flex: 1;
}

This solution works because the badge uses true vertical text rules, while the main flyer content stays readable in the standard horizontal flow.

12. Final Summary

CSS vertical text is best handled with writing-mode and text-orientation, not with simple visual rotation. That approach gives the browser the information it needs to lay out CJK text, punctuation, Latin words, and line breaks correctly.

When you build vertical layouts, think about the reading direction, the script mix, and whether the text should stay upright or appear sideways. Use logical properties, test real content, and keep vertical text focused on short labels, headings, or decorative elements where it adds value.

If you want to go further, the next useful topics are CSS logical properties, international typography, and browser support for writing modes in mixed-language interfaces.