CSS writing-mode & text-orientation: Laufrichtung von Text – von oben nach unten oder seitwärts

Laufrichtung asiatischer Webseiten

Die meisten asiatischen Webseiten setzen Text ebenfalls von links nach rechts, aber Chinesisch, Japanisch, Koreanisch und weitere asiatische Texte können auch von oben nach geschrieben werden.

.traditional {
	writing-mode: vertical-lr;
}

writing-mode

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

horizontal-tb

Horizontaler Textfluß von links nach rechts in Blöcken von oben nach unten – die nächste horizontale Zeile wird unter der vorangehenden Zeile platziert. Das ist der Normalfall und muss nur angegeben werden, um eine anders lautende Eigenschaft zu überschreiben.

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.

<div class="seitflex">
	<header>
		<p>Seitwärts</p>
	</header>
	<p>Lorem ipsum dolor sit amet, ….</p>
</div>

.seitflex { 
	display: flex; 
	max-width: 300px; 
	gap: 18px; 
}
.seitflex header {
	writing-mode: vertical-lr; 
	font-size: 1.8rem;
}

Tabellen mit vertikaler Beschriftung

Vertikaler Text spart Platz in Tabellen, insbesondere bei tabellarischen Daten, wenn die Beschriftung des Tabellenkopfs breiter ist als alle Inhalte der Spalte.

writing-mode dreht den Text, so dass er von oben nach unten läuft, text-orientation : upright dreht jeden einzelnen Buchstaben.

.ver th {
   text-align: left; vertical-align: top;
}
.ver th span {
   
}
.labeled {
   -ms-writing-mode: tb-rl; 
   writing-mode: vertical-rl; 
   transform:rotate(180deg);
}

<tr>
   <td rowspan="4"><em class="labeled">Tubing 1/16"</em></td>
   <th><span>Material</span></th>
   <th><span>Gewinde</span></th>
   …
</tr>

writing-mode bietet nur die Varianten links nach rechts und rechts nach links. transform : rotate(180deg) dreht den Text wie in der seitlichen Beschriftung der Tabelle im Beispiel von unten nach oben.

Damit in Safari die header-Zellen der Tabelle mit writing-mode: vertical-rl oder writing-mode: vertical-lr senkrecht ausgerichtet werden, muss ein span oder ein div den Text ummanteln.

IE 11 unterstützt writing mode noch in einer älteren Syntax: -ms-writing-mode : tb-rl oder -ms-writing-mode : tb-lr.

writing-mode und text-orientation

Den Text senkrecht schreiben, aber die einzelnen Zeichen in natürlicher Richtung? Das geht mit der Kombination aus writing-mode und text-orientation.

writing-mode: vertical-rl;
text-orientation: upright;
margin: 1em auto;

Nicht text-align, sondern margin: 1em auto sorgt hier dafür, dass der Text zentriert in der Mitte des verfügbaren Platz sitzt.

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

text-orientation : sideways ist implementiert in allen modernen Browsern. Ältere Versionen von Safari mit -webkit-Präfix. Nicht IE.

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.