CSS direction-Eigenschaft
Die CSS-Eigenschaft direction legt die Schreibrichtung von Text fest. Sieh dir Beispiele an und probiere es selbst aus.
Die CSS-Eigenschaft direction legt die grundlegende Schreibrichtung von Text und Inline-Inhalten fest — entweder von links nach rechts (ltr, der Standardwert) oder von rechts nach links (rtl). Sie sorgt dafür, dass Rechts-nach-links-Schriften wie Arabisch, Hebräisch, Persisch und Urdu korrekt dargestellt werden.
Diese Seite erklärt, was direction steuert, wie es sich vom HTML-Attribut dir unterscheidet, wann man es wirklich braucht und welche Fallstricke es gibt.
Was direction beeinflusst
Das Setzen von direction auf einem Block-Level-Element ändert mehrere Dinge gleichzeitig:
- Die Basis-Textrichtung des Inhalts des Elements.
- Die Standardausrichtung von Text innerhalb dieses Elements (
rtlrichtet Text standardmäßig rechts aus,ltrlinks), sofern du sie nicht mittext-alignüberschreibst. - Die Reihenfolge, in der Tabellenzellen in einer Zeile fließen (bei
rtlzuerst von rechts). - Die Richtung von bidirektionalen Einbettungen, die zusammen mit der Eigenschaft
unicode-bidierstellt werden.
direction beeinflusst auch die Seite, auf der Listenpunkte, Scrollbalken und Überlauf erscheinen, da der Inline-Start des Elements wechselt.
direction vs. das HTML-Attribut dir
In realen Dokumenten wird die Richtung üblicherweise mit dem HTML-Attribut dir (<html dir="rtl">) statt mit der CSS-Eigenschaft gesetzt, da dir eine semantische Bedeutung trägt, auf die Hilfstechnologien und der Bidi-Algorithmus des Browsers angewiesen sind.
Die beiden sind nicht vollständig gleichwertig: Im Gegensatz zum HTML-Attribut dir wird die CSS-Eigenschaft direction nicht von Tabellenspalten in Tabellenzellen vererbt — Tabellenzellen befinden sich innerhalb von Zeilen, nicht Spalten, daher erbt eine Zelle ihre Richtung vom Tabellenelement selbst.
Für die Änderung der Reihenfolge im rein visuellen Layout (Flex-/Grid-Elemente, Margins, Padding) bevorzuge moderne logische Eigenschaften und writing-mode. Verwende direction speziell für die Leserichtung von Text. Siehe writing-mode.
| Anfangswert | ltr |
|---|---|
| Gilt für | Alle Elemente. |
| Vererbbar | Ja. |
| Animierbar | Diskret. |
| Version | CSS2 |
| DOM-Syntax | object.style.direction = "rtl"; |
Syntax
Syntax der CSS-Eigenschaft direction
direction: ltr | rtl | initial | inherit;Beispiel: Vergleich von ltr und rtl
Das <p>-Element behält die Standard-ltr-Richtung; das <div> wird auf rtl umgeschaltet, sodass sein Text am rechten Rand beginnt und nach links gelesen wird.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
direction: rtl;
}
</style>
</head>
<body>
<p>As you can see, this text is written with default direction.</p>
<div>However, this text is written from right to left as we defined.</div>
</body>
</html>Ergebnis
![CSS direction-Eigenschaft](https://api.w3docs.com/uploads/media/default/0001/03/576170a14b5c571d29380b8bdc5880bafac595b3.png "CSS direction property rtl example" =420x)
Im obigen Beispiel wird der Wert rtl verwendet, sodass der Text im <div> von rechts nach links fließt und standardmäßig rechts ausgerichtet ist.
Beispiel: Eine Rechts-nach-links-Liste und ein Zitat
Da direction den Inline-Start umkehrt, wechseln Listenmarkierungen und die standardmäßige Textausrichtung auf die rechte Seite — genau das, was man für ein arabisches oder hebräisches Snippet benötigt.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.rtl {
direction: rtl;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<ul class="rtl">
<li>First item</li>
<li>Second item</li>
</ul>
</body>
</html>Die Listenpunkte werden rechts dargestellt und der Text ist rechts ausgerichtet — ohne eine einzige text-align-Regel.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| ltr | Bedeutet, dass die Textrichtung von links nach rechts verläuft. Dies ist der Standardwert der Eigenschaft. | Ausprobieren » |
| rtl | Bedeutet, dass die Textrichtung von rechts nach links verläuft. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Häufige Fallstricke
directionallein hat keinen Einfluss auf die Reihenfolge von Inline-Boxen. Um gemischten links-nach-rechts und rechts-nach-links Text tatsächlich neu anzuordnen, benötigt man zusätzlichunicode-bidi(zum Beispielunicode-bidi: bidi-override).- Ausrichtung vs. Richtung.
rtländert die Standard-Ausrichtung, aber eine explizitetext-align-Regel hat Vorrang. Wenn Text nach dem Wechsel der Richtung auf die „falsche" Seite ausgerichtet ist, überprüfe, ob ein widersprüchlichestext-alignvorhanden ist. - Es wird vererbt. Setze
directioneinmal auf einem übergeordneten Container (oder über<html dir="rtl">) und der gesamte Teilbaum übernimmt es — mit Ausnahme von Tabellenzellen, wie oben erwähnt.
Verwandte Eigenschaften
unicode-bidi— Feinsteuerung über bidirektionalen Text.writing-mode— Vertikaler vs. horizontaler Fluss und Blockrichtung.text-align— Explizite horizontale Ausrichtung von Inline-Inhalten.