CSS text-orientation Eigenschaft
Mit der CSS-Eigenschaft text-orientation legen Sie die Ausrichtung von Zeichen in einer vertikalen Textzeile fest. Werte und Beispiele.
Die CSS-Eigenschaft text-orientation steuert, wie einzelne Zeichen innerhalb einer Zeile ausgerichtet sind, wenn der Text vertikal verläuft. Sie wird eingesetzt, wenn ostasiatische Schriften (Chinesisch, Japanisch, Koreanisch) in ihrem traditionellen vertikalen Fluss gesetzt werden sollen oder wenn man in einem lateinischen Design eine vertikale Beschriftung oder Überschrift benötigt.
Allein bewirkt text-orientation nichts — sie greift erst, sobald die Zeilenrichtung vertikal ist. Diese Richtung legt man mit der Eigenschaft writing-mode fest (zum Beispiel vertical-rl oder vertical-lr). Das Paar lässt sich als Arbeitsteilung verstehen: writing-mode bestimmt, in welche Richtung die Zeile fließt, und text-orientation bestimmt, wie jede Glyphe entlang dieser Zeile gedreht wird.
Dieses Kapitel behandelt, was jeder Wert bewirkt, wann man welchen wählt, mögliche Fallstricke bei der Browserunterstützung und ausführbare Beispiele, die Sie bearbeiten können.
Warum diese Eigenschaft verwenden
- Vertikale CJK-Typografie. Standardmäßig (
mixed) werden lateinische Zeichen, die in vertikalen chinesischen oder japanischen Text eingebettet sind, um 90° gedreht, was den Lesefluss beeinträchtigt.uprighthält sie aufrecht. - Dekorative vertikale Überschriften und Seitenbezeichnungen. Buchrücken-Titel, Seitenleisten-Tags und Diagrammachsenbeschriftungen in lateinischen Schriften lassen sich oft besser aufrecht oder seitlich lesen.
- Originalgetreues Rendern gemischtsprachiger Inhalte, in denen Zahlen, Akronyme oder Lehnwörter in vertikalem Text erscheinen.
Werte im Überblick
text-orientation akzeptiert fünf schriftbezogene Werte — mixed, upright, sideways, sideways-right und use-glyph-orientation — sowie die globalen Schlüsselwörter initial und inherit. Alle schriftbezogenen Werte gelten nur in vertikalen Schreibmodi.
Einige historische Hinweise: Der alte Wert sideways-left wurde aus der Spezifikation entfernt, sideways-right ist jetzt nur noch ein Alias für sideways, und die nicht-vertikalen Anwendungsfälle wurden in die Werte sideways-lr / sideways-rl der Eigenschaft writing-mode verschoben.
Die Eigenschaft text-orientation hat nur eine Wirkung, wenn writing-mode vertikal ist (vertical-rl oder vertical-lr). In einem normalen horizontalen Layout wird sie ignoriert.
| Anfangswert | mixed |
|---|---|
| Gilt für | Alle Elemente außer Tabellenzeilen-Gruppen, Zeilen, Spalten-Gruppen und Spalten. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.textOrientation = "upright"; |
Syntax
CSS text-orientation Werte
text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;Beispiel der text-orientation Eigenschaft mit dem Wert "mixed":
CSS text-orientation Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-rl;
text-orientation: mixed;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<p>Lorem ipsum is simply dummy text.</p>
</body>
</html>Mit mixed bleiben lateinische Buchstaben aufrecht, während die Zeile selbst von oben nach unten und von rechts nach links fließt. Dies ist der Browser-Standard für vertikale Schreibmodi und der richtige Wert für echten CJK-Text.
Ergebnis
Beispiel der text-orientation Eigenschaft mit dem Wert "upright":
CSS text-orientation mit dem Wert upright, Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-lr;
text-orientation: upright;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<p>Lorem ipsum is simply dummy text.</p>
</body>
</html>Der Wert upright zwingt jede Glyphe dazu, vertikal zu stehen, unabhängig von ihrer Schrift. Er ist die typische Wahl für eine dekorative vertikale Überschrift in einem lateinischen Design und um eingebettete lateinische Wörter innerhalb von vertikalem CJK-Text lesbar zu halten. Beachten Sie, dass upright auch die bidirektionale direction des Textes auf ltr setzt.
Beispiel: vertikale Überschrift neben Fließtext
Weiteres CSS text-orientation Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ffffff;
color: #000000;
font-size: 1.1em;
}
.example {
background: #cccccc;
color: #fff;
padding: 3em;
margin: 40px auto 0;
width: 400px;
max-width: 400px;
display: flex;
}
h1 {
color: #8ebf42;
margin: 0.15em 0.75em 0 0;
font-family: 'Bungee Shade', cursive;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
text-orientation: upright;
-webkit-font-feature-settings: "vkrn", "vpal";
font-feature-settings: "vkrn", "vpal";
}
p {
margin: 0;
line-height: 1.5;
font-size: 1.15em;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<div class="example">
<h1>Lorem Ipsum</h1>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</body>
</html>Browserunterstützung und Fallbacks
text-orientation wird in allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari). Zwei praktische Hinweise:
- Sie ist nur in Verbindung mit einem vertikalen
writing-modesinnvoll; setzen Sie daher immer beide Eigenschaften gemeinsam. - Ältere WebKit-Builds benötigen das Präfix
-webkit-fürwriting-mode(wie im obigen Beispiel zu sehen). Die Eigenschafttext-orientationselbst benötigt in aktuellen Browsern kein Präfix. - Vermeiden Sie
use-glyph-orientation: Dieser Wert ist veraltet und wird von modernen Browsern nicht mehr unterstützt.
Werte
| Wert | Beschreibung |
|---|---|
| mixed | Horizontale Schriften werden aufrecht dargestellt, während vertikale Schriften um 90° im Uhrzeigersinn gedreht werden. Dies ist der Standardwert der Eigenschaft. |
| upright | Alle Zeichen werden aufrecht dargestellt, unabhängig von ihrer Schrift. Dies beeinflusst nicht die Eigenschaft direction. |
| sideways | Die Zeichen werden so angeordnet, als wären sie horizontal, aber die gesamte Zeile wird um 90° im Uhrzeigersinn gedreht. |
| sideways-right | Ein Alias für sideways, der aus Kompatibilitätsgründen beibehalten wird. |
| use-glyph-orientation | Veraltet. Zuvor den veralteten SVG-Eigenschaften glyph-orientation-vertical und glyph-orientation-horizontal zugeordnet. Wird von modernen Browsern nicht mehr unterstützt. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt den Wert der Eigenschaft vom Elternelement. |
Verwandte Eigenschaften
writing-mode— legt die Zeilenrichtung (horizontal oder vertikal) fest und ist erforderlich, damittext-orientationwirkt.text-combine-upright— fasst eine kurze Zeichenfolge (z. B. eine zweistellige Jahreszahl) im Raum eines einzelnen aufrechten Zeichens in vertikalem Text zusammen.direction— steuert die bidirektionale Basisrichtung des Textes.text-align— richtet Inline-Inhalte entlang der Zeile aus, was in vertikalen Modi zur Ausrichtung oben/unten wird.