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 den Text im vertikalen Modus (wenn writing-mode nicht horizontal-tb ist). Sie ist nützlich zur Steuerung der Darstellung von Sprachen, die eine vertikale Schrift verwenden, und auch zur 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 Schriftzüge um 90° im Uhrzeigersinn. Platziert die Zeichen vertikaler Schriften natürlich. Standardwert.
upright: Platziert die Zeichen horizontaler Schriftzüge aufrecht (natürlich) sowie die Glyphen für vertikale Schriften. 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 erzwungen.
sideways: Führt dazu, 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 vertikalen Schrift-bezogenen CSS-Eigenschaften: writing-mode, text-combine-upright, und unicode-bidi.
CSS Logische Eigenschaften
Stilisierung vertikalen Textes (Chinesisch, Japanisch, Koreanisch und Mongolisch)
Umfassende Browser-Unterstützungstestergebnisse: 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