direction

Die CSS-Eigenschaft direction legt die Richtung des Inhaltsflusses innerhalb eines blockorientierten Elements fest. Dies gilt für Text, Inline- und Inline-Block-Elemente. Sie legt auch die Standardausrichtung von Text und die Richtung fest, in der Tabellenzellen innerhalb einer Tabellenzeile fließen.

.main-content {
  direction: rtl;  /* Right to Left */
}

Die gültigen Werte sind

• ltr – Links nach Rechts, der Standardwert
• rtl – Rechts nach Links
• inherit – erbt seinen Wert vom übergeordneten Element

Der Text auf dieser Seite ist in der Standardrichtung ltr eingestellt. Der häufigste Anwendungsfall für die Einstellung von rtl sind Webseiten mit hebräischem oder arabischem Text. Hier ist ein Beispiel für Arabisch in rtl:

طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد

Es gibt auch ein HTML-Attribut zur Einstellung der Richtung

<p dir="rtl">This paragraph goes from right to left.</p>

Sowohl die CSS-Eigenschaft als auch das HTML-Attribut werden die Richtung an absteigende Elemente weitergeben. Es wird empfohlen, das HTML-Attribut zu verwenden, da dies auch dann funktioniert, wenn CSS fehlschlägt oder die Seite aus irgendeinem Grund nicht beeinflusst.

Es gibt auch ein spezielles HTML-Tag, das zum Ändern der Textrichtung verwendet werden kann: das bidirektionale Überschreibungselement. Dies existiert, damit es ein semantikfreies Element gibt, das nur zu diesem Zweck verwendet werden kann. Zum Beispiel

<bdo dir="rtl">This text will go right to left.</bdo>

Um all dies mit CSS zu kombinieren...

*[dir="ltr"] { direction: ltr; unicode-bidi: embed; }

*[dir="rtl"] { direction: rtl; unicode-bidi: embed; }

bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override; }

bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override; }

„bidi“ = „bidirektional“

Beim Erstellen von Layouts in einer Welt vor Flexbox und Grid wählten die Leute oft zwischen Floats und Inline-Block, um Spalten zu erstellen. Ein Vorteil von Inline-Block ist, abgesehen davon, dass kein Float mehr geleert werden muss, dass das Ändern der Richtungseigenschaft auch das Layout umkehrt. Dies gilt nicht für Floats, die zurückgesetzt werden müssten, wenn eine Webseite mehrere Sprachen unterstützt und die Sprachrichtung von ltr auf rtl oder umgekehrt geändert wurde.

Wenn Sie die Richtung eines Inline-Elements ändern müssen (entgegen der Richtung seines übergeordneten Block-Elements), müssen Sie entweder das -Element verwenden oder sicherstellen, dass das Inline-Element die Eigenschaft unicode-bidi richtig setzt:

Some regular text <bdo dir="rtl">reverse direction</bdo> text text <span dir="rtl">reverse direction</span>

span[dir] {
  unicode-bidi: bidi-override;
}

Verwandte Eigenschaften

• unicode-bidi

Weitere Ressourcen

• W3C-Spezifikation
• MDN-Dokumentation
• W3C CSS vs. Markup für bidi-Unterstützung

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
2.0+	1.3+	Alle	9.2+	5.5+	Alle	3.1+