CSS/Tutorials/Schreib- und Leserichtung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
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.[1]

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
Ruby und vertikale Texte ansehen …
  .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.

SVG und XML-Dokumente

Mit CSS kann die Schreib- und Leserichtung verändert werden. Damit lassen sich fremdsprachige Texte in anderer Schreibrichtung, aber auch gestalterische Effekte erzielen.[2]

Daneben gab es in SVG entsprechende XML-Attribute, die aber teilweise nicht von allen Browsern unterstützt wurden. Dieser Abschnitt zeigt direkt einsetzbare Beispiele, die in allen Browsern laufen.

direction + unicode-bidi

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 rechts
  • rtl: von rechts nach links

Um eine Festlegung von direction zu ermöglichen, muss die Eigenschaft unicode-bidi gesetzt werden.

Folgende Angaben sind möglich:

  • bidi-normal: (Standardwert)
  • bidi-override (überschreibt vorgegebene Laufrichtung)
Änderung der Laufrichtung ansehen …
  <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.

writing-mode

Mit dem writing-mode-Attribut können Sie die Laufrichtung eines Textes verändern bzw. dessen Grundlinie neu ausrichten. Dies ist bei manchen Sprachen wie Hebräisch und Arabisch (rechts nach links) oder asiatischen Sprachen (von oben nach unten) wichtig.

In SVG1 waren folgende Angaben möglich, sind aber heute obsolet:

  • lr: (Standardwert) von links nach rechts
  • rl: rechts nach links
  • tb: von oben nach unten

In SVG2 sind die Werte aus CSS übernommen worden:

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

Deshalb muss für die Dastellung linksläufiger Schriften nun die bereits oben erwähnte direction-Eigenschaft verwendet werden:

writing-mode und direction ansehen …
<text x="340" y="70" class="rl" lang="he">
	סאלפהטמל
</text>
<text x="340" y="100" class="rl">
	right-to-left
</text>
<text x="20" y="40" class="tb">
	top-bottom
</text>
<text x="50" y="40" class="tb" lang="zh">		
	欢迎来到 2021 年！
</text>
Die Textelemente erhalten Klassen und Sprachangaben mit einem lang-Attribut.
.lr {
	writing-mode: horizontal-tb;
}

.rl {
	direction: rtl;
}
.tb {
	writing-mode: tb;
}

Die linksläufige hebräische Schrift wird mit der direction-Eigenschaft, der chinesische Satz mit der writing-mode-Eigenschaft formatiert.

Orientierung

Mit den obsoleten glyph-orientation-horizontal- (bei writing-mode:lr bzw. rl) und glyph-orientation-vertical-Attributen (bei writing-mode:tb) konnten Sie bei geänderter Laufrichtung die einzelnen Zeichen entsprechend drehen. Dabei waren als Werte die Gradzahlen 0, 90, 180, 270 möglich. Andere Angaben werden auf den nächsten zulässigen Wert aufgerundet.

Achtung.svg

Im Firefox wurde dies nie implementiert. Stattdessen gibt es mittlerweile die text-orientation-Eigenschaft, die aber nur eine Drehung um 90° vorsieht:

Browserunterstützung
caniuse.com
Beispiel ansehen …
.vertical {
  writing-mode: vertical-rl;
	fill: #c32e04; /*red */
}
.upright {
	text-orientation: upright;
	fill: none;
	stroke: #5a9900; /*green*/
	stroke-width: 1;
}

Der Text mit der Klasse .vertical erhält mit writing-mode eine Laufrichtung von oben nach unten - die Ausrichtung der Buchstaben bleibt jedoch erhalten.

Der Text mit der Klasse upright wird nun mit text-orientation: upright so gedreht, dass die Laufrichtung vertikal, die Ausrichtung der einzelnen Buchstaben aber horizontal ist.

Anwendungsbeispiele

vertikale Image Credits

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


Weblinks

  1. ↑ W3C: Structural markup and right-to-left text in HTML
  2. ↑ W3C: Structural markup and right-to-left text in HTML

Abgerufen am 27.12.2025
von "http://wiki.selfhtml.org/wiki/CSS/Tutorials/Schreib-_und_Leserichtung"