CSS writing-mode-Eigenschaft
Die CSS-Eigenschaft writing-mode legt fest, ob der Text vertikal oder horizontal angeordnet werden soll.
Diese Eigenschaft ändert die Textflussrichtung, sodass Inhalte je nach Wert horizontal (von links nach rechts oder von rechts nach links) oder vertikal (von oben nach unten) gelesen werden können. Sie wird beispielsweise häufig verwendet, um traditionelle vertikale ostasiatische Schriftsysteme oder moderne horizontale Layouts zu unterstützen. Hinweis: Bei der Verwendung von vertikalen Werten benötigen Sie in der Regel die Eigenschaft text-orientation, um zu steuern, wie einzelne Zeichen gedreht werden.
Die Eigenschaft writing-mode beeinflusst die Blockflussrichtung, also die Richtung, in der Block-Container gestapelt werden, sowie die Richtung, in der inline-Level-Inhalte innerhalb eines Block-Containers fließen.
INFO
Moderne Browser unterstützen die Eigenschaft writing-mode vollständig ohne Vendor-Prefixes.
| Anfangswert | horizontal-tb |
|---|---|
| Anwendbar auf | Alle Elemente außer Tabellenreihengruppen, Tabellenspaltengruppen, Tabellenzeilen, Tabellenzellen, Ruby-Base-Container und Ruby-Annotation-Container. |
| Vererbbar | Ja. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.writingMode = "vertical-lr"; |
Syntax
CSS writing-mode-Werte
writing-mode: horizontal-tb | vertical-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;Beispiel für die writing-mode-Eigenschaft 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 für die writing-mode-Eigenschaft 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 für die writing-mode-Eigenschaft 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>Werte
| Wert | Beschreibung |
|---|---|
| horizontal-tb | Der Inhalt fließt horizontal von links nach rechts und vertikal von oben nach unten. |
| vertical-tb | Ein moderner Alias für horizontal-tb. Der Inhalt fließt horizontal von links nach rechts und vertikal von oben nach unten. |
| vertical-rl | Der Inhalt fließt vertikal von oben nach unten und horizontal 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 werden seitlich nach rechts ausgerichtet. |
| sideways-lr | In CSS Writing Modes Level 3 veraltet. Der Inhalt fließt vertikal von oben nach unten und alle Glyphen werden seitlich nach links ausgerichtet. |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Practice
writing-mode:vertical-rl bedeutet, dass der Inhalt fließt