CSS Writing Modes — vertikale Layouts, CJK-Typografie und RTL/LTR

1. Writing Modes: mehr als nur vertikaler Text

CSS Writing Modes sind oft mit vertikaler Typografie gleichgesetzt — dabei beschreiben sie das fundamentale Koordinatensystem des CSS-Layout-Modells. Jedes Element hat eine Inline-Achse (die Richtung, in der Text fließt) und eine Block-Achse (die Richtung, in der Blöcke gestapelt werden). Für horizontales Westeuropäisch: Inline läuft von links nach rechts, Block läuft von oben nach unten. Für Japanisch vertikal von rechts: Inline läuft von oben nach unten, Block läuft von rechts nach links.

Das Verständnis dieser Achsen ist entscheidend für moderne CSS-Architekturen, weil alle Flexbox- und Grid-Konzepte (Hauptachse, Querachse, justify-content, align-items) ebenfalls auf der Inline/Block-Achse aufgebaut sind — nicht auf physischen Richtungen. Wenn sich der writing-mode ändert, drehen sich diese Achsen mit, und Flexbox/Grid-Layouts passen sich automatisch an. Das ist kein zufälliges Feature, sondern ein durchdachtes Design-Prinzip, das die Basis für echte Internationalisierung im Web bildet.

2. writing-mode — die vier Hauptwerte erklärt

Die CSS-Property writing-mode hat vier Hauptwerte. horizontal-tb ist der Standard für westliche Sprachen: Text fließt horizontal, Blöcke stapeln sich von oben nach unten. vertical-rl ist der traditionelle Wert für ostasiatische vertikale Texte: Text fließt von oben nach unten, Zeilen stapeln sich von rechts nach links — klassisch für japanische Literatur und traditionelle chinesische Schrift. vertical-lr ist das Spiegelbild: Text fließt von oben nach unten, Zeilen stapeln sich von links nach rechts — selten verwendet, aber z.B. in mongolischer Schrift und einigen technischen Diagrammen. Der vierte Wert sideways-rl und sideways-lr rotieren den gesamten Textblock um 90 Grad — nützlich für Tab-Labels und seitliche Navigationen.

Ein wichtiger technischer Aspekt: Wenn writing-mode auf vertical-rl oder vertical-lr gesetzt wird, wechseln auch width und height ihre logische Bedeutung. Was physisch als width definiert ist, wird zur Block-Dimension (die vertikale Ausdehnung des Texts), und height wird zur Inline-Dimension. Das ist einer der Gründe, warum logische Eigenschaften wie inline-size und block-size vorzuziehen sind: Sie bleiben relativ zur Schreibrichtung korrekt, unabhängig von writing-mode-Änderungen.

/* 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 — Zeichenausrichtung in vertikalen Layouts

Wenn writing-mode auf vertical-rl oder vertical-lr steht, stellt sich die Frage, wie einzelne Zeichen ausgerichtet werden. Die Property text-orientation steuert genau das. Der Wert mixed ist der Standard: CJK-Zeichen (Chinesisch, Japanisch, Koreanisch) werden aufrecht positioniert (stehen gerade), während lateinische Buchstaben um 90 Grad rotiert werden. Der Wert upright stellt alle Zeichen aufrecht — auch Buchstaben aus lateinischen Schriften werden aufrecht positioniert, was für dekorative Effekte oder bestimmte sprachliche Anforderungen nützlich ist. sideways rotiert alle Zeichen um 90 Grad, einschließlich CJK-Zeichen.

Für japanische Webprojekte ist das Zusammenspiel von writing-mode: vertical-rl und text-orientation: mixed der Standard. CJK-Zeichen, die naturgemäß für vertikales Lesen ausgelegt sind, werden aufrecht gestellt, während eingebettete englische Wörter oder Zahlen rotiert erscheinen — was dem natürlichen japanischen Lesegefühl entspricht. Für rein typografische Effekte in westlichen Sprachen (z.B. ein gedrehter Kapitelname in einem Buchdesign) ist text-orientation: sideways die passende Wahl, weil es alle Zeichen als zusammenhängende Einheit rotiert statt einzeln aufrechtzustellen.

4. CJK-Typografie: chinesisch, japanisch, koreanisch vertikal

Vertikale CJK-Typografie ist ein komplexes Gebiet, das über einfaches Setzen von writing-mode: vertical-rl hinausgeht. Traditionelles Japanisch verwendet vertikale Schrift mit Furigana-Rubytext (Aussprachehinweise über oder neben Kanji-Zeichen), Tate-Chu-Yoko (horizontale Einschübe in vertikalem Text für Zahlen oder Abkürzungen) und spezifische Zeichensatz-Anforderungen. CSS unterstützt diese Konzepte über die ruby-Elemente und das text-combine-upright-Property.

text-combine-upright (auch bekannt als Tate-Chu-Yoko) ermöglicht es, kurze Zeichenfolgen — typischerweise zwei- bis vierstellige Zahlen — in einem vertikalen Text-Kontext horizontal inline darzustellen. text-combine-upright: all wendet dies auf alle Zeichen eines Elements an, text-combine-upright: digits 2 speziell auf zwei aufeinanderfolgende Ziffern. Dieses Feature ist für professionelle japanische Webentwicklung unverzichtbar und wird in Chrome, Safari und Firefox unterstützt. Die Kombination aus writing-mode: vertical-rl, text-orientation: mixed und text-combine-upright bildet das vollständige CSS-System für japanische Vertikaltypografie.

/* 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年 → "20" combined, "24" combined, "年" 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. Logische CSS-Eigenschaften: das Ende von margin-left

Logische CSS-Eigenschaften sind das komplementäre System zu CSS Writing Modes. Statt margin-left und margin-right verwendet man margin-inline-start und margin-inline-end. Statt padding-top und padding-bottom verwendet man padding-block-start und padding-block-end. Diese Properties sind relativ zur aktuellen Inline- und Block-Achse, nicht zu physischen Richtungen. Wenn writing-mode oder direction wechselt, passen sich logische Properties automatisch an.

Die Kurzschreibweisen margin-inline, margin-block, padding-inline und padding-block erlauben das gleichzeitige Setzen beider Seiten einer Achse — ähnlich wie margin: 0 auto, aber achsen-relativ. Für zentrierte Layouts ist margin-inline: auto die logische Alternative zu margin-left: auto; margin-right: auto. Die Dimensionseigenschaften inline-size und block-size ersetzen width und height, und min-inline-size, max-inline-size, min-block-size, max-block-size ergänzen das System vollständig. Browser-Support ist in allen modernen Browsern gegeben.

6. RTL-Layouts: Arabisch und Hebräisch in CSS

Rechts-nach-links-Schriften wie Arabisch und Hebräisch erfordern nicht nur gespiegelten Text, sondern ein vollständig umgekehrtes Layout. Das HTML-Attribut dir="rtl" aktiviert die RTL-Textrichtung, die CSS-Property direction: rtl ergänzt das CSS-seitig. In RTL-Kontext läuft die Inline-Achse von rechts nach links, Block-Elemente stapeln sich weiterhin von oben nach unten. Alle logischen CSS-Eigenschaften passen sich automatisch an: margin-inline-start ist dann rechts, margin-inline-end ist links.

Für internationalisierte CSS-Architekturen gilt das Prinzip: Physische Eigenschaften (margin-left, padding-right, float: left, border-left) müssen für RTL-Sprachen explizit überschrieben werden. Logische Properties (margin-inline-start, padding-inline-end, float: inline-start, border-inline-start) funktionieren automatisch korrekt in beiden Richtungen. Das Umschreiben eines CSS-Frameworks von physischen auf logische Properties ist der größte Schritt zur echten Internationalisierbarkeit — und verringert gleichzeitig die Menge an RTL-Override-Styles erheblich.

7. Mehrsprachige Seiten: CSS-Architektur für globale Projekte

Eine mehrsprachige Seite, die LTR-Sprachen (Deutsch, Englisch, Japanisch vertikal) und RTL-Sprachen (Arabisch, Hebräisch) unterstützen soll, braucht eine durchdachte CSS-Architektur. Die Basis: Alle Layout-Properties konsequent als logische Eigenschaften definieren. Das :lang()-Pseudo-Klassen-Selektor erlaubt sprachspezifisches CSS ohne zusätzliche Klassen — :lang(ar) für Arabisch, :lang(ja) für Japanisch, :lang(he) für Hebräisch. Das HTML-lang-Attribut, korrekt gesetzt, aktiviert sowohl Browser-interne Lese-Heuristiken als auch die CSS-Selektor-Kaskade.

Ein wichtiger Aspekt für mehrsprachige CSS Writing Modes: Flexbox und Grid reagieren auf direction und writing-mode, aber nur wenn logische Properties verwendet werden. justify-content: flex-start bedeutet in RTL dann "rechts" — exakt das gewünschte Verhalten. Mit physischen Properties (text-align: left statt text-align: start) würde der Entwickler RTL-Override-Styles schreiben müssen. Das text-align: start-Wert ist der logische Pendant zu left/right und passt sich automatisch an.

/* 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. Physische vs. logische Eigenschaften im Vergleich

Die Entscheidung zwischen physischen und logischen CSS-Eigenschaften hat direkte Auswirkungen auf die Wartbarkeit internationalisierter Projekte. Mit physischen Properties entsteht zwangsläufig ein zweites Stylesheet oder eine Klassen-Schicht für RTL-Überschreibungen. Mit logischen Properties funktioniert dieselbe Regel in LTR und RTL korrekt, ohne Override.

9. Writing Modes für dekorative Typografie-Effekte

CSS Writing Modes werden nicht nur für Internationalisierung genutzt, sondern auch für dekorative Typografie-Effekte in westlichen Designs. Gedrehte Kapitelbezeichnungen in Buchdesigns, vertikale Tab-Labels, seitliche Statusbadges auf Produktkarten oder Wasserzeichen-ähnliche Hintergrundtexte — all das kann mit writing-mode: vertical-rl und text-orientation: sideways realisiert werden. Der Vorteil gegenüber transform: rotate(): Das Element nimmt im Dokumentfluss den Platz ein, den es in seiner rotatierten Form benötigt — kein Überlapp mit benachbarten Elementen.

Ein konkreter Anwendungsfall: Tabellenköpfe, die in einer kompakten Ansicht vertikal stehen sollen, um Spaltenplatz zu sparen. Statt schmalen Spalten mit abgeschnittenem Text setzt man writing-mode: vertical-rl; transform: rotate(180deg) auf die th-Elemente — die rotate(180deg)-Korrektur dreht die Leserichtung von unten-nach-oben zu oben-nach-unten. Das Ergebnis: kompakte Tabellen mit vollständigen, lesbaren Überschriften ohne Abkürzungen. Die Kombination aus writing-mode und transform für diesen Zweck ist etabliertes Best Practice für dichte Datentabellen.

10. Zusammenfassung

CSS Writing Modes definieren das Koordinatensystem, auf dem das gesamte CSS-Box-Modell und Flexbox/Grid aufgebaut sind. Das Verständnis von Inline-Achse und Block-Achse ist die Voraussetzung für korrekte Internationalisierung: Wenn writing-mode oder direction wechselt, drehen sich diese Achsen mit — und alle logischen Properties passen sich automatisch an. text-orientation: mixed ist der Standard für CJK-Vertikaltypografie, text-combine-upright ermöglicht Tate-Chu-Yoko für Zahlen in japanischen Texten. Logische Eigenschaften wie margin-inline-start, padding-block, inline-size und text-align: start ersetzen physische Properties und machen CSS RTL-sicher ohne Override-Styles.

Für internationale Webprojekte ist der Wechsel von physischen zu logischen Properties die wichtigste Investition. Ein CSS-System, das von Anfang an logische Properties verwendet, braucht für RTL-Support nur dir="rtl" im HTML und ein Schrift-Override im CSS — keine zweite Stylesheet-Ebene, keine [dir="rtl"] .element { margin-left: 0; margin-right: 1rem; }-Override-Flut. CSS Writing Modes in Kombination mit logischen Properties bilden das vollständige, wartbare Fundament für globale Webprojekte.

11. FAQ: CSS Writing Modes