CSS direction • Laufrichtung von Text: LTR RTL

CSS direction – Laufrichtung oder Schreibrichtung bei Text

CSS direction steuert die Laufrichtung oder Schreibrichtung von Texten (von links nach rechts oder von rechts nach links) und kann auf Texte, Anführungszeichen, Zeichenketten und auf die Reihenfolge von Spalten in Tabellen oder die Ausrichtung des Textes mit text-align angewendet werden.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

align:right vs direction rtl

Der vorgegebene Textfluss geht von links nach rechts für Sprachen wie Deutsch, Englisch und Französisch. Sprachen wie Chinesisch und Hebräisch laufen von rechts nach links.

Den Unterschied zur Eigenschaft text-align: right erkennt man am besten an der Zeichensetzung: Achten Sie darauf, wo der Punkt am Ende des Satzes sitzt! Bei der Eigenschaft text-align: right würde der Punkt auf der rechten Seite des Textes sitzen. Bei Sprachen, die von rechts nach links geschrieben werden, sitzt der Punkt auf der linken Seite, wenn die Eigenschaften direction: rtl und unicode-bidi notiert werden.

<div style="direction: rtl;">
    <p>Als es klingelte … .</p>
    <p>Doch dann sahn sie … .</p>
</div>

Als es klingelte nachts, es war kurz vor halb zehn,
wurde niemand erwartet und niemand gesehen.
Doch dann sahn sie auf einer Urne zuletzt
eine fremde Erscheinung und waren entsetzt.

dir-Attribut oder CSS direction?

Vorzugsweise wird die Laufrichtung des Textes durch das dir-Attribute im html- oder body-Tag gesetzt und nur in Ausnahmen durch CSS direction. Auch wenn der Text überwiegend von links nach rechts oder rechts nach links läuft und nur Ausnahmen in die andere Richtung laufen soll, ist das dir-Attribute die sicherere Variante. Sprache und Laufrichtung von Texten gehören nicht zur Darstellung oder Präsentation, sondern zur Struktur des Dokuments.

HTML-Attribut dir

Wir sagen שָׁלוֹם" zu unseren Gästen.

CSS direction

Wir sagen שָׁלוֹם" zu unseren Gästen.

CSS direction mit unicode-bidi

Wir sagen שָׁלוֹם" zu unseren Gästen.

Mit einem dir-Attribut kommt das Satzzeichen auf die linke Seite des Textes, mit CSS direction hingegen auf die rechte Seite. Erst mit einem zusätzlichen CSS unicode-bidi sitzt das Ausrufezeichen dann auf der linken Seite.

<p>Wir sagen <span lang="he" dir="rtl"> שָׁלוֹם"</span> zu unseren Gästen.</p>
<p>Wir sagen <span style="direction:rtl"> שָׁלוֹם"</span> zu unseren Gästen.</p>
<p>Wir sagen <span style="direction:rtl;unicode-bidi:embed"> שָׁלוֹם"</span> zu unseren Gästen.</p>

direction

Erblich: Ja

direction
ltr | rtl | inherit
ltr
setzt den Text von links nach rechts und ist die Vorgabe.
rtl
setzt den Text von rechts nach links.

CSS Laufrichtung von Texten ändern

Die CSS-Eigenschaft unicode-bidi (bi-directional) steuert die Richtung des Textes und wird zusammen mit direction benutzt, wenn innerhalb einer Webseite der Text in verschiedene Richtungen laufen soll (z.B. englischer und hebräischer Text).

Wenn direction auf einen Inlinetext angewendet werden soll, muss unicode-bidi entweder auf bidi-override oder eingebettete Werte gesetzt werden.

CSS unicode-bidi

Erblich: Nein

unicode-bidi
bidi-override | embed | normal | inherit

bidi-override überschreibt die Textrichtung in einem Inline- oder Blockelement, das nur Inlineelemente enthält.

embed wird benutzt, um bis zu 15 Inlineelemente in den Textfluss einzusetzen.

normal ist die Voreinstellung und erlaubt die Nutzung des bidirektionalen Algorithmus, der die Textrichtung steuert.