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 für die Steuerung der Anzeige von Sprachen, die eine vertikale Schrift verwenden, und auch für die Erstellung von vertikalen 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 Schriftsysteme um 90° im Uhrzeigersinn. Ordnet die Zeichen vertikaler Schriftsysteme natürlich an. Standardwert.
upright: Ordnet die Zeichen horizontaler Schriftsysteme natürlich (aufrecht) an, ebenso wie die Glyphen für vertikale Schriftsysteme. Beachten Sie, dass dieses Schlüsselwort dazu führt, dass alle Zeichen als von links nach rechts betrachtet werden: Der verwendete Wert von direction wird auf ltr erzwungen.
sideways: Verursacht, dass Zeichen so angeordnet werden, wie sie 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, dass der Wert der veralteten SVG-Eigenschaften glyph-orientation-vertical und glyph-orientation-horizontal verwendet wird.

Formale Definition

Anfangswert	`mixed`
Anwendbar auf	alle Elemente außer Tabellenzeilengruppen, Zeilen, Spaltengruppen und Spalten
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	Not 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

Die anderen vertikalschriftenbezogenen CSS-Eigenschaften: writing-mode, text-combine-upright, und unicode-bidi.
CSS logische Eigenschaften
Formatierung vertikalen Textes (Chinesisch, Japanisch, Koreanisch und Mongolisch)
Umfangreiche Browsersupport-Test-Ergebnisse: https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden