CSS writing-mode und text-orientation: Laufrichtung oben nach unten

writing-mode: Text vertical / horizontal und text-orientation: bei vertikalen Texten Zeichen für Tiger

writing-mode ist die Laufrichtung von vertikalen Texten innerhalb einer Zeile. Auch wenn Lateinschriften wie Italienisch, Deutsch und Englisch horizontal von links nach rechts laufen, ist ein vertikal gesetzter Text manchmal praktisch, z.B. auf Buchrücken und als platzsparende Beschriftung von Tabellen.

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.

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

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 Firefox, in Chrome und Opera. Safari mit -webkit-Präfix. Nicht IE, nicht Edge. Schade …

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.

text-orientation writing-mode