text-orientation CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2020 browserübergreifend verfügbar.
Die text-orientation CSS Eigenschaft legt die Ausrichtung der Textzeichen in einer Zeile fest. Sie betrifft nur Text im Vertikalmodus (wenn writing-mode nicht horizontal-tb ist). Sie ist nützlich zur Steuerung der Darstellung von Sprachen, die vertikale Schrift verwenden, und auch für vertikale 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
/* 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 untenstehenden Liste angegeben.
Werte
mixed-
Dreht die Zeichen horizontaler Schriften um 90° im Uhrzeigersinn. Legt die Zeichen vertikaler Schriften natürlich aus. Standardwert.
upright-
Legt die Zeichen horizontaler Schriften natürlich (aufrecht) aus, ebenso wie die Glyphen vertikaler Schriften. Beachten Sie, dass dieses Schlüsselwort dazu führt, dass alle Zeichen als von links nach rechts betrachtet werden: der verwendete Wert von
directionwird aufltrgesetzt. sideways-
Fügt Zeichen so an, wie sie horizontal wären, aber mit der gesamten Zeile um 90° im Uhrzeigersinn gedreht.
sideways-right-
Ein Alias zu
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-verticalundglyph-orientation-horizontal.
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
<p>Lorem ipsum dolet semper quisquam.</p>
CSS
p {
writing-mode: vertical-rl;
text-orientation: upright;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Writing Modes Level 4 # text-orientation |
Browser-Kompatibilität
Siehe auch
- Die anderen vertikalschriftspezifischen CSS-Eigenschaften:
writing-mode,text-combine-upright, undunicode-bidi. - Logische CSS-Eigenschaften
- Stilisierung vertikalen Textes (Chinesisch, Japanisch, Koreanisch und Mongolisch)
- Umfangreiche Browser-Unterstützung Testergebnisse: https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation