Textorientierung - CSS-Tricks | CSS-Almanach 2025

Die text-orientationEigenschaft in CSS richtet Text in einer Zeile aus, wenn Sie mit einer Vertikalen arbeiten writing-mode. Grundsätzlich wird entweder die Zeile um 90 ° im Uhrzeigersinn gedreht, um zu steuern, wie vertikale Sprachen angezeigt werden - ähnlich wie bei der text-combine-uprightDrehung von Zeichengruppen innerhalb einer Textzeile in einem vertikalen Skript, jedoch für vollständige Textzeilen.

.element ( text-orientation: mixed; writing-mode: vertical-rl; )

Überprüfen Sie die unicode-bidiEigenschaft , um bidirektionalen Text zu verarbeiten - einen Block, der beispielsweise sowohl Text von links nach rechts als auch von rechts nach links enthält . Es wird mit der directionEigenschaft kombiniert, um zu überschreiben, wie der Browser den Text anzeigt.

Syntax

text-orientation: mixed | upright | sideways

Initiale: mixed
Gilt für: alle Elemente außer Tabellenzeilengruppen, Zeilen, Spaltengruppen und Spalten
Geerbt: ja
Prozentsätze: n / a
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 einer horizontalen Schrift 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 festgelegt, einschließlich einiger Glyphen. Wenn also ein vertikaler Schreibmodus eine Textzeile so drehen kann, dass die Zeichen seitwärts sind, dreht dieser Wert die Zeichen selbst um 90 ° in ihre natürliche Position. Beachten Sie, dass dieser Wert die directionEigenschaft in einen verwendeten Wert von zwingt ltr, was bedeutet, dass alle Zeichen so behandelt werden, als ob sie sich in einem Schreibmodus von links nach rechts befinden.
sideways: Der gesamte Text in einem vertikalen Schreibmodus wird seitlich angezeigt, als wäre er in einem horizontalen Layout, aber die gesamte Linie wird um 90 ° im Uhrzeigersinn gedreht.
sideways-right: Einige Browser betrachten diesen Wert als Alias für den sidewaysWert, der aus Gründen der Abwärtskompatibilität beibehalten wird.

use-glyph-orientationSVG - Eigenschaften zu definieren , wurde als Schlüsselwort - Wert im Dezember 2015 entfernt Es ist auf SVG - Elemente verwendet wurde glyph-orientation-verticalund glyph-orientation-horizontaldie jetzt veraltet. glyph-orientation-verticalist jetzt ein Alias für text-orientation.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom	Feuerfuchs	IE	Kante	Safari
48	41	Nein	79	10,1 *

Handy / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	10.0-10.2

Spezifikation

CSS-Schreibmodi Stufe 3 (Entwurf des Herausgebers)

Mehr Informationen

Warum ist die vertikale Textausrichtung ein Albtraum für die Cross-Browser-Kompatibilität? von Nikhil - Eine gründliche Erklärung von text-orientationund writing-mode.
Erstellen Sie mit der CSS-Eigenschaft „Schreibmodus“ von Adi Purdila ganz einfach seitwärts Text - Entdecken Sie zusätzlich zur Verwendung verschiedene Ansätze text-orientation.
2 Möglichkeiten zum Erstellen von vertikalem Text in CSS von WS Toh - Ein direkterer Vergleich zwischen Ansätzen mit writing-modeund text-orientation.
Textrotation von Chris Coyier - Ein Ansatz für vertikalen Text, der transformanstelle von writing-modeoder verwendet wird text-orientation.