text-orientation

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

Die text-orientation CSS Eigenschaft legt die Ausrichtung der Textzeichen in einer Zeile fest. Sie beeinflusst nur Text im vertikalen Modus (wenn writing-mode nicht horizontal-tb ist). Sie ist nützlich zur Steuerung der Anzeige von Sprachen, die vertikale Schriftarten verwenden, und auch für vertikale Tabellenüberschriften.

Probieren Sie es aus

Syntax

css
/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

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

Die Eigenschaft text-orientation wird als einzelnes Schlüsselwort aus der unten stehenden Liste spezifiziert.

Werte

mixed

Dreht die Zeichen horizontaler Skripte um 90° im Uhrzeigersinn. Stellt die Zeichen vertikaler Skripte natürlich dar. Standardwert.

upright

Stellt die Zeichen horizontaler Skripte natürlich (aufrecht) dar, ebenso wie die Glyphen für vertikale Skripte. Beachten Sie, dass dieses Schlüsselwort alle Zeichen als von links nach rechts betrachtet: der verwendete Wert von direction wird auf ltr erzwungen.

sideways

Führt dazu, dass Zeichen so angeordnet werden, wie sie es horizontal wären, jedoch mit der gesamten Zeile um 90° im Uhrzeigersinn gedreht.

sideways-right

Ein Alias für sideways, der aus Kompatibilitätsgründen beibehalten wird.

use-glyph-orientation

Bei SVG-Elementen führt dieses Schlüsselwort dazu, den Wert der veralteten SVG-Eigenschaften glyph-orientation-vertical und glyph-orientation-horizontal zu verwenden.

Formale Definition

Initialer Wertmixed
Anwendbar aufalle Elemente außer Tabellenzeilengruppen, Zeilen, Spaltengruppen und Spalten
VererbtJa
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

text-orientation = 
  mixed     |
  upright   |
  sideways

Beispiele

HTML

html
<p>Lorem ipsum dolet semper quisquam.</p>

CSS

css
p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Ergebnis

Spezifikationen

Specification
CSS Writing Modes Level 4
# text-orientation

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch