CSS/Tutorials/Schreib- und Leserichtung

20min

einfach

Grundkenntnisse in
• Einstieg in HTML
• Einstieg in CSS

Es scheint selbstverständlich, dass Webseiten automatisch von links nach rechts und von oben nach unten laufen. Allerdings kann mit CSS die Schreib- und Leserichtung verändert werden. Damit lassen sich fremdsprachige Texte in anderer Schreibrichtung, aber auch gestalterische Effekte erzielen.

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-Attribut

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.

Schreibrichtung in HTML festlegen ansehen …

<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-Element

Das bdo-Element (engl. für bidirectional overwrite) dient dazu die Textrichtung innerhalb eines Fließtextes zu ändern.

Schreibrichtung in HTML festlegen ansehen …

<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.

CSS

writing-mode

Mittels der writing-mode Eigenschaft kann gesteuert werden, ob die Schreibrichtung (die Inlineachse) horizontal oder vertikal verläuft. Entsprechend verläuft die Zeilenrichtung (die Blockachse) rechtwinklig dazu. Diese Eigenschaft ist hauptsächlich für die Darstellung von asiatischen Schriften gedacht.

Browserunterstützung
caniuse.com

Folgende Angaben sind möglich:

• horizontal-tb = Die Inlineachse verläuft horizontal entsprechend dem dir-Attribut, die Blockachse von oben nach unten.
• vertical-rl = Die Inlineachse verläuft vertikal entsprechend dem dir-Attribut, die Blockachse von rechts nach links.
• vertical-lr = Die Inlineachse verläuft vertikal entsprechend dem dir-Attribut, die Blockachse von links nach rechts.

vertikale Überschrift ansehen …

article h2 {
  writing-mode: vertical-lr;
  font-family: 'Frijole', cursive;
	font-size: 2em;
}

.text-orientation {
  text-orientation: upright;
  letter-spacing:-.2em;
}

Im Beispiel wird die Überschrift vertikal neben dem Text dargestellt. Bei einem Klick auf den Text kann die Ausrichtung der Buchstaben mit text-orientation geändert werden. Zusätzlich wird der Abstand der einzelnen Buchstaben mit einem negativen Wert für letter-spacing angepasst. Es gibt auch einige wenige Schriften, die besonders für vertikale Schreibweise optimiert sind.

Hinweis:

Sie können writing-mode:vertical-rl verwenden, um Text vertikal zu drehen. Das dreht die Textzeilen und die Buchstaben um 90° nach rechts. Die Leserichtung geht dann, wie in asiatischen Sprachen üblich, von oben nach unten. Man findet oft Tabellenbeschriftungen, die in entgegengesetzter Richtung senkrecht gestellt sind, so dass die Leserichtung von unten nach oben geht. Diese Ausrichtung können Sie mit der writing-mode-Eigenschaft nicht erreichen. Die Lösung besteht darin, vertical-rl zu verwenden und das betreffende Element zusätzlich mit rotate:0.5turn; um 180° drehen.

text-orientation

Die text-orientation-Eigenschaft bestimmt die Drehung von Text, wenn writing-mode nicht horizontal-tb ist.

Browserunterstützung
caniuse.com

ToDo (weitere ToDos)

Diskussion von text-orientation und der intrinsischen Zeichenausrichtung

direction, unicode-bidi

Beachten Sie: Wir beschreiben die CSS-Eigenschaften direction und unicode-bidi der Vollständigkeit halber. Die CSS Spezifikation besagt, dass sie nicht in Style-Angaben für HTML Dokumente verwendet werden sollen. Sie sind für Dokumenttyp-Definitionen (DTD) von allgemeinen XML Dokumenten beziehungsweise für die Browser-internen Stylesheets vorgesehen. Innerhalb eines HTML Dokuments sollen das Attribut dir und das Element bdo genutzt werden.

Mit der direction-Eigenschaft können Sie die Schreibrichtung bei Elementen erzwingen, und abhängig davon auch, in welche Richtung beispielsweise Breitenangaben berechnet werden, oder an welcher Seite überbreite Inhalte mit overflow abgeschnitten werden. Die Schreibrichtung ist vor allem für die Darstellung von Schriftkulturen wie der arabischen und hebräischen gedacht, wo von rechts nach links geschrieben wird.

Folgende Angaben sind möglich:

• ltr = von links nach rechts (bzw. von oben nach unten in einem vertikalen writing-mode)
• rtl = von rechts nach links (bzw. von unten nach oben in einem vertikalen writing-mode)

Eine Angabe von direction bei Inline-Elementen ist nur möglich, wenn mittels der unicode-bidi Eigenschaft ein zusätzlicher Ausrichtungskontext geschaffen wird.

Beispiel

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>direction</title>
</head>

<body style="direction:rtl">
   <h1>Hi Junkie!</h1>
   <p>Hier könnte möglicherweise alles anders aussehen als normal ...</p>
</body>
</html>

Die unicode-bidi-Eigenschaft ermöglicht, den von Unicode festgelegten Ausrichtungsalgorithmus in einzelnen Elementen zu überschreiben. In Inline-Elementen ist eine direction-Angabe nur bei Verwendung eines passenden Wertes für unicode-bidi möglich.

Beachten Sie: Die Eigenschaft wird hier nur der Vollständigkeit halber aufgeführt. In HTML Dokumenten soll sie, wie bei direction geschrieben, nicht verwendet werden.

Folgende Angaben sind möglich:

• normal: (Standardwert)
• embed: ermöglicht das Festlegen einer direction-Angabe für inline-Elemente
• bidi-override: die Anordnung der Elemente erfolgt strikt gemäß der direction-Eigenschaft
• isolate: Isoliert die Richtungsberechnungen des Containers von denen im isolierten Element
• isolate-override: Kombiniert isolate und bidi-override
• plaintext: ermöglicht die Anzeige von Daten, für die der Unicode-Richtungsalgorithmus bereits separat angewendet wurde.

Anwendungsbeispiele

vertikale Image Credits

• TIL about text-orientation (wie man Text – und nicht ein Bild! 🤣 – in die Vertikale dreht) von Gunnar Bittersmann

Bild mit vertikalen Image Credits ansehen …

figure {
	margin: 0;
	font: 1.2em/1.3 Source Serif Pro, Georgia, serif;
	font-size: clamp(1em, 4vw, 1.25em);
}

figure > div {
	position: relative;
}

figure img {
	width: 100%;
	display: block;
}

figure footer {
	font: 0.8em/1 Source Sans Pro, Calibri, sans-serif;
	text-align: right;
	hanging-punctuation: first last allow-end;
}

@media (min-width: 25em) {
	figure footer 	{
		position: absolute;
		top: 0;
		right: 0%; /* % fixes IE bug */
		bottom: 0;
		transform: rotate(.5turn);
		color: white;
		writing-mode: tb-rl;
		writing-mode: vertical-rl;
		text-align: left;
		padding: 0.5em 1em 0.5em 0.25em;
		background: linear-gradient(to left,#1040, #1042 .75em, #1046 1.5em);
	}
}

Das figure-Element erhält eine flexible Schriftgröße, da die clamp()-Funktion sich eigenständig den passenden Wert heraussucht.

Siehe auch

• CSS/Tutorials/Boxmodell/Logische Eigenschaften‎ - In Texten mit anderer Schreibrichtung sind Angaben wie rechts und links eher verwirrend. Deshalb wurden als Ergänzung logische Eigenschaften eingeführt.
• SVG/Tutorials/Text/Schreib- und Leserichtung - früher gab es XML-Attribute mit abweichendem Verhalten, heute oft CSS-Eigenschaften aus diesem Tutorial