Textrichtung in CSS mit direction ändern

Es gibt Sprachen auf der Welt, in denen die Texte nicht von links nach rechts geschrieben werden, sondern von rechts nach links. Das ist beispielsweise bei arabischen oder hebräischen Texten der Fall. Bei der Entwicklung von Websites hat man mehrere Möglichkeiten, die Textrichtung vorzugeben. Neben dem HTML-Attribut dir und dem BDO-Tag kann man hierfür auch die CSS-Eigenschaft direction mit und ohne unicode-bidi verwenden.

Textrichtung ltr und rtl

Attribut dir und der BDO-Tag

In HTML5 kann man jedem Element das Attribut dir zuweisen, um die Textrichtung vorzugeben. Vor HTML5 gab es einige Ausnahmen. Als Werte hat man die Möglichkeit, ltr (left to right) oder rtl (right to left) zu wählen. Ein Beispielcode.

<html dir="ltr">

Daneben gibt es auch den BDO-Tag (bidirectional override element), mit dem die Textrichtung gewisser Bereiche umgestellt werden kann. Dabei wird der BDO-Tag mit dem Attribut dir kombiniert. Ein Beispielcode.

<p>Text im Absatz <bdo dir="rtl">mit umgekehrter Textrichtung</bdo></p>

Textrichtung mit CSS ändern

Wenn man die Textrichtung mit CSS ändern möchte, kann man die Eigenschaft direction verwenden. Hierbei sind die folgenden Werte möglich.

  • ltr (links nach rechts)
  • rtl (rechts nach links)
  • inherit (Geerbt vom Elternelement)

Die Syntax ist anhand eines Beispiels nachfolgend abgebildet.

CSS-Code für direction

Auswirkung der CSS-Eigenschaft direction

Der Effekt der Eigenschaft direction ist im Grunde wie beim Attribut dir, das man den HTML-Tags zuweisen kann. Nachfolgend sind zwei Beispiele mit der Eigenschaft direction für die Textrichtungen ltr und rtl.

.selektor1 {
direction: ltr;
}

.selektor2 {
direction: rtl;
}
<p class="selektor1">Text im Absatz.</p>

<p class="selektor2">Text im Absatz.</p>
<p class="selektor2"><bdo>Text im Absatz.</bdo></p>

Die Darstellung im Browser ist wie folgt abgebildet. Den Unterschied von ltr und rtl erkennt man an dem Punkt am Ende des Absatzes. Bei rtl ist der Punkt links vom Satz angeordnet, so wie das bei Schriften üblich ist, die von rechts nach links geschrieben werden. Die Wörter werden jedoch so dargestellt, wie man es geschrieben hat. Erst wenn man den Absatz innerhalb des BDO-Tags einfügt, ist auch die Richtung der Wörter umgedreht.

Beispiel direction ltr und rtl

Auswirkung der CSS-Eigenschaft unicode-bidi

Statt den Textfluss der Wörter mit dem BDO-Tag umzudrehen, kann man auch auf eine Lösung zugreifen, die CSS bietet, und zwar automatisch, wenn es die Sprache erfordert. Hierfür wird zusätzlich zur Eigenschaft direction die Eigenschaft unicode-bidi verwendet. Dabei kann man die folgenden Werte verwenden.

  • normal (Standardwert, es wird kein Element mit geänderter Schreibrichtung eröffnet)
  • embed (Es wird ein neues Element eröffnet und die Schreibrichtung ist gemäß der Richtung, die im Unicode verankert ist)
  • bidi-override (Es wird ein neues Element eröffnet und die Schreibrichtung richtet sich nach dem Wert von direction)
  • initial (Setzt auf den Standardwert)
  • inherit (Geerbt vom Elternelement)

Nachfolgend ist ein Beispielcode, aus dem der Effekt von embed und bidi-override ersichtlich ist. Im Quellcode ist jeweils ein kleiner Text in Deutsch und dazu vier arabische Buchstaben. Beide sind in ihrer natürlichen Schreibweise geschrieben. Der Text in Deutsch ist von links nach rechts und die arabischen Buchstaben von rechts nach links.

.selektor1 {
direction: ltr;
unicode-bidi: embed;
}

.selektor2 {
direction: ltr;
unicode-bidi: bidi-override;
}

.selektor3 {
direction: rtl;
unicode-bidi: embed;
}

.selektor4 {
direction: rtl;
unicode-bidi: bidi-override;
}
<p class="selektor1">Text im Absatz mit ابتث.</p>

<p class="selektor2">Text im Absatz mit ابتث.</p>

<p class="selektor3">Text im Absatz mit ابتث.</p>

<p class="selektor4">Text im Absatz mit ابتث.</p>

Die CSS-Regeln bewirken folgendes.

.selektor1

  • Der Satzaufbau ist von links nach rechts und der Punkt ist rechts. Die Texte behalten ihre natürliche Schreibrichtung bei.

.selektor2

  • Der Satzaufbau ist von links nach rechts und der Punkt ist auf der rechten Seite. Die Schreibrichtung von links nach rechts wird erzwungen bzw. die im Unicode verankerte Schreibrichtung wird überschrieben.

.selektor3

  • Der Satzaufbau ist von links nach rechts und der Punkt ist links. Die Texte behalten ihre natürliche Schreibrichtung bei.

.selektor4

  • Der Satzaufbau ist von rechts nach links und der Punkt ist auf der linken Seiten. Die Schreibrichtung von rechts nach links wird erzwungen bzw. die im Unicode verankerte Schreibrichtung wird überschrieben.
direction und unicode-bidi

Mittels Attributselektoren wäre es auch möglich, allen Elementen CSS-Regeln zuzuweisen, in denen das Attribut dir vorkommt.