Schreib- und Leserichtung mit HTML und CSS
- 20min
- einfach
- Grundkenntnisse in
Es scheint selbstverständlich, dass Webseiten automatisch von links nach rechts und von oben nach unten laufen. Das ist für Sprachen wie Deutsch, Englisch oder Französisch selbstverständlich – aber keineswegs für alle Schriftsysteme.
Arabisch und Hebräisch werden beispielsweise von rechts nach links geschrieben und gelesen. Bei manchen ostasiatischen Schriftsystemen kann Text außerdem von oben nach unten verlaufen.
HTML und CSS bieten deshalb verschiedene Möglichkeiten, die Schreib- und Leserichtung eines Textes festzulegen und die Darstellung daran anzupassen.[1]
Inhaltsverzeichnis
Schreibrichtung mit HTML
Damit der Text bei der Anzeige einer HTML-Seite richtig aussieht, müssen wir den Richtungskontext des Textes festlegen. Wir bezeichnen diesen Kontext als die Basisrichtung für den Text.
Es ist von grundlegender Bedeutung, die richtige Basisrichtung für den bidirektionalen Unicode-Algorithmus festzulegen. Die korrekte Angabe der Basisrichtung legt die korrekte Standardausrichtung für den Text, aber auch die Richtung des Elementflusses (z. B. bei flex-direction) fest.
dir – Schreibrichtung festlegen
Die Basisrichtung wird entweder explizit durch das nächstgelegene übergeordnete Element mit einem dir-Attribut festgelegt, oder, in Ermangelung eines solchen Attributs, von der Standardrichtung des Dokuments geerbt, die links-nach-rechts (LTR) ist.
<h1 dir="ltr">Laufrichtung mit <code>dir</code> auslesen</h1>
<main dir="ltr">
<h2 lang="de" dir="ltr">Sprachvielfalt</h2>
<p id="hinweis" lang="de" dir="ltr">Klicken Sie irgendwo auf die Seite. Es wird dann angezeigt, ob, und wenn ja welche Laufrichtung (dir) das Element hat.</p>
<p class="absatz" lang="ar" dir="rtl">اسمي ستيفان</p>
bdo – Schreibrichtung umkehren
Das bdo-Element (engl. für bidirectional overwrite) dient dazu die Textrichtung innerhalb eines Fließtextes zu ändern.
<p> Eines der arabischen Wörter für Frieden,
<bdo lang="ar" dir="rtl">سلام</bdo>, kennt
man sicher von der Grußformel "as-salāmu ʿalaikum",
<bdo lang="ar" dir="rtl">السلام عليكم</bdo>.
</p>
Innerhalb des Absatzes gibt es einige Wörter mit geänderter Schreibrichtung (Das Wort Salām findet sich im Gruß rechts wieder, also am Anfang der Schreibrichtung von rechts nach links!); der Absatz selbst läuft in „normaler“ Schreibrichtung.
Nicht alles ist left und right
Da man für unterschiedliche Schreibrichtungen dann jeweils andere seitliche Abstände und Rahmen festlegen müsste, gibt es in CSS logische Eigeschaften, die sich nach der Schreibrichtung orientieren:
section {
border-inline-start: thick solid #c32e04;
padding-inline-start: 1em;
inline-size: 25em;
}
[lang=ja] {
writing-mode: vertical-rl;
}
Anstelle der Angaben von rechts oder links verwenden wir nun den Begriff inline, bzw. inline-start.
- inline-size entspricht bei horizontalen Schriften der width, bei vertikalen Schriften der height.
- border-inline-start fügt einen Rahmen am Beginn des Textflusses hinzu;
- padding-inline-start fügt einen Innenabstand am Beginn des Textflusses hinzu
Schreibrichtung mit CSS
CSS bietet mit direction ebenfalls eine Möglichkeit, die horizontale Schreibrichtung festzulegen:
.arabic {
direction: rtl;
}
Für semantische Angaben zur Sprache bzw. Schreibrichtung sollte jedoch dir in HTML bevorzugt werden. CSS beschreibt in erster Linie die Darstellung.
writing-mode – horizontale und vertikale Schreibrichtung
Mit der writing-mode-Eigenschaft legst du fest, in welcher Richtung Text geschrieben und gelesen wird. Sie bestimmt, ob die Inlineachse horizontal oder vertikal verläuft. Entsprechend verläuft die Zeilenrichtung (die Blockachse) rechtwinklig dazu.
Während direction zwischen einer Schreibrichtung von links nach rechts (ltr) und von rechts nach links (rtl) unterscheidet, legt writing-mode die Ausrichtung der Schreibrichtung fest. Die beiden Eigenschaften können daher miteinander kombiniert werden.
Die wichtigsten Werte sind:
-
horizontal-tb– Die Inlineachse verläuft horizontal, die Blockachse von oben nach unten. Dies ist die Standardeinstellung. -
vertical-rl– Die Inlineachse verläuft vertikal, die Blockachse von rechts nach links. Dies entspricht beispielsweise der traditionellen japanischen Schreibweise. -
vertical-lr– Die Inlineachse verläuft vertikal, die Blockachse von links nach rechts.
Die Richtung der Inlineachse wird dabei zusätzlich durch direction beeinflusst.
h2.sideways-rl {
writing-mode: sideways-rl;
}
h2.sideways-lr {
writing-mode: sideways-lr;
}
h2.upright {
writing-mode: vertical-rl;
text-orientation: upright;
letter-spacing:-.5em;
}
Im Beispiel wird die Überschrift gedreht neben dem Text dargestellt und man muss den Kopf seitwärts kippen, um sie zu lesen. Mit den Radiobuttons unter dem Text kann man auswählen, welche Klasse der Überschrift zugewiesen wird – zur Auswahl stehen sideways-rl, sideways-lr und upright. Die upright-Klasse stellt auf senkrechte Leserichtung mit aufrechter Textorientierung um. Da die meisten Schriften nicht auf diese Darstellung ausgelegt sind, ist der Abstand zwischen den Buchstaben nun zu groß und das wird mit einem negativen letter-spacing ausgeglichen. Es gibt auch einige wenige Schriften, die besonders für vertikale Schreibweise optimiert sind.
Übrigens: weil text-orientation nur für vertikale Typographie funktioniert, muss der writing-mode für die „aufrechte“ Darstellung auf einen Vertikal-Modus umgeschaltet werden.
text-orientation – Ausrichtung einzelner Zeichen
Die text-orientation-Eigenschaft bestimmt die Drehung von Text, wenn writing-mode nicht horizontal-tb ist.
https://24ways.org/2016/css-writing-modes/
https://uxplanet.org/hero-images-are-dead-these-solutions-are-replacing-them-184aae824c55
Ruby – zusätzliche Angaben bei vertikalen Schriften
.vertical {
writing-mode: vertical-rl;
}
ruby {
ruby-position: over; /* in vertical-rl bedeutet "rechts" */
}
/* Varianten für text-orientation */
.mixed {
text-orientation: mixed;
}
.upright {
text-orientation: upright;
}
.sideways {
text-orientation: sideways;
}
Die japanischen Texte werden mit ruby-Elementen ausgezeichnet und durch rt-Elemente ergänzt.
Durch writing-mode: vertical-rl; wird die Schreibrichtung von oben nach unten festgelegt.
Text mit lateinischen Buchstaben wird je nach text-orientiation seitwärts oder in „richtiger“ Drehung untereinander dargestellt.
Bidirektionale Texte mit unicode-bidi
Bei Texten, die unterschiedliche Schreibrichtungen enthalten, kommt der Unicode-Bidirektionalitätsalgorithmus (BiDi) zum Einsatz. Mit unicode-bidi kann dieses Verhalten beeinflusst werden.
Folgende Angaben sind möglich:
bidi-normal: (Standardwert)bidi-override(überschreibt vorgegebene Laufrichtung)
<text x="210" y="30" direction="rtl" unicode-bidi="bidi-override">
andersrum!
</text>
<text x="260" y="100" direction="rtl" unicode-bidi="bidi-normal">
andersrum!
</text>
Beachten Sie das Ausrufezeichen im unteren Text. Mit unicode-bidi: bidi-normal ändern die Satzzeichen, aber nicht die Buchstaben ihre Laufrichtung.
Mit dem direction-Attribut (analog der CSS-Eigenschaft: direction) können Sie die Laufrichtung von Text beeinflussen. (Eine Angabe des HTML-Universalattributs dir ist in SVG nicht möglich!)
Folgende Angaben sind möglich:
ltr: (Standardwert) von links nach rechtsrtl: von rechts nach links
SVG und XML-Dokumente
Auch SVG-Texte können mit den aus CSS bekannten Eigenschaften für die Schreibrichtung formatiert werden. Die entsprechenden Eigenschaften werden dabei nicht mehr als spezielle SVG-Attribute, sondern über CSS gesetzt.
Siehe auch
- Logische Eigenschaften - In Texten mit anderer Schreibrichtung sind Angaben wie rechts und links eher verwirrend. Deshalb wurden als Ergänzung logische Eigenschaften eingeführt.
