CSS, HTML und Javascript mit {stil}

CSS direction • Laufrichtung von Text ändern

CSS direction – Laufrichtung des Texts

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

CSS direction steuert die Richtung des Textflusses (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.

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.

CSS text-orientation

text-orientation legt die Text-Orientierung innerhalb einer Zeile fest, und zwar nur bei vertikalen Texten. text-orientation richtet sich also an Schriften, die von oben nach unten laufen, ist aber z.B. auch nützlich für Text in den Headern von Tabellenspalten.

mixed
Die Zeichen des Texts werden um 90° gedreht, wobei die Glyphen für vertikale Schrift normal ausgerichtet bleiben.
upright
Die Zeichen für horizontale Schrift erhalten ihre natürliche Ausrichtung (aufrecht) – ebenso die Glyphen für senkrechte Schrift. Dabei werden alle Zeichen als ltr (von links nach rechts) interpretiert, gleich was der Benutzer einsetzt.
sideways
Zeichen werden horizontal ausgerichtet, aber die Zeile wird um 90° rotiert, wenn writing-mode als vertical-rl angegeben ist, oder nach links bei der Angabe von vertical-lr.
sideways-right
Ein Alias für sideways – beibehalten zugunsten der Kompatibilität.
use-glyph-orientation
Führt bei SVG-Elementen dazu, dass der Wert der veralterten Eigenschaft glyph-orientation-vertical bzw. glyph-orientation-horizontal genutzt wird.

Tubing Material Gewinde Druckbereich Hersteller Preis in €
1/16" Kel-F 10-32 UNF max. 276 bar Upc 99,00 €
1/16" PEEK 10-32 UNF 414 bar max. Upc 64,00 €
1/16" PEEK 10-32 UNF 414 bar max. Upc 32,00 €
.ver th { 
   text-orientation: sideways;
      -webkit-text-orientation: sideways;
      -mz-text-orientation: sideways;
   writing-mode: vertical-lr;
      -webkit-writing-mode: vertical-lr;
      -mz-writing-mode: vertical-lr;
}

text-orientation: sideways; ist implementiert in Firefox, in Chrome und Opera mit -webkit-Präfix. Nicht IE, nicht Safari. Schade …

writing-mode

CSS writing-mode legt fest, ob Textzeilen horizontal oder vertikal laufen.

horizontal-tb
Horizontaler Textfluß von links nach rechts, vertikaler Textfluß von oben nach unten. Die nächste horizontale Zeile wird unter der vorangehenden Zeile platziert.
vertical-rl
Vertikaler Textfluß von oben nach unten, horizontaler Textfluß von rechts nach links. Die nächste vertikale Zeile wird links neben der vorangehenden Zeile platziert.
vertical-lr
Vertikaler Textfluß von oben nach unten, horizontaler Textfluß von links nach rechts. Die nächste vertikale Zeile wird rechts von der vorangehenden Zeile platziert.
sideways-rl
Vertikaler Textfluß von oben nach unten. Alle Glyphen – selbst die in vertikal verlaufenden Schriften – werden seitlich nach rechts ausgerichtet.
sideways-lr
Vertikaler Textfluß von oben nach unten. Alle Glyphen – selbst die in vertikal verlaufenden Schriften – werden seitlich nach links ausgerichtet.

text-combine-upright

Die Kombination von mehreren Zeichen, die mehr als einen 1em breiten Raum einnehmen, werden in den Platz eines einzelnen Zeichens eingepasst. Der Browser muss den Inhalt innerhalb einer Breite von 1em darstellen und die Zeichen wie eine Glyphe behandeln. text-combine-upright wirkt nur im vertikalen Schriftsatz.