writing-mode
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.
* Some parts of this feature may have varying levels of support.
Die writing-mode
CSS Eigenschaft legt fest, ob Textzeilen horizontal oder vertikal angeordnet werden, sowie die Richtung, in der sich Blöcke fortsetzen. Wenn es für ein gesamtes Dokument festgelegt wird, sollte es auf dem Root-Element (dem html
-Element für HTML-Dokumente) gesetzt werden.
Probieren Sie es aus
Diese Eigenschaft spezifiziert die Blockflussrichtung, also die Richtung, in der Block-Container gestapelt werden, und die Richtung, in der Inline-Inhalte innerhalb eines Block-Containers fließen. Sie bestimmt daher auch die Anordnung der Block-Inhalte.
Syntax
/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;
/* Global values */
writing-mode: inherit;
writing-mode: initial;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;
Die writing-mode
Eigenschaft wird als einer der unten aufgeführten Werte angegeben. Die Flussrichtung in horizontalen Schriften wird auch von der Richtung dieser Schrift beeinflusst, entweder von links nach rechts (ltr
, wie Englisch und die meisten anderen Sprachen) oder von rechts nach links (rtl
, wie Hebräisch oder Arabisch).
Werte
horizontal-tb
-
Für
ltr
-Schriften fließt der Inhalt horizontal von links nach rechts. Fürrtl
-Schriften fließt der Inhalt horizontal von rechts nach links. Die nächste horizontale Zeile wird unterhalb der vorherigen Zeile positioniert. vertical-rl
-
Für
ltr
-Schriften fließt der Inhalt vertikal von oben nach unten, und die nächste vertikale Zeile wird links von der vorherigen Zeile positioniert. Fürrtl
-Schriften fließt der Inhalt vertikal von unten nach oben, und die nächste vertikale Zeile wird rechts von der vorherigen Zeile positioniert. vertical-lr
-
Für
ltr
-Schriften fließt der Inhalt vertikal von oben nach unten, und die nächste vertikale Zeile wird rechts von der vorherigen Zeile positioniert. Fürrtl
-Schriften fließt der Inhalt vertikal von unten nach oben, und die nächste vertikale Zeile wird links von der vorherigen Zeile positioniert. sideways-rl
-
Für
ltr
-Schriften fließt der Inhalt vertikal von oben nach unten. Fürrtl
-Schriften fließt der Inhalt vertikal von unten nach oben. Alle Schriftzeichen, auch die in vertikalen Schriften, sind seitlich nach rechts ausgerichtet. sideways-lr
-
Für
ltr
-Schriften fließt der Inhalt vertikal von unten nach oben. Fürrtl
-Schriften fließt der Inhalt vertikal von oben nach unten. Alle Schriftzeichen, auch die in vertikalen Schriften, sind seitlich nach links ausgerichtet. lr
-
Veraltet, außer für SVG1-Dokumente. Für CSS stattdessen
horizontal-tb
verwenden. lr-tb
-
Veraltet, außer für SVG1-Dokumente. Für CSS stattdessen
horizontal-tb
verwenden. rl
-
Veraltet, außer für SVG1-Dokumente. Für CSS stattdessen
horizontal-tb
verwenden. tb
-
Veraltet, außer für SVG1-Dokumente. Für CSS stattdessen
vertical-lr
verwenden. tb-lr
Veraltet-
Veraltet, außer für SVG1-Dokumente. Für CSS stattdessen
vertical-lr
verwenden. tb-rl
-
Veraltet, außer für SVG1-Dokumente. Für CSS stattdessen
vertical-rl
verwenden.
Formale Definition
Anfangswert | horizontal-tb |
---|---|
Anwendbar auf | alle Elemente außer Tabellenzeilengruppen, Tabellenspaltengruppen, Tabellenzeilen und Tabellenspalten |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | Not animatable |
Formale Syntax
Beispiele
Verwendung mehrerer Schreibmodi
Dieses Beispiel zeigt alle Schreibmodi, wobei jeder mit Text in verschiedenen Sprachen dargestellt wird.
HTML
Das HTML ist ein <table>
, in dem jeder Schreibmodus in einer Zeile mit einer Spalte angezeigt wird, die Text in verschiedenen Schriften mit diesem Schreibmodus verwendet.
<table>
<caption>
Using multiple writing modes
</caption>
<tr>
<th>Value</th>
<th>Vertical script</th>
<th>Horizontal (LTR) script</th>
<th>Horizontal (RTL) script</th>
<th>Mixed script</th>
</tr>
<tr class="text1">
<th>horizontal-tb</th>
<td>我家没有电脑。</td>
<td>Example text</td>
<td>מלל ארוך לדוגמא</td>
<td>1994年に至っては</td>
</tr>
<tr class="text2">
<th>vertical-lr</th>
<td>我家没有电脑。</td>
<td>Example text</td>
<td>מלל ארוך לדוגמא</td>
<td>1994年に至っては</td>
</tr>
<tr class="text3">
<th>vertical-rl</th>
<td>我家没有电脑。</td>
<td>Example text</td>
<td>מלל ארוך לדוגמא</td>
<td>1994年に至っては</td>
</tr>
<tr class="experimental text4">
<th>sideways-lr</th>
<td>我家没有电脑。</td>
<td>Example text</td>
<td>מלל ארוך לדוגמא</td>
<td>1994年に至っては</td>
</tr>
<tr class="experimental text5">
<th>sideways-rl</th>
<td>我家没有电脑。</td>
<td>Example text</td>
<td>מלל ארוך לדוגמא</td>
<td>1994年に至っては</td>
</tr>
</table>
<p class="notice">
Your browser does not support the <code>sideways-lr</code> or
<code>sideways-rl</code> values.
</p>
CSS
Das CSS, das die Richtung des Inhalts anpasst, sieht so aus:
.text1 td {
writing-mode: horizontal-tb;
}
.text2 td {
writing-mode: vertical-lr;
}
.text3 td {
writing-mode: vertical-rl;
}
.text4 td {
writing-mode: sideways-lr;
}
.text5 td {
writing-mode: sideways-rl;
}
Ergebnis
Verwendung von writing-mode mit Transformationen
Wenn Ihr Browser sideways-lr
nicht unterstützt, besteht ein Workaround darin, transform
zu verwenden, um einen ähnlichen Effekt in Abhängigkeit von der Schreibrichtung zu erzielen. Der Effekt von vertical-rl
ist derselbe wie bei sideways-lr
, sodass für Schriften von links nach rechts keine Transformation erforderlich ist. In einigen Fällen genügt es, den Text um 180 Grad zu drehen, um den Effekt von sideways-lr
zu erzielen, aber Schriftzeichen können möglicherweise nicht für eine Drehung ausgelegt sein, was zu unerwarteter Positionierung oder Darstellung führen kann.
HTML
<table>
<caption>
Using writing-mode with transforms
</caption>
<thead>
<tr>
<th>Vertical LR</th>
<th>Vertical LR with transform</th>
<th>Sideways LR</th>
<th>Only rotate</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="vertical-lr">我家没有电脑。</span>
<span class="vertical-lr">Example text</span>
</td>
<td>
<span class="vertical-lr rotated">我家没有电脑。</span>
<span class="vertical-lr rotated">Example text</span>
</td>
<td>
<span class="sideways-lr">我家没有电脑。</span>
<span class="sideways-lr">Example text</span>
</td>
<td>
<span class="only-rotate">我家没有电脑。</span>
<span class="only-rotate">Example text</span>
</td>
</tr>
</tbody>
</table>
CSS
.vertical-lr {
writing-mode: vertical-lr;
}
.rotated {
transform: rotate(180deg);
}
.sideways-lr {
writing-mode: sideways-lr;
}
.only-rotate {
inline-size: fit-content;
transform: rotate(-90deg);
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Writing Modes Level 4 # block-flow |
Scalable Vector Graphics (SVG) 2 # WritingModeProperty |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
writing-mode | ||||||||||||
horizontal-tb | ||||||||||||
lr | ||||||||||||
lr-tb | ||||||||||||
rl | ||||||||||||
rl-tb | ||||||||||||
sideways-lr | ||||||||||||
sideways-rl | ||||||||||||
tb | ||||||||||||
tb-rl | ||||||||||||
vertical-lr | ||||||||||||
vertical-rl | ||||||||||||
Vertically-oriented form controls |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- In development. Supported in a pre-release version.
- In development. Supported in a pre-release version.
- No support
- No support
- Deprecated. Not for use in new websites.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.