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

CSS writing-mode: Text vertical / horizontal

writing-mode ist die Laufrichtung von vertikalen Texten innerhalb einer Zeile. text-orientation legt die Text-Orientierung bei vertikalen Texten innerhalb einer Zeile fest.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

5袋大米
5袋大米
.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.

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.

Tubing 1/16" Material Gewinde Druck (bar) Preis €
Kel-F 10-32 UNF max. 276 bar 99,00 €
PEEK 10-32 UNF 414 bar max. 64,00 €
PEEK 10-32 UNF 414 bar max. 32,00 €
.ver th {
   text-align: left; vertical-align: top;
}
.ver th span {
   
}
.labeled {
   -ms-writing-mode: tb-rl; 
   writing-mode: vertical-rl; 
   transform:rotate(180deg);
}
HTML für Tabellen mit senkrecht gesetztem Text
<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.

ABWÄRTS
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.