writing-mode

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.

Steckbrief writing-mode

Syntax: writing-mode: horizontal-tb | vertical-rl | vertical-lr
Initialwert: horizontal-tb
Vererbt: Ja
Animierbar: Nein

Kategorie: Typografie
Werte: 11
Beispiele: 4
Browser: 5 von 5
E-Mail: 1 von 5
Stand: 15.02.2026

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

11 Werte

writing-mode

Wert	Beschreibung	Beispiel
`horizontal-tb`	Standard: Text fließt horizontal, Zeilen von oben nach unten.	writing-mode: horizontal-tb
`vertical-rl`	Text fließt vertikal, Spalten von rechts nach links. Traditionell für CJK.	writing-mode: vertical-rl
`vertical-lr`	Text fließt vertikal, Spalten von links nach rechts.	writing-mode: vertical-lr
`inherit`	Erbt den Wert explizit vom Elternelement.	writing-mode: inherit

text-orientation

Wert	Beschreibung	Beispiel
`mixed`	CJK-Zeichen aufrecht, lateinische Zeichen gedreht. Standard im vertikalen Modus.	text-orientation: mixed
`upright`	Alle Zeichen werden aufrecht dargestellt.	text-orientation: upright
`sideways`	Alle Zeichen werden um 90 Grad gedreht.	text-orientation: sideways
`inherit`	Erbt den Wert explizit vom Elternelement.	text-orientation: inherit

direction

Wert	Beschreibung	Beispiel
`ltr`	Text fließt von links nach rechts. Standard für westliche Sprachen.	direction: ltr
`rtl`	Text fließt von rechts nach links. Für Arabisch, Hebräisch usw.	direction: rtl
`inherit`	Erbt den Wert explizit vom Elternelement.	direction: inherit

Beispiele

4 Beispiele

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.

writing-mode Werte im Vergleich

.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>

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.

Vertikale Labels an Cards

.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>

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

text-orientation Werte im Vergleich

.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>

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.

RTL-Layout für arabischen Text

/* 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

5 Fehler

01 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.

02 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.

03 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.

04 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).

05 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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

1 von 5

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.

Apple Mail

Komplett
Gmail

Teilweise

direction: rtl funktioniert mit dir-Attribut. writing-mode wird entfernt
Outlook

Teilweise

direction: rtl funktioniert. writing-mode und text-orientation nicht unterstützt
Thunderbird

Teilweise

direction funktioniert. writing-mode teilweise unterstützt
Yahoo Mail

Teilweise

direction: rtl mit dir-Attribut. writing-mode nicht unterstützt

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

writing-mode

Grundlagen

Syntax & Werte

writing-mode

text-orientation

direction

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter