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 oder arabischer Text).
Wenn direction auf einen Inlinetext angewendet werden soll, muss unicode-bidi entweder auf bidi-override oder eingebettete Werte gesetzt werden.
CSS unicode-bidi
unicode-bidi steuert zusammen mit dem HTML-Attribut direction mehrsprachige Texte, die von rechts nach links geschrieben werden, wenn dort Textelemente von links nach rechts vorkommen.
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.
