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 betrifft nur Text im vertikalen Modus (wenn writing-mode nicht horizontal-tb ist). Sie ist nützlich zur Steuerung der Anzeige von Sprachen, die vertikale Schrift verwenden, und auch für die Erstellung vertikaler Tabellenüberschriften.

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 ein einzelnes Schlüsselwort aus der folgenden Liste angegeben.

Werte

mixed

Dreht die Zeichen horizontaler Scripts um 90° im Uhrzeigersinn. Legt die Zeichen von vertikalen Scripts natürlich aus. Standardwert.

upright

Legt die Zeichen von horizontalen Scripts natürlich (aufrecht) sowie die Glyphen für vertikale Scripts aus. Beachten Sie, dass dieses Schlüsselwort dazu führt, dass alle Zeichen als links-nach-rechts betrachtet werden: Der verwendete Wert von direction wird auf ltr festgelegt.

sideways

Verursacht, dass Zeichen so ausgelegt werden, als wären sie horizontal, aber mit der ganzen 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, dass der Wert der veralteten SVG-Eigenschaften glyph-orientation-vertical und glyph-orientation-horizontal verwendet wird.

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