CSS Logical Properties für RTL-Layouts und Internationalisierung

1. Das Problem mit physischen CSS-Eigenschaften

CSS wurde ursprünglich für westliche, von links nach rechts verlaufende Schreibsysteme (LTR) entworfen. Eigenschaften wie margin-left, padding-right, border-top und left beziehen sich auf physische Richtungen im Viewport – unabhängig davon, in welche Richtung der Text fließt. Sobald eine Website auch in Arabisch, Hebräisch, Farsi oder Urdu verfügbar sein soll, muss das gesamte Layout für RTL gespiegelt werden. Traditionell geschah das durch dupliziertes CSS mit [dir="rtl"]-Selektoren: jede physische Eigenschaft wurde für RTL mit einer gespiegelten Variante überschrieben. Das erzeugte doppelt so viel CSS, war fehleranfällig und schwer zu warten.

CSS Logical Properties lösen dieses Problem fundamental. Anstatt physische Richtungen (links, rechts, oben, unten) zu beschreiben, beschreiben logische Eigenschaften Richtungen relativ zur Textflussrichtung: "Anfang der Zeile", "Ende der Zeile", "Anfang des Blocks" und "Ende des Blocks". In einem LTR-Kontext entspricht "Anfang der Zeile" links und "Ende der Zeile" rechts. In einem RTL-Kontext ist es umgekehrt – ohne dass eine einzige CSS-Regel geändert werden muss.

Das Konzept wurde in der CSS-Spezifikation als CSS Logical Properties and Values Level 1 formalisiert und ist heute in allen modernen Browsern verfügbar. Die Adoption erfolgt schrittweise, weil viele bestehende Codebases physische Eigenschaften verwenden. Für neue Projekte ist der Einsatz von CSS Logical Properties von Anfang an empfohlen – nicht nur für RTL, sondern auch für vertikale Schreibmodi wie in japanischen oder chinesischen Layouts.

2. Inline- und Block-Achsen: das neue Koordinatensystem

Das Herzstück von CSS Logical Properties ist das neue Achsenmodell. Die "inline axis" läuft in Textflussrichtung: in LTR von links nach rechts, in RTL von rechts nach links, in vertikalem Text von oben nach unten. Die "block axis" läuft senkrecht zur Textflussrichtung: in horizontalem Text von oben nach unten, in vertikalem Text von rechts nach links oder von links nach rechts, je nach writing-mode.

Innerhalb dieser Achsen gibt es je zwei Endpunkte: "inline-start" und "inline-end" entlang der Inline-Achse, "block-start" und "block-end" entlang der Block-Achse. Diese vier logischen Richtungen ersetzen die vier physischen Richtungen "left", "right", "top" und "bottom". Das bedeutet: margin-inline-start entspricht in LTR margin-left, in RTL margin-right. Diese automatische Anpassung ist das Kernversprechen von CSS Logical Properties.

Zusätzlich zu den Start- und Endvarianten gibt es Kurzformen: margin-inline setzt beide Inline-Seiten gleichzeitig (wie margin-left und margin-right zusammen), und margin-block setzt beide Block-Seiten (wie margin-top und margin-bottom). Diese Kurzformen sind besonders nützlich für das häufige Muster, horizontale und vertikale Abstände getrennt zu definieren.

3. margin-inline und margin-block

Die CSS Logical Property margin-inline ist wahrscheinlich die am häufigsten verwendete logische Eigenschaft im Alltag. Das Pattern margin-inline: auto zentriert ein Block-Element horizontal – unabhängig von der Schreibrichtung. Es entspricht margin-left: auto; margin-right: auto, aber ist kürzer und schreibrichtungsunabhängig. In einem RTL-Kontext hat margin-inline: auto genau dasselbe Ergebnis: das Element wird in der Mitte der verfügbaren Breite positioniert.

margin-inline-start und margin-inline-end ersetzen margin-left und margin-right in ihrer richtungsabhängigen Bedeutung. Typisches Beispiel: Ein Icon vor einem Label bekommt margin-inline-end: 0.5rem. In LTR ist das margin-right, in RTL automatisch margin-left. Das Icon bleibt immer zwischen dem "Anfang" des Labels und dem Label-Text selbst – unabhängig von der Sprache.

/* CSS Logical Properties: margin equivalents */

/* Centering: margin-inline: auto replaces margin: 0 auto */
.container {
  width: min(100%, 1200px);
  margin-inline: auto; /* works for both LTR and RTL */
}

/* Icon spacing: always between icon and text, not "on the right" */
.icon-label .icon {
  margin-inline-end: 0.5rem; /* LTR: margin-right | RTL: margin-left */
}

/* Indented list: start-aligned indent */
.nested-list {
  margin-inline-start: 1.5rem; /* LTR: margin-left | RTL: margin-right */
  padding-inline-start: 0;
}

/* Vertical rhythm: block direction only */
.section {
  margin-block: 3rem; /* LTR: margin-top + margin-bottom */
  margin-block-start: 4rem; /* override top/start specifically */
}

/* Shorthand: sets both inline values */
.aside {
  margin-inline: 2rem 0; /* inline-start: 2rem, inline-end: 0 */
}

4. padding-inline und padding-block

CSS Logical Properties für Padding folgen demselben Muster wie Margins. padding-inline setzt horizontales Padding (in LTR), padding-block setzt vertikales Padding. Das wichtigste Einzelmuster ist padding-inline: 1.5rem für horizontalen Innenabstand in Cards, Buttons und Containern – kürzer als padding-left: 1.5rem; padding-right: 1.5rem und automatisch RTL-kompatibel.

Für Buttons ist das Muster besonders elegant: padding-block: 0.5rem; padding-inline: 1rem setzt vertikales und horizontales Padding getrennt, ohne Abkürzungs-Reihenfolge zu verwenden (padding: 0.5rem 1rem würde dasselbe tun, aber in physischer Notation). Der Vorteil der logischen Kurzformen wird deutlich, wenn man Teile separat überschreiben muss: padding-inline-start überschreibt nur die Startseite, ohne die anderen drei Seiten zu berühren.

Ein häufig übersehener Anwendungsfall: padding-block-start für Abstände am Beginn eines Abschnitts in vertikalem Text. In japanischen Layouts mit writing-mode: vertical-rl entspricht block-start nicht oben, sondern rechts. CSS Logical Properties machen dieselbe Deklaration in horizontalem und vertikalem Kontext korrekt – ohne dass man die Eigenschaften für jeden Schreibmodus neu schreiben muss.

5. inset-inline und inset-block für Positionierung

Positionierungseigenschaften wie top, right, bottom und left haben logische Entsprechungen in den CSS Logical Properties: inset-block-start (= top), inset-block-end (= bottom), inset-inline-start (= left in LTR, right in RTL) und inset-inline-end (= right in LTR, left in RTL). Die Kurzform inset entspricht der Kurzform top right bottom left und setzt alle vier Seiten gleichzeitig.

Ein häufiges Muster: Ein Overlay oder eine Sticky-Sidebar, die immer an der "Start-Seite" des Layouts angedockt ist. Mit physischen Eigenschaften: position: sticky; left: 0 – funktioniert nur in LTR. Mit CSS Logical Properties: position: sticky; inset-inline-start: 0 – funktioniert in LTR und RTL automatisch. Dasselbe gilt für Badges, Labels und andere positionierte Elemente, die an eine Ecke eines Containers angedockt sind.

/* CSS Logical Properties: positioning and inset */

/* Sticky sidebar: always on the "start" side */
.sidebar {
  position: sticky;
  inset-block-start: 1rem; /* top: 1rem in horizontal writing */
  inset-inline-start: 0;   /* left: 0 in LTR, right: 0 in RTL */
  height: fit-content;
}

/* Absolute badge: top-right corner in LTR, top-left in RTL */
.card {
  position: relative;
}
.card .badge {
  position: absolute;
  inset-block-start: 0.5rem;   /* top */
  inset-inline-end: 0.5rem;    /* right in LTR, left in RTL */
}

/* Full overlay using inset shorthand */
.overlay {
  position: fixed;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0 */
  background: rgba(0, 0, 0, 0.5);
}

/* Tooltip: appears at the end of inline direction */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0; /* aligns with text start */
}

6. border-inline und logische Rahmen

CSS Logical Properties für Borders ermöglichen richtungsunabhängige Trennlinien. border-inline-start erzeugt eine Linie am "Anfang" der Inline-Richtung – in LTR links, in RTL rechts. Das klassische Anwendungsbeispiel ist ein Blockquote mit linker Randlinie: In einem LTR-Layout bekommt das Zitat border-inline-start: 4px solid #c4b5fd. In einem RTL-Kontext erscheint die Linie automatisch auf der rechten Seite – was die korrekte visuell-semantische Position für ein Zitat in RTL-Sprachen ist.

Die Shorthand-Eigenschaften border-inline und border-block setzen beide Seiten der jeweiligen Achse gleichzeitig. border-block: 1px solid #e2e8f0 ist äquivalent zu border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0 – kürzer und schreibrichtungsunabhängig. Für horizontale Trennlinien in Cards und Sektionen ist das das modernste CSS-Muster.

7. writing-mode und text-orientation

Die CSS-Eigenschaft writing-mode steuert, in welcher Richtung Textzeilen verlaufen und in welche Richtung Block-Elemente gestapelt werden. Der Standardwert horizontal-tb ist das bekannte horizontale, von oben nach unten verlaufende Layout westlicher Schriften. Mit writing-mode: vertical-rl verlaufen Textzeilen vertikal von oben nach unten und neue Zeilen werden von rechts nach links angeordnet – der Standard für japanischen und chinesischen Textsatz. Mit vertical-lr erfolgt die Zeilenfolge von links nach rechts.

CSS Logical Properties interagieren direkt mit writing-mode: In einem Element mit writing-mode: vertical-rl entspricht margin-inline-start dem physischen margin-top, weil die Inline-Achse nun vertikal verläuft. Das ist genau der Punkt, der rein physische CSS-Eigenschaften in solchen Kontexten unbrauchbar macht. Mit logischen Eigenschaften bleibt ein Button oder eine Card korrekt gestylt, egal ob der writing-mode des Elterncontainers horizontal oder vertikal ist.

Die Eigenschaft text-orientation steuert in vertikalem Text, wie einzelne Zeichen ausgerichtet werden. text-orientation: mixed dreht lateinische Zeichen auf die Seite und lässt CJK-Zeichen aufrecht stehen – das Standardverhalten für gemischten Text. text-orientation: upright hält alle Zeichen aufrecht. text-orientation: sideways dreht alles seitwärts. Diese Eigenschaft ist relevant für internationale Typografie und UI-Elemente wie vertikale Tabs oder Seitennavigationen.

8. Physisch vs. logisch im direkten Vergleich

Die folgende Tabelle zeigt die direkten Entsprechungen zwischen physischen und logischen CSS Logical Properties für das LTR-Standardlayout. In RTL-Kontexten sind "start" und "end" jeweils gespiegelt.

Für rein dekorative physische Eigenschaften – etwa ein Top-Border als Designelement, der bewusst immer oben erscheinen soll – ist die physische Variante weiterhin korrekt. CSS Logical Properties sind kein Dogma: Sie sind das richtige Werkzeug für richtungsabhängige Abstände und Positionierungen, aber nicht notwendig für Eigenschaften, bei denen die physische Richtung semantisch gemeint ist.

9. Migration und progressive Enhancement

Die Migration von physischen zu logischen CSS Logical Properties kann schrittweise erfolgen. Eine einfache Strategie: neue Komponenten konsequent mit logischen Eigenschaften entwickeln, bestehende Komponenten bei Gelegenheit migrieren. Die Browser-Unterstützung ist inzwischen so breit, dass kein Fallback nötig ist. Für Teams, die IE11 nicht mehr unterstützen, gibt es keine technischen Hindernisse.

Ein praktischer Migrationsansatz: Suche nach margin-left, margin-right, padding-left, padding-right, border-left, border-right, left: und right: im Stylesheet. Jeder Fund ist ein Kandidat für eine logische Entsprechung – außer wenn die physische Richtung semantisch explizit gewollt ist. Für Tailwind-CSS-Projekte: Tailwind v3.3 hat logische Utilities wie ms-4 (margin-inline-start) und pe-2 (padding-inline-end) eingeführt. Tailwind v4 baut Logical Properties tiefer in das Utility-System ein.

/* CSS Logical Properties: migration and RTL example */

/* Before: physical, breaks in RTL */
.card {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-left: 4px solid #7c3aed;
  margin-left: auto;
  margin-right: auto;
}

/* After: logical, works in LTR and RTL */
.card {
  padding-inline: 1.5rem;
  border-inline-start: 4px solid #7c3aed;
  margin-inline: auto;
}

/* RTL layout: same CSS, mirrored result */
[dir="rtl"] .card {
  /* No overrides needed — logical properties handle it */
}

/* Vertical writing mode: same logical properties work */
.vertical-text {
  writing-mode: vertical-rl;
  padding-inline: 0.75rem;  /* now top and bottom in visual terms */
  padding-block: 1.5rem;    /* now left and right in visual terms */
  margin-inline-start: 1rem; /* top in visual terms */
}

10. Zusammenfassung

CSS Logical Properties ersetzen physische Richtungsangaben durch schreibrichtungsunabhängige Werte, die auf den Inline- und Block-Achsen basieren. Das Ergebnis: ein einziges Stylesheet funktioniert korrekt für LTR-Sprachen wie Deutsch, RTL-Sprachen wie Arabisch oder Hebräisch und vertikale Schreibmodi wie im Japanischen. margin-inline, padding-block, inset-inline-start und border-inline-start sind die wichtigsten logischen Kurzformen für den Alltag.

Die Migration ist schrittweise möglich: Neue Komponenten sofort mit logischen Eigenschaften entwickeln, bestehende bei Überarbeitungen migrieren. Browser-Unterstützung ist seit 2022 flächendeckend vorhanden. Für Teams mit internationalen Produkten ist die Frage nicht "ob", sondern "wann" sie von physischen zu logischen Eigenschaften wechseln – und der ideale Zeitpunkt ist immer beim nächsten Refactoring.

11. FAQ: CSS Logical Properties