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 beeinflusst 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 zum Erstellen 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
/* 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;
Werte
Diese Eigenschaft wird mit einem der folgenden Schlüsselwortwerte angegeben:
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 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
directionwird aufltrerzwungen. sideways-
Verursacht, dass Zeichen so ausgelegt 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-verticalundglyph-orientation-horizontalverwendet 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
<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 mit vertikaler Schrift zusammenhängenden CSS-Eigenschaften:
writing-mode,text-combine-upright, undunicode-bidi. - CSS Logische Eigenschaften
- Styling vertikalen Text (Chinesisch, Japanisch, Koreanisch und Mongolisch)
- Umfangreiche Browser-Unterstützungstests: https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation