CSS, HTML und Javascript mit {stil}

CSS text-orientation • Laufrichtung von Text

text-orientation: z.B. für senkrechte Beschriftung von Tabellen Zeichen für Tiger

Lateinschriften wie Englisch, Italienisch oder Deutsch werden von links nach rechts geschrieben, manchmal auch von oben nach unten oder unten nach oben (z.B. auf Buchrücken).

Die meisten asiatischen Webseiten setzen Text 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.
Tubing Material Gewinde Druck Hersteller Preis €
1/16" Kel-F 10-32 UNF max. 276 bar Upc 99,00 €
1/16" PEEK 10-32 UNF 414 bar max. Upc 64,00 €
1/16" PEEK 10-32 UNF 414 bar max. Upc 32,00 €
.ver th {
  text-align: left;
  vertical-align: top;
}
.ver th span {
  
}

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.

Vertikaler Text mit word-wrap ist eine andere Methode, Text senkrecht zu setzen.

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 mit -webkit-Präfix. Nicht IE, nicht Safari. 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