Verwende HTML dir, um die grundlegende Textrichtung festzulegen, und CSS flex-direction: row-reverse, um den Fluss einer Flex-Zeile umzukehren. Wenn du Karten auf einer öffentlichen Seite von deinem Mac aus anordnest, entscheide zuerst, ob du die Textrichtung, die Reihenfolge der Elemente oder die Ausrichtung ändern musst.

In dieser Anleitung wird davon ausgegangen, dass du das HTML und CSS einer Seite in einem Texteditor bearbeitest und sie in einem Desktopbrowser in der Vorschau ansiehst. Die Aufgabe besteht darin, drei neutrale Kacheln – Alpha, Beta und Gamma – anzuordnen und dabei das Textverhalten und die Dokumentreihenfolge bewusst festzulegen.

Was ändert die jeweilige Richtungseinstellung tatsächlich?

Das HTML-Attribut dir beschreibt die grundlegende Richtung des Texts eines Elements. Seine expliziten Werte sind ltr und rtl; mit auto wird der Browser angewiesen, die Richtung anhand des Inhalts zu bestimmen. WHATWG empfiehlt Autoren, die Textrichtung über HTML anzugeben, damit diese Information auch ohne CSS verfügbar bleibt. HTML-Standard: Das Attribut dir.

CSS direction steuert ebenfalls die grundlegende Textrichtung und wirkt sich auf das Layoutverhalten aus. Die Eigenschaft wird vererbt, sodass direction: rtl auf einem Container seine Nachfahren beeinflussen kann. MDN empfiehlt, nach Möglichkeit HTML dir zu verwenden. Betrachte eine CSS-Richtungsüberschreibung als bewusste Entscheidung über die Textrichtung und nicht als bequeme Möglichkeit, Kästchen zu verschieben. MDN: direction.

CSS flex-direction steuert die Hauptachse eines Flex-Containers. Ein row folgt der Inline-Achse des aktuellen Schreibmodus; row-reverse vertauscht die Richtungen von Hauptanfang und Hauptende. Dadurch wird die Richtung geändert, in der die Elemente angeordnet werden, während ihre Reihenfolge im Quelltext erhalten bleibt. W3C: Flussrichtung von Flex-Elementen.

Diese Mechanismen wirken zusammen. Bei horizontaler Schreibrichtung beginnt eine Flex-Zeile mit ltr links, während eine Flex-Zeile mit rtl rechts beginnt. row-reverse kehrt die jeweilige Startposition um. Daher bedeutet row-reverse nicht immer, dass das erste Element rechts erscheint. MDN: flex-direction.

Welche Einstellung entspricht dem gewünschten Ergebnis?

Halte vor der Bearbeitung das gewünschte Ergebnis konkret fest: „Die englischen Beschriftungen sollen unverändert bleiben, die Kacheln sollen in umgekehrter visueller Reihenfolge erscheinen und die Gruppe soll rechts stehen.“ Diese Aussage benennt getrennte Entscheidungen zu Text, Elementfluss und Ausrichtung.

Gewünschtes Ergebnis Geeigneter Ausgangspunkt Was zu prüfen ist
Die grundlegende Textrichtung des Inhalts festlegen HTML dir="ltr" oder dir="rtl" Auf den Bereich anwenden, dessen Text diese Richtung benötigt.
Den visuellen Verlauf aller Elemente in einer Flex-Zeile umkehren flex-direction: row-reverse Zuerst die vorhandene Richtung des Containers prüfen.
Eine unveränderte Zeile zum Hauptende hin verschieben justify-content: flex-end Sicherstellen, dass freier Platz für die Ausrichtung vorhanden ist.
Die inhaltlich maßgebliche Reihenfolge überall ändern Quellelemente neu anordnen Prüfen, ob die resultierende Lesereihenfolge sinnvoll ist.
Ausgewählte Elemente visuell neu positionieren Einzelne Werte von order Den Unterschied zwischen visueller Reihenfolge und Quellreihenfolge prüfen.

Der Unterschied zwischen Umkehrung und Ausrichtung ist wichtig. Mit einer Flex-Zeile ltr kann justify-content: flex-end die Kacheln Alpha, Beta und Gamma gemeinsam rechts platzieren, ohne ihre Reihenfolge umzukehren. Die Ausrichtung verteilt den verfügbaren Platz entlang der Hauptachse; flex-end bezeichnet die Hauptendseite des Flex-Containers. Die Wirkung kann entfallen, wenn flexible Elemente diesen Platz verbrauchen. MDN: justify-content.

Wenn Leser eine bestimmte Reihenfolge einhalten müssen, lege diese Reihenfolge im Dokument selbst fest. Das W3C warnt ausdrücklich davor, Flex-Umkehrung oder order zu verwenden, um eine falsche Quellreihenfolge auszugleichen. W3C: Reihenfolge und Ausrichtung.

Die vier Kombinationen vor einer Änderung der Seite vorhersagen

Der folgende Vergleich ergibt sich aus den dokumentierten Achsenregeln. Er setzt writing-mode: horizontal-tb, eine Flex-Zeile, gleiche Werte für order und die Quellreihenfolge Alpha, Beta, Gamma voraus. „Erscheinungsbild von links nach rechts“ beschreibt die physische Position der Kacheln auf dem Bildschirm.

Containerrichtung Flex-Richtung Erstes Element beginnt bei Erscheinungsbild von links nach rechts
ltr row Links Alpha, Beta, Gamma
ltr row-reverse Rechts Gamma, Beta, Alpha
rtl row Rechts Gamma, Beta, Alpha
rtl row-reverse Links Alpha, Beta, Gamma

Die zweite und dritte Zeile können gleich aussehen, wenn der Inhalt aus einfachen Rechtecken besteht. Ihre Textrichtungseinstellungen unterscheiden sich jedoch. Die vierte Kombination erklärt eine häufige Überraschung: Werden sowohl rtl als auch row-reverse angewendet, verläuft die Elementanordnung von links nach rechts. MDN dokumentiert dieses richtungsabhängige Verhalten. MDN: flex-direction.

Die grundlegende Textrichtung beeinflusst außerdem Satzzeichen und die Reihenfolge gerichteter Textabschnitte. rtl kehrt nicht einfach jedes Zeichen eines englischen Wortes um. Eine Beschriftung kann weiterhin erkennbar sein, während Satzzeichen an unerwarteter Stelle erscheinen. Neutrale Kacheln eignen sich daher zur Untersuchung der Positionierung von Boxen, reichen aber nicht aus, um das Textverhalten zu beurteilen. MDN: Hinweise zur Verwendung von dir.

Eine vollständige Vergleichsseite auf deinem Mac ausprobieren

Speichere das folgende vollständige Dokument mit einem Nur-Text-Editor als direction-demo.html und öffne die Datei anschließend in deinem Browser. Es verwendet synthetische Beschriftungen und CSS-Rechtecke, ganz ohne externe Abhängigkeiten. Die erwarteten Ergebnisse ergeben sich aus den dokumentierten Regeln; das Beispiel wird nicht als browsergetestetes Ergebnis dargestellt.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Direction and flex comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      margin: 24px;
      color: #202020;
      background: #fff;
    }
    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      writing-mode: horizontal-tb;
      justify-content: flex-start;
      gap: 12px;
      max-width: 448px;
      padding: 12px;
      border: 1px solid #777;
      margin-bottom: 20px;
    }
    .reverse { flex-direction: row-reverse; }
    .tile {
      flex: 0 0 64px;
      padding: 16px 0;
      text-align: center;
      background: #e2ecf4;
    }
  </style>
</head>
<body>
  <h1>Direction and flex comparison</h1>
  <p>LTR with row</p>
  <div class="row" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>LTR with row-reverse</p>
  <div class="row reverse" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row</p>
  <div class="row" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row-reverse</p>
  <div class="row reverse" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
</body>
</html>

Vergleiche die vier Zeilen mit der Vorhersagetabelle. Alle vier enthalten dieselbe Quellreihenfolge. Nur die Containerrichtung und die Klasse für die Umkehrung unterscheiden sich. Der explizite horizontale Schreibmodus beschränkt diese Demonstration auf den üblichen horizontalen Desktop-Fall.

Ändere als Nächstes nur justify-content: flex-start in justify-content: flex-end, speichere die Datei und lade sie neu. Die Gruppen sollten sich zu den jeweils gegenüberliegenden Enden der Hauptachse bewegen, während die Elementanordnung jeder Zeile erhalten bleibt. So lassen sich Positionierung und Umkehrung voneinander unterscheiden, ohne eine weitere Einstellung der Textrichtung einzuführen. MDN: justify-content.

Stelle abschließend die Ausrichtung wieder her und füge in jeder Zeile hinter Alpha einen Punkt ein. Vergleiche neben den Kachelpositionen auch die Satzzeichen. Dies ist ein Beispieltest für die Textrichtung, keine Empfehlung, gewöhnlichen englischen Beschriftungen rtl zuzuweisen. MDNs Erläuterung der grundlegenden Richtung erklärt, warum Satzzeichen am Textanfang oder -ende gesondert geprüft werden sollten. MDN: dir.

Unerwartete Ergebnisse im tatsächlichen Layout diagnostizieren

Bestätigen, dass der übergeordnete Container ein Flex-Container ist

Prüfe das Element, das die Kacheln enthält. flex-direction wird angewendet, wenn sein display auf flex oder inline-flex gesetzt ist. Eine Deklaration auf einem gewöhnlichen Block-Container erzeugt kein Flex-Layout. Prüfe außerdem, ob eine spätere Regel den wirksamen Wert bei der aktuellen Fensterbreite des Browsers ändert. MDN: Beschreibung von flex-direction.

Die geerbte Richtung prüfen, bevor eine weitere Umkehrung hinzugefügt wird

Untersuche den Container und seine Vorfahren auf dir und prüfe anschließend CSS-Deklarationen für direction. Wenn dir fehlt, wird die Richtung im Allgemeinen vom übergeordneten Element geerbt; das Weglassen fordert keine automatische Erkennung an. Beginnt die Quellreihenfolge unerwartet rechts, kann die geerbte Richtung die Ursache sein. MDN: Vererbung von dir.

Verwende dir="auto" nicht als Layout-Umschalter. WHATWG definiert die Eigenschaft anhand einer richtungsbezogenen Erkennung des Inhalts, die hauptsächlich das erste Zeichen mit starker Richtungswirkung berücksichtigt, und empfiehlt, sie Text mit tatsächlich unbekannter Richtung vorzubehalten. Eine Layoutanforderung sollte nicht davon abhängen, welche Beschriftung zufällig zuerst erscheint. HTML-Standard: Das Attribut dir.

Umkehrung der Elemente von der Umkehrung der Zeilen unterscheiden

Wenn das Problem erst nach dem Verkleinern des Fensters auftritt, prüfe den Zeilenumbruch. row-reverse ändert den Verlauf entlang der Hauptachse; wrap-reverse ändert die Richtung, in der Flex-Zeilen gestapelt werden. Der Standardwert nowrap belässt es bei einer einzelnen Zeile und kann einen Überlauf zulassen. Das sind getrennte Steuerelemente. Teste daher neben der anfänglichen Desktopbreite auch ein schmales Fenster. MDN: flex-wrap.

Nach Regeln für die Reihenfolge einzelner Elemente suchen

Prüfe, ob eine Kachel einen Wert für order hat. Das Flex-Layout gruppiert Elemente anhand dieses ganzzahligen Werts, beginnend mit dem niedrigsten, und erhält innerhalb von Gruppen mit gleichem Wert die Quellreihenfolge bei. Eine Umkehrung ändert dann die Richtung, aus der diese resultierende Reihenfolge angeordnet wird. Setze unerwartete Reihenfolgen auf Elementebene zurück, bevor du entscheidest, dass die Containerrichtung falsch ist. MDN: Flex-Elemente anordnen.

Die Lesereihenfolge prüfen, bevor du die Änderung beibehältst

Bei neutralen dekorativen Kacheln kann die visuelle Umkehrung die gesamte Anforderung sein. Prüfe bei Links oder Bedienelementen die Reihenfolge im Quelltext und folge der Tastaturfokussierung durch die Komponente. Die Flex-Umkehrung selbst ändert weder die sequenzielle Navigation noch die Sprachausgabe-Reihenfolge. Eine visuell umgekehrte Gruppe kann daher ihre ursprüngliche Interaktionsreihenfolge behalten. W3C: Flussrichtung von Flex-Elementen.

Mit dieser Prüfung kannst du entscheiden, ob sich der Quelltext ändern sollte. Wenn Gamma, Beta, Alpha die beabsichtigte inhaltlich maßgebliche Reihenfolge ist, ordne die Elemente in dieser Reihenfolge an. Wenn Alpha, Beta, Gamma die richtige Lesereihenfolge bleibt und nur die Darstellung umgekehrt werden soll, bewerte die visuelle Anordnung unter Berücksichtigung dieses Unterschieds. MDN zeigt das Verhalten der Quellreihenfolge anhand fokussierbarer Links. MDN: Flex-Elemente anordnen.

Wähle den Mechanismus nach der Anforderung: HTML dir für die grundlegende Textrichtung, flex-direction für den Fluss entlang der Flex-Achse und Ausrichtung für die Positionierung einer unveränderten Reihenfolge. Vergleiche vor dem Beibehalten des Ergebnisses Kachelpositionen, Satzzeichen, Zeilenumbrüche und Quellreihenfolge getrennt. So kannst du ein Layout, das lediglich umgekehrt aussieht, systematisch richtig einordnen.

Quellen