CSS Writing Modes — Vertical Text, RTL & International Layouts

DodaTech Updated 2026-06-06 10 min read

In this tutorial, you'll learn about CSS Writing Modes. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

CSS writing modes control the direction of text flow — horizontal (left-to-right or right-to-left) and vertical (top-to-bottom). If your site serves users in multiple languages, understanding writing modes is essential.

What You'll Learn

By the end, you'll use writing-mode for vertical text in East Asian designs, direction: rtl for Arabic and Hebrew content, logical properties (margin-inline, padding-block) that adapt to writing direction, and text-orientation for mixed writing modes.

ℹ️ Info

Prerequisite: You should understand CSS box model. CSS Box Model covers what you need.

Where This Fits

flowchart LR
    A["CSS Styling"] --> B["**CSS Writing Modes**"]
    B --> C["CSS Reference"]
    C --> D["Frontend-Ready Developer"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style D fill:#22c55e,stroke:#16a34a,color:#fff

Writing Mode — Top to Bottom or Left to Right

The writing-mode property changes how text flows within an element:

.vertical-rl { writing-mode: vertical-rl; }  /* Right to left, top to bottom */
.vertical-lr { writing-mode: vertical-lr; }  /* Left to right, top to bottom */

Value	Text Flow	Common Use
`horizontal-tb`	Left → right, top → bottom	Default (English, most languages)
`vertical-rl`	Top → bottom, right → left	Traditional Chinese, Japanese, Korean
`vertical-lr`	Top → bottom, left → right	Mongolian, some UI labels

Example

.vertical-text {
  writing-mode: vertical-rl;
  height: 200px;
  font-size: 1.2rem;
}

<div class="vertical-text">
  This text flows from top to bottom, right to left.
</div>

Use case: Vertical headings for East Asian design aesthetics, menu labels on narrow sidebars, artistic typography.

Direction — Left to Right vs Right to Left

The direction property controls the inline text direction:

.rtl { direction: rtl; }  /* Right to left (Arabic, Hebrew) */
.ltr { direction: ltr; }  /* Left to right (English, default) */

<p class="rtl">هذا نص باللغة العربية</p>

Use case: Sites serving Arabic, Hebrew, Persian, Urdu, or other RTL languages.

Note: For full RTL support, also set unicode-bidi: embed or use the HTML dir="rtl" attribute on the <html> element — this affects the entire page including scrollbars, alignment, and navigation order.

Logical Properties — Adapt to Any Writing Mode

Physical properties (left, right, top, bottom) are fixed. If you switch from LTR to RTL, margin-left: 16px still pushes from the left — but in an RTL layout, it should push from the right. Logical properties solve this:

/* Physical (fixed direction) */
.element {
  margin-left: 16px;
  padding-top: 8px;
  width: 300px;
  border-right: 2px solid;
}

/* Logical (adapts to writing direction) */
.element {
  margin-inline-start: 16px;     /* margin-left in LTR, margin-right in RTL */
  padding-block-start: 8px;      /* padding-top */
  inline-size: 300px;            /* width */
  border-inline-end: 2px solid;  /* border-right in LTR, border-left in RTL */
}

Physical	Logical (Inline)	Logical (Block)
`width`	`inline-size`	—
`height`	—	`block-size`
`margin-left`	`margin-inline-start`	—
`margin-right`	`margin-inline-end`	—
`margin-top`	—	`margin-block-start`
`margin-bottom`	—	`margin-block-end`
`padding-left`	`padding-inline-start`	—
`padding-top`	—	`padding-block-start`
`border-left`	`border-inline-start`	—
`border-top`	—	`border-block-start`

Analogy: Physical properties are like giving someone directions using "left" and "right" — they change depending on where the person is facing. Logical properties use "inline" and "block" — like "forward" and "sideways" — they adapt to the person's orientation.

Text Orientation — Mixing Vertical and Horizontal

When using vertical writing modes, you may want to keep certain characters horizontal (like numbers or Latin words):

.mixed-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;       /* Default: CJK vertical, Latin sideways */
}

.rotate-text {
  writing-mode: vertical-rl;
  text-orientation: upright;     /* All characters upright */
}

.sideways-text {
  writing-mode: vertical-rl;
  text-orientation: sideways;    /* All characters rotated 90° */
}

Value	Effect
`mixed`	CJK characters upright, Latin/numbers rotated sideways (default)
`upright`	All characters upright (good for vertical headings)
`sideways`	All characters rotated 90°

Common Writing Mode Mistakes

1. Using Physical Properties for RTL Sites

/* ❌ Breaks in RTL */
.sidebar { margin-left: 16px; }

/* ✅ Works everywhere */
.sidebar { margin-inline-start: 16px; }

2. Not Setting HTML `dir` Attribute

/* ❌ CSS direction alone doesn't fix element ordering */
.rtl { direction: rtl; }

/* ✅ Set on the root element for full support */
/* <html dir="rtl"> */

The HTML dir attribute controls how the browser lays out elements (not just text). CSS direction alone doesn't reorder flex items or grid cells.

3. Forgetting `text-orientation` for Mixed Content

/* ❌ Latin text is hard to read in vertical mode */
.vertical { writing-mode: vertical-rl; }

/* ✅ Better: keep Latin sideways */
.vertical { writing-mode: vertical-rl; text-orientation: mixed; }

4. Applying Vertical Writing Mode to the Whole Page

/* ❌ The entire page flows vertically — very unusual */
html { writing-mode: vertical-rl; }

Vertical writing mode is usually applied to specific elements (sidebars, headings), not the full page.

Security Angle — RTL Security in Applications

Security dashboards from Durga Antivirus Pro support full RTL layouts for Arabic and Hebrew-speaking users. Using logical properties throughout the CSS ensures the dashboard layout mirrors correctly without duplicating styles.

Try It Yourself

▶ Try It YourselfEdit the code and click Run

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Writing Modes Demo</title>
  <style>
    * { box-sizing: border-box; }
    body { font-family: system-ui, sans-serif; line-height: 1.6; margin: 20px; color: #1a202c; }
    .demo-grid { display: flex; gap: 2rem; flex-wrap: wrap; }
    .demo-box { flex: 1; min-width: 200px; background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; }
    .vertical-rl { writing-mode: vertical-rl; height: 200px; }
    .vertical-lr { writing-mode: vertical-lr; height: 200px; }
    .rtl-demo { direction: rtl; }
    .card { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; margin: 1rem 0; }
  </style>
</head>
<body>
  <h1><a href="/frontend/css/">CSS</a> Writing Modes</h1>

<div class="demo-grid">
    <div class="demo-box">
      <h3>Horizontal (default)</h3>
      <p>writing-mode: horizontal-tb</p>
      <p>Text flows left to right, top to bottom.</p>
    </div>
    <div class="demo-box vertical-rl">
      <h3>Vertical R-L</h3>
      <p>writing-mode: vertical-rl — text flows top to bottom, then right to left.</p>
    </div>
    <div class="demo-box vertical-lr">
      <h3>Vertical L-R</h3>
      <p>writing-mode: vertical-lr — text flows top to bottom, then left to right.</p>
    </div>
  </div>

<div class="card">
    <h2>RTL (Right to Left)</h2>
    <p class="rtl-demo">This text is in Arabic: مرحبا بكم في موقعنا. Notice how it flows from right to left.</p>
  </div>
</body>
</html>

Common Mistakes Beginners Make

1. Skipping the Fundamentals

Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.

2. Not Practicing Enough

Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.

3. Ignoring Error Messages

Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.

4. Copy-Pasting Without Understanding

It's tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.

5. Giving Up Too Early

Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.

Practice Questions

Q1: What does writing-mode: vertical-rl do? {{< details "Show answer" >}} Text flows from top to bottom, then right to left — like traditional Chinese or Japanese writing. {{< /details >}}

Q2: What's the difference between direction: rtl and writing-mode: vertical-rl? {{< details "Show answer" >}} direction: rtl keeps horizontal text but flows it right-to-left (Arabic, Hebrew). writing-mode: vertical-rl makes text flow top-to-bottom (East Asian). {{< /details >}}

Q3: What problem do logical properties solve? {{< details "Show answer" >}} Physical properties (margin-left) are fixed to one direction. Logical properties (margin-inline-start) adapt to the writing mode — automatically switching in RTL layouts. {{< /details >}}

Q4: When should you NOT use writing-mode: vertical-rl on an entire page? {{< details "Show answer" >}} Almost always. Vertical writing is usually decorative or for specific content. Applying it globally makes the page unusable for most readers. {{< /details >}}

Q5: How do you make numbers in vertical text display upright instead of rotated? {{< details "Show answer" >}} Use text-orientation: upright. This keeps all characters (including Latin and numbers) in their upright orientation instead of rotating them. {{< /details >}}

FAQ

What is a writing mode in CSS?

Writing mode controls text direction — horizontal (LTR or RTL) or vertical (top-to-bottom). It includes writing-mode, direction, and text-orientation.

Which CSS property adapts to RTL automatically?

Logical properties like margin-inline-start, padding-inline-end, and border-inline-start adapt automatically to the writing direction.

Do I need logical properties for English-only sites?

Not strictly, but they future-proof your code. If you ever add RTL support, logical properties work automatically without rewriting.

What's the HTML equivalent of CSS `direction: rtl`?

The HTML dir="rtl" attribute on the <html> element. It's preferred over CSS for page-level direction because it handles element ordering.

How do I test RTL layouts?

Set <html dir="rtl"> and refresh. Check that text alignment, margins, padding, borders, and navigation all mirror correctly.

FAQ

What is Css Writing Modes?

: Css Writing Modes refers to the core concepts and practices used to build and manage modern web applications. Understanding it is essential for web developers.

Do I need prior experience to learn Css Writing Modes?

: Basic familiarity with web development concepts helps, but Css Writing Modes can be learned step by step even as a beginner.

How long does it take to learn Css Writing Modes?

: With consistent practice, you can grasp the fundamentals in a few days to a week. Mastery takes ongoing practice and real-world projects.

Where can I use Css Writing Modes in real projects?

: Css Writing Modes is used in a wide range of applications — from simple websites to complex enterprise systems, depending on the specific tools and technologies involved.

What are common tools used with Css Writing Modes?

: The specific tools depend on the technology stack, but version control (Git), package managers, and testing frameworks are commonly used alongside most development topics.

FAQ

What is Writing Modes in CSS?

: Writing Modes refers to the CSS properties and techniques used to control how elements are displayed on a webpage. Mastering it helps you build better, more responsive layouts.

Do I need to memorize all CSS properties?

: No. Focus on understanding the core concepts and use reference docs when needed. Practice is more important than memorization.

How do I debug Writing Modes issues?

: Use browser DevTools (F12) to inspect elements, check computed styles, and experiment with values in real time.

Is Writing Modes the same across all browsers?

: Most modern browsers support CSS standards consistently, but always test across browsers for edge cases.

What's the best way to practice Writing Modes?

: Build small projects and experiment with different values. Use online playgrounds like CodePen or JSFiddle for quick testing.

What's Next?

Continue with more CSS topics:

CSS Reference

Complete property reference

CSS Scrollbars

Custom scrollbar styling

CSS Print

Print stylesheets

What's Next

Congratulations on completing this Css Writing Modes tutorial! Here's where to go from here:

Practice daily — Consistency is more important than long study sessions
Build a project — Apply what you learned by building something real
Explore related topics — Check out other tutorials in the same category
Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!

← Previous CSS Print — Complete Guide to Print Stylesheets Next → CSS Buttons — Complete Styling Guide with Examples

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Css