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] [2]
Inhaltsverzeichnis
Schreibrichtung mit HTML
Damit der Text bei der Anzeige einer HTML-Seite richtig verarbeitet und dargestellt werden kann, sollten wir seinen Sprach- und Richtungskontext festlegen. Dazu dienen vor allem die Attribute lang und dir.
Mit lang wird die Sprache eines Textabschnitts angegeben. Das ist unter anderem für Screenreader, Rechtschreibprüfung, Suchmaschinen und die typografische Darstellung wichtig.
Mit dir wird die Schreibrichtung festgelegt. Sie bestimmt die Basisrichtung des Textes, die der bidirektionale Unicode-Algorithmus für die Anordnung von Zeichen verwendet. Außerdem beeinflusst sie die Richtung der Inline- und Blockachse und damit beispielsweise die Wirkung von flex-direction.
Bei Texten in Sprachen mit rechtsläufiger Schrift sollten deshalb beide Angaben gemacht werden:
<p lang="ar" dir="rtl">
…
</p>
Dabei beschreibt lang="ar", welche Sprache verwendet wird, während dir="rtl" angibt, in welche Richtung der Text läuft.
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">Sprachvielfalt</h1>
<main dir="ltr">
<h2 lang="de" dir="ltr">Laufrichtung mit <code>dir</code> auslesen</h2>
<p id="hinweis" lang="de" dir="ltr">Klicke irgendwo auf die Seite. Es wird dann angezeigt, ob das Element eine Laufrichtung (dir) hat und welche.</p>
<p class="absatz" lang="ar" dir="rtl">اسمي ستيفان</p>
Bei den meisten europäischen Sprachen muss neben der Sprachangabe lang keine Laufrichtung mit dir angegeben werden, da sie standardmäßig von links nach rechts geschrieben werden.
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 Eigenschaften, 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;
}
Die Schreibrichtung der Texte wird über die entsprechenden HTML-Attribute gesteuert. Das CSS optimiert nur die Abstände und Rahmen. 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.
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.
.orientation-demo p {
writing-mode: vertical-rl;
}
.mixed {
text-orientation: mixed;
}
.upright {
text-orientation: upright;
}
.sideways {
text-orientation: sideways;
}
text-orientation wirkt nur zusammen mit einem vertikalen writing-mode. Mit mixed werden Zeichen entsprechend den Regeln der jeweiligen Schrift ausgerichtet. upright stellt dagegen alle Zeichen aufrecht dar.
Bei der gemischten Schreibweise zeigt sich das interessante Verhalten: Zeichen, für die strenge Konventionen der vertikalen Schreibweise gelten (z. B. Japanisch), bleiben an den entsprechenden Stellen aufrecht, während lateinischer Text in der Regel seitlich gedreht wird.
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-orientation 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.
Dateinamen und Code enthalten häufig eine Mischung aus Text mit unterschiedlicher Schreibrichtung. Ohne geeignete Bidirektionalitätsregeln kann dadurch die visuelle Reihenfolge einzelner Bestandteile vom erwarteten Aufbau abweichen. unicode-bidi: isolate behandelt den Inhalt als eigenständigen Textabschnitt und verhindert, dass seine Schreibrichtung die Umgebung beeinflusst.
<p>
Datei:
<code dir="ltr">bericht-שלום.html</code>
</p>
<p lang="he" dir="rtl">
הקובץ
<code class="filename">bericht-שלום.html</code>
נמצא כאן.
</p>
Der umgebende Text läuft von rechts nach links. Der Dateiname wird dagegen als eigenständige Einheit von links nach rechts behandelt.
SVG und XML-Dokumente
Das ursprüngliche Tutorial aus dem Jahre 2015 behandelte bidirektionale Texte in SVG. Sie können heute mit den aus CSS bekannten Eigenschaften für die Schreibrichtung formatiert werden. Die entsprechenden Eigenschaften werden dabei nicht mehr als spezielle XML-Attribute, sondern über CSS gesetzt.
Dabei gibt es eine Ausnahme:
Eine Angabe des HTML-Universalattributs dir ist in SVG nicht möglich!
Mit dem direction-Attribut (analog der CSS-Eigenschaft: direction) kannst du die Laufrichtung von Text beeinflussen.
Fazit
Im Normalfall benötigt man bei europäischen Webseiten nach der Sprachangabe wohl keine zusätzlichen Angaben zur Schreibrichtung. Trotzdem sollte man seine Dokumente so anlegen, dass sie in allen Sprachsystemen gut lesbar dargestellt werden.
Falls man Texte drehen möchte, kann man dies sowohl mit writing-mode als auch mit transform oder rotate erledigen. Bei senkrechtem Text sollte man aber darauf achten, dass der Font auch dazu passt.
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.
- Internationalisierung
- Sprachauswahl
- Content Negotiation
- Hero-Images – Große Bilder als Blickfang
- Resolution Switching mit srcset
- <picture> – ein Container
- Art Direction
- Light und Dark Mode
Weblinks
- ↑ W3C: Structural markup and right-to-left text in HTML
- ↑ CSS Writing Modes von Jen Simmons (24ways.org)
Sehr ausführlicher Grundlagenartikel mit vielen Screenshots
Jen Simmons erklärt auch den Aufbau Han-basierter Schriftsysteme und den Unterschied des mongolischen Systems gegenüber den anderen, bekannteren Varianten, was den Rahmen dieser Einführung sprengen würde.
