CSS writing-mode Eigenschaft
Mit der CSS-Eigenschaft writing-mode legen Sie die Richtung des Textflusses fest. Lesen Sie über Werte und probieren Sie Beispiele aus.
Die CSS-Eigenschaft writing-mode legt fest, ob Textzeilen horizontal oder vertikal angeordnet werden und in welche Richtung Blöcke und Zeilen verlaufen.
Diese Seite erklärt, was die Eigenschaft bewirkt, welche Werte sie akzeptiert, wann man sie tatsächlich einsetzt und wie sie mit verwandten Eigenschaften wie text-orientation und direction zusammenwirkt.
Was writing-mode steuert
writing-mode ändert die Blockflussrichtung — die Richtung, in der Block-Level-Boxen (Absätze, Überschriften usw.) gestapelt werden — sowie die Inline-Basisrichtung, in der Zeichen innerhalb einer Zeile fließen. Auf einer normalen englischen Seite stapeln sich Blöcke von oben nach unten, und Text innerhalb einer Zeile fließt von links nach rechts (horizontal-tb). Beim Wechsel zu einem vertikalen Wert dreht sich das gesamte Modell: Zeilen verlaufen von oben nach unten und stapeln sich entweder von rechts nach links oder von links nach rechts.
Da writing-mode die Bedeutung von „Start", „Ende", „Block" und „Inline" neu definiert, arbeitet es eng mit CSS logischen Eigenschaften (margin-block, padding-inline, inset-block usw.) zusammen, die automatisch dem aktiven Schreibmodus folgen, anstatt an physikalische Seiten gebunden zu sein.
Wann würde ich es verwenden?
- Vertikale ostasiatische Schriften (traditionelles Chinesisch, Japanisch, Koreanisch), die von oben nach unten geschrieben werden, mit Spalten von rechts nach links — verwenden Sie
vertical-rl. - Gedrehte UI-Beschriftungen, wie eine seitliche Spaltenüberschrift in einer Tabelle oder eine vertikale Achsenbeschriftung in einem Diagramm.
- Redaktionelle oder „Magazin"-Layouts, die eine Überschrift oder einen Kasten absichtlich seitlich drehen.
Für vertikale Modi kombiniert man writing-mode fast immer mit text-orientation, um zu entscheiden, ob einzelne lateinische Zeichen aufrecht bleiben oder um 90° gedreht werden.
Moderne Browser unterstützen die Eigenschaft writing-mode vollständig ohne Vendor-Präfixe.
| Anfangswert | horizontal-tb |
|---|---|
| Gilt für | Alle Elemente außer Tabellenzeilengruppen, Tabellenspaltengruppen, Tabellenzeilen, Tabellenspalten, Ruby-Basis-Container und Ruby-Anmerkungs-Container. |
| Vererbt | Ja. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.writingMode = "vertical-lr"; |
Syntax
CSS writing-mode Werte
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;Der Standardwert ist horizontal-tb. Die Eigenschaft wird vererbt, sodass das Setzen an einem Container für alle Nachkommen gilt, sofern diese es nicht überschreiben.
Beispiel der Eigenschaft writing-mode mit dem Wert horizontal-tb:
CSS writing-mode Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: horizontal-tb;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Ergebnis
Ein weiteres Beispiel, bei dem der Inhalt vertikal von oben nach unten und von rechts nach links fließt.
Beispiel der Eigenschaft writing-mode mit dem Wert vertical-rl:
CSS writing-mode vertical-rl Beispiel
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: vertical-rl;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Im folgenden Beispiel fließt der Inhalt vertikal von oben nach unten und von links nach rechts.
Beispiel der Eigenschaft writing-mode mit dem Wert vertical-lr:
CSS writing-mode vertical-lr Beispiel
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: vertical-lr;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Kombination mit text-orientation
Innerhalb eines vertikalen Schreibmodus entscheidet text-orientation, wie jedes Glyphe gedreht wird. Die häufigste Kombination hält CJK-Zeichen aufrecht, während die Zeile dennoch vertikal verläuft:
.vertical {
writing-mode: vertical-rl;
text-orientation: upright; /* keep characters upright instead of rotated 90° */
}Ohne text-orientation: upright werden lateinische Buchstaben und Zahlen im vertikalen Modus standardmäßig um 90° im Uhrzeigersinn gedreht.
Werte
horizontal-tb ist der einzige horizontale Wert. Die übrigen Werte sind alle vertikal und unterscheiden sich in der Richtung, in der Zeilen gestapelt werden, sowie in der Ausrichtung der Glyphen.
| Wert | Beschreibung |
|---|---|
| horizontal-tb | Standard. Der Inhalt fließt horizontal von links nach rechts, und Zeilen stapeln sich von oben nach unten. |
| vertical-rl | Der Inhalt fließt vertikal von oben nach unten, und Zeilen stapeln sich von rechts nach links. |
| vertical-lr | Der Inhalt fließt vertikal von oben nach unten und horizontal von links nach rechts. |
| sideways-rl | In CSS Writing Modes Level 3 veraltet. Der Inhalt fließt vertikal von oben nach unten und alle Glyphen sind seitwärts nach rechts ausgerichtet. |
| sideways-lr | In CSS Writing Modes Level 3 veraltet. Der Inhalt fließt vertikal von oben nach unten und alle Glyphen sind seitwärts nach links ausgerichtet. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
text-orientation— steuert, wie einzelne Glyphen innerhalb eines vertikalen Schreibmodus gedreht werden.direction— legt die Inline-Basisrichtung (LTR vs. RTL) für den Text fest.text-align— richtet Inline-Inhalte aus; die Schlüsselwörterstart/endberücksichtigen den Schreibmodus.transform— eine alternative Möglichkeit, Elemente visuell zu drehen, ohne das Layout-Modell zu verändern.