writing-mode

Zuletzt aktualisiert am 15. Februar 2026

writing-mode bestimmt die grundlegende Schreibrichtung: horizontal (wie in westlichen Sprachen) oder vertikal (wie in traditionellem Japanisch oder Chinesisch). text-orientation steuert die Drehung einzelner Zeichen im vertikalen Modus. direction legt fest, ob Text von links nach rechts (LTR) oder von rechts nach links (RTL) fließt, wie in Arabisch oder Hebräisch. Diese drei Eigenschaften bilden zusammen die Basis für internationalisierte Layouts und sind eng mit den logischen CSS-Properties (margin-inline, padding-block usw.) verknüpft.

Grundlagen

writing-mode verändert die gesamte Textflussrichtung eines Elements. horizontal-tb ist der Standard für westliche Sprachen: Text fließt horizontal von links nach rechts, Zeilen stapeln sich von oben nach unten (top-to-bottom). vertical-rl dreht den Textfluss um 90 Grad: Text fließt vertikal von oben nach unten, Spalten stapeln sich von rechts nach links (right-to-left). Das ist die traditionelle Schreibrichtung für Japanisch und Chinesisch. vertical-lr ist ähnlich, aber die Spalten stapeln sich von links nach rechts.

text-orientation ist nur im vertikalen Modus relevant. Mit mixed (dem Standard) werden CJK-Zeichen aufrecht dargestellt, während lateinische Buchstaben um 90 Grad gedreht werden. upright stellt alle Zeichen aufrecht dar, sideways dreht alle Zeichen um 90 Grad.

direction steuert die Inline-Richtung für bidirektionalen Text. ltr (left-to-right) ist der Standard für die meisten Sprachen. rtl (right-to-left) wird für Arabisch, Hebräisch und ähnliche Sprachen benötigt. In der Praxis solltest du direction nicht direkt in CSS setzen, sondern das HTML-Attribut dir="rtl" verwenden, weil Screenreader und andere Tools das Attribut auswerten können.

Syntax & Werte

writing-mode

text-orientation

direction

Beispiele

Vertikaler Text

vertical-rl und vertical-lr drehen den Textfluss um 90 Grad. Das ist nützlich für dekorative Elemente, Sidebar-Labels oder traditionelle CJK-Layouts.

.horizontal { writing-mode: horizontal-tb; } /* Standard */
.vertical-rl { writing-mode: vertical-rl; }  /* CJK-Stil */
.vertical-lr { writing-mode: vertical-lr; }

<div class="vertical-demo">
<div class="box v-htb"><div class="label">horizontal-tb</div>Standard: Text fließt horizontal von links nach rechts.</div>
<div class="box v-vrl"><div class="label">vertical-rl</div>Text fließt vertikal. Spalten von rechts nach links.</div>
<div class="box v-vlr"><div class="label">vertical-lr</div>Text fließt vertikal. Spalten von links nach rechts.</div>
</div>

Vertikale Labels und Sidebar-Text

Ein häufiger Einsatz von writing-mode im westlichen Webdesign: vertikale Labels an der Seite eines Elements, zum Beispiel an einer Card oder einem Abschnitt.

.card-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.75rem 0.5rem;
}

<div class="sidebar-demo">
<div class="card"><div class="card-label">Artikel</div><div class="card-content"><div class="card-title">CSS Grid Tutorial</div>Ein umfassender Guide zu CSS Grid mit praktischen Beispielen.</div></div>
<div class="card"><div class="card-label l-featured">Featured</div><div class="card-content"><div class="card-title">Flexbox Basics</div>Alles was du über Flexbox wissen musst in einem Artikel.</div></div>
<div class="card"><div class="card-label l-new">Neu</div><div class="card-content"><div class="card-title">Astro Framework</div>Moderne Webentwicklung mit Astro und Islands Architecture.</div></div>
</div>

text-orientation im Vergleich

Im vertikalen Modus bestimmt text-orientation, wie einzelne Zeichen dargestellt werden. Der Unterschied ist besonders bei gemischtem Text (lateinisch + CJK) sichtbar.

.mixed   { text-orientation: mixed; }   /* CJK aufrecht, Latin gedreht */
.upright { text-orientation: upright; }  /* Alle Zeichen aufrecht */
.sideways { text-orientation: sideways; } /* Alle Zeichen gedreht */

<div class="orient-demo">
<div><div class="label">mixed (Standard)</div><div class="box o-mixed">CSS 日本語 ABC</div></div>
<div><div class="label">upright</div><div class="box o-upright">CSS 日本語 ABC</div></div>
<div><div class="label">sideways</div><div class="box o-sideways">CSS 日本語 ABC</div></div>
</div>

RTL-Layout mit direction

direction: rtl kehrt die Inline-Richtung um. Text und Inline-Elemente fließen von rechts nach links. In der Praxis solltest du das HTML-Attribut dir="rtl" bevorzugen, aber CSS direction ist nützlich für einzelne Komponenten.

/* Bevorzuge das HTML-Attribut */
<html dir="rtl" lang="ar">

/* CSS für einzelne Komponenten */
.rtl-component {
  direction: rtl;
  text-align: start; /* Logischer Wert: wird zu right */
}

<div class="rtl-demo">
<div class="d-ltr"><div class="label">direction: ltr (Standard)</div>Text fließt von links nach rechts. Das ist der Standard für Deutsch.</div>
<div class="d-rtl"><div class="label">direction: rtl</div>النص يتدفق من اليمين إلى اليسار. هذا هو الاتجاه للغة العربية.</div>
<nav class="rtl-nav"><a href="#">الرئيسية</a><a href="#">المقالات</a><a href="#">الدورات</a><a href="#">اتصل بنا</a></nav>
</div>

Barrierefreiheit

direction sollte primär über das HTML-Attribut dir gesetzt werden, nicht über CSS. Screenreader und andere assistive Technologien werten das dir-Attribut aus, um die Lesereihenfolge korrekt zu bestimmen. CSS direction ändert nur die visuelle Darstellung, nicht die semantische Leserichtung. Verwende dir="rtl" auf dem <html>-Element für RTL-Seiten oder auf einzelnen Elementen für gemischten Text.

Vertikaler Text mit writing-mode wird von Screenreadern korrekt vorgelesen, unabhängig von der visuellen Drehung. Die logische Lesereihenfolge bleibt erhalten. Stelle aber sicher, dass die Tab-Reihenfolge für Tastaturnutzer weiterhin logisch ist, besonders bei vertikalen Navigationen oder Formularen.

Bei rein dekorativen vertikalen Labels (writing-mode: vertical-rl) solltest du den Text trotzdem semantisch korrekt halten. Verwende keine leeren div-Elemente mit Hintergrundbildern von gedrehtem Text. Screenreader können echten Text vorlesen, Hintergrundbilder nicht.

Häufige Fehler

• direction in CSS statt dir im HTML setzen: direction: rtl ändert nur die visuelle Darstellung. Screenreader und Browser-Features wie die Textauswahl brauchen das HTML-Attribut dir="rtl" für korrekte RTL-Unterstützung.
• text-orientation ohne writing-mode: text-orientation hat nur im vertikalen Modus (vertical-rl oder vertical-lr) einen Effekt. Im horizontalen Modus wird die Eigenschaft ignoriert.
• Physische statt logische Properties verwenden: In RTL-Layouts ist margin-left plötzlich die falsche Seite. Verwende logische Properties wie margin-inline-start statt margin-left, damit dein Layout automatisch in beiden Richtungen funktioniert.
• Feste Breiten mit vertikalem Text: Bei writing-mode: vertical-rl wird die Blockrichtung horizontal. Eine feste width begrenzt dann die Anzahl der Textspalten statt der Zeilenlänge. Verwende stattdessen height oder logische Größen (block-size, inline-size).
• RTL-Layout nur visuell testen: Ein RTL-Layout sieht in CSS-Tests korrekt aus, funktioniert aber nicht richtig, wenn dir="rtl" im HTML fehlt. Formularfelder, Tabellen und interaktive Elemente brauchen das HTML-Attribut für korrektes Verhalten.

Browser-Kompatibilität

writing-mode, text-orientation und direction werden von allen modernen Browsern vollständig unterstützt. text-orientation: sideways wird von Firefox seit Version 44 und von Chrome seit Version 48 unterstützt.

Email-Kompatibilität

writing-mode und text-orientation werden in Emails kaum unterstützt. direction: rtl funktioniert in den meisten Clients, verwende aber das HTML-Attribut dir für bessere Kompatibilität.

Verwandte Eigenschaften