Die `text-orientation`-Eigenschaft in CSS richtet Text in einer Zeile aus, wenn mit einem vertikalen `writing-mode` gearbeitet wird. Grundsätzlich rotiert sie die Zeile um 90° im Uhrzeigersinn, um zu steuern, wie vertikale Sprachen angezeigt werden – ähnlich wie `text-combine-upright` Zeichengruppen innerhalb einer Textzeile in einem vertikalen Skript dreht, aber für ganze Textzeilen.

.element {
  text-orientation: mixed;
  writing-mode: vertical-rl; 
}

Für die Verarbeitung von bidirektionalem Text – z. B. ein Block, der sowohl von links nach rechts als auch von rechts nach links verlaufenden Text enthält – siehe die `unicode-bidi`-Eigenschaft. Sie wird mit der `direction`-Eigenschaft kombiniert, um zu überschreiben, wie der Browser den Text anzeigt.

Syntax

text-orientation: mixed | upright | sideways

• Initial: mixed
• Gilt für: alle Elemente außer Tabellenzeilengruppen, Zeilen, Spaltengruppen und Spalten
• Vererbt: ja
• Prozentwerte: n/v
• Berechneter Wert: angegebener Wert
• Animationstyp: nicht animierbar

Werte

/* Keyword values */
text-orientation: mixed; /* default */
text-orientation: upright;
text-orientation: sideways;
text-orientation: sideways-right;

/* Global values */
text-orientation: inherit;
text-orientation: initial; /* mixed */
text-orientation: unset;

• mixed: Standardwert. Zeichen in einem horizontalen Skript werden um 90° im Uhrzeigersinn gedreht. Zeichen in einem vertikalen Skript werden in ihrer natürlichen vertikalen Ausrichtung angezeigt.
• upright: Zeichen in einem horizontalen Skript werden in ihrer natürlichen horizontalen aufrechten Position gesetzt, einschließlich einiger Glyphen. Wo ein vertikaler Schreibmodus eine Textzeile so drehen würde, dass die Zeichen seitlich liegen, dreht dieser Wert die Zeichen selbst um 90° in ihre natürliche Position. Beachten Sie, dass dieser Wert die `direction`-Eigenschaft auf einen verwendeten Wert von `ltr` erzwingt, was bedeutet, dass alle Zeichen so behandelt werden, als befänden sie sich in einem links-nach-rechts-Schreibmodus.
• sideways: Der gesamte Text in einem vertikalen Schreibmodus wird seitlich angezeigt, als ob er in einem horizontalen Layout wäre, aber die gesamte Zeile wird um 90° im Uhrzeigersinn gedreht.
• sideways-right: Einige Browser respektieren diesen Wert als Alias für den Wert `sideways`, der aus Kompatibilitätsgründen beibehalten wurde.

use-glyph-orientation wurde im Dezember 2015 als Schlüsselwortwert entfernt. Er wurde auf SVG-Elementen verwendet, um die SVG-Eigenschaften `glyph-orientation-vertical` und `glyph-orientation-horizontal` zu definieren, die nun veraltet sind. `glyph-orientation-vertical` ist nun ein Alias für `text-orientation`.

Browser-Unterstützung

Demo

Spezifikation

• CSS Writing Modes Level 3 (Editor's Draft)

Weitere Informationen

• Warum ist vertikale Textausrichtung ein Albtraum für die Cross-Browser-Kompatibilität? von Nikhil – Eine gründliche Erklärung von `text-orientation` und `writing-mode`.
• Erstellen Sie ganz einfach seitlichen Text mit der CSS-Eigenschaft „writing-mode“ von Adi Purdila – Erkunden Sie neben der Verwendung von `text-orientation` verschiedene Ansätze.
• 2 Möglichkeiten, vertikalen Text in CSS zu erstellen von W.S. Toh – Ein direkterer Vergleich zwischen Ansätzen mit `writing-mode` und `text-orientation`.
• Textrotation von Chris Coyier – Ein Ansatz für vertikalen Text mit `transform` anstelle von `writing-mode` oder `text-orientation`.

Zugehörige Eigenschaften