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 wirkt sich nur auf Text im Vertikalmodus aus (wenn writing-mode nicht horizontal-tb ist). Sie ist nützlich, um die Anzeige von Sprachen, die eine vertikale Schrift verwenden, zu steuern und um vertikale Tabellenüberschriften zu erstellen.

Probieren Sie es aus

writing-mode: vertical-rl;
text-orientation: mixed;

writing-mode: vertical-rl;
text-orientation: upright;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <p>
      In another moment down went Alice after it, never once considering how in
      the world she was to get out again.
    </p>
  </div>
</section>

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 text-orientation-Eigenschaft wird als einzelnes Schlüsselwort aus der folgenden Liste angegeben.

Werte

mixed

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

upright

Stellt die Zeichen horizontaler Schriften natürlich (aufrecht) sowie die Glyphen für vertikale Schriften dar. Beachten Sie, dass dieses Schlüsselwort dazu führt, dass alle Zeichen als linksläufig betrachtet werden: der verwendete Wert von direction wird erzwungen auf ltr.

sideways

Bewirkt, dass Zeichen so angeordnet werden, wie sie horizontal wären, aber die ganze Zeile wird 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 zur Verwendung der Werte der veralteten SVG-Eigenschaften glyph-orientation-vertical und glyph-orientation-horizontal.

Formale Definition

Anfangswertmixed
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

Siehe auch