Diewriting-modeCSS Eigenschaft legt fest, ob Textzeilen horizontal oder vertikal angeordnet werden sowie die Richtung, in der sich Blöcke fortbewegen. Wenn sie für ein gesamtes Dokument festgelegt wird, sollte sie auf dem Wurzelelement (demhtml-Element für HTML-Dokumente) gesetzt werden.

Probieren Sie es aus

writing-mode: horizontal-tb;

writing-mode: vertical-lr;

writing-mode: vertical-rl;

writing-mode: sideways-rl;

writing-mode: sideways-lr;

<section>  <div>    <div>1</div>    <div>2</div>    <div>3</div>    <div>4</div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  padding: 0.75em;  width: 80%;  max-height: 300px;}#example-element > div {  background-color: rgb(0 0 255 / 0.2);  border: 3px solid blue;  margin: 10px;}

Diese Eigenschaft gibt dieAusrichtungsrichtung von Blöcken an, also die Richtung, in der Block-Container gestapelt werden, sowie die Richtung, in der Inline-Inhalte innerhalb eines Block-Containers fließen. Somit bestimmt sie auch die Anordnung von Block-Inhalten.

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;

Diewriting-mode-Eigenschaft wird als einer der unten aufgeführten Werte angegeben. Die Flussrichtung in horizontalen Skripten wird auch von derDirektionalität dieses Skripts 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

Beiltr-Skripten fließt der Inhalt horizontal von links nach rechts. Beirtl-Skripten fließt der Inhalt horizontal von rechts nach links. Die nächste horizontale Zeile ist unter der vorherigen Zeile positioniert.

vertical-rl

Beiltr-Skripten fließt der Inhalt vertikal von oben nach unten, und die nächste vertikale Zeile ist links von der vorherigen Zeile positioniert. Beirtl-Skripten fließt der Inhalt vertikal von unten nach oben, und die nächste vertikale Zeile ist rechts von der vorherigen Zeile positioniert.

vertical-lr

Beiltr-Skripten fließt der Inhalt vertikal von oben nach unten, und die nächste vertikale Zeile ist rechts von der vorherigen Zeile positioniert. Beirtl-Skripten fließt der Inhalt vertikal von unten nach oben, und die nächste vertikale Zeile ist links von der vorherigen Zeile positioniert.

sideways-rl

Beiltr-Skripten fließt der Inhalt vertikal von oben nach unten. Beirtl-Skripten fließt der Inhalt vertikal von unten nach oben. Alle Glyphen, auch die in vertikalen Skripten, sind seitwärts nach rechts ausgerichtet.

sideways-lr

Beiltr-Skripten fließt der Inhalt vertikal von unten nach oben. Beirtl-Skripten fließt der Inhalt vertikal von oben nach unten. Alle Glyphen, auch die in vertikalen Skripten, sind seitwärts nach links ausgerichtet.

lr

Veraltet, außer für SVG1-Dokumente. Für CSS verwenden Sie stattdessenhorizontal-tb.

lr-tb

Veraltet, außer für SVG1-Dokumente. Für CSS verwenden Sie stattdessenhorizontal-tb.

rl

Veraltet, außer für SVG1-Dokumente. Für CSS verwenden Sie stattdessenhorizontal-tb.

tb

Veraltet, außer für SVG1-Dokumente. Für CSS verwenden Sie stattdessenvertical-lr.

tb-lrVeraltet

Veraltet, außer für SVG1-Dokumente. Für CSS verwenden Sie stattdessenvertical-lr.

tb-rl

Veraltet, außer für SVG1-Dokumente. Für CSS verwenden Sie stattdessenvertical-rl.

Formelle Definition

Formelle Syntax

writing-mode =
horizontal-tb|
vertical-rl|
vertical-lr|
sideways-rl|
sideways-lr

Beispiele

Verwendung mehrerer Schreibrichtungen

Dieses Beispiel demonstriert alle Schreibrichtungen, wobei jede mit Text in verschiedenen Sprachen gezeigt wird.

HTML

Das HTML ist eine<table> mit jeder Schreibrichtung in einer Zeile und einer Spalte, die Text in verschiedenen Skripten unter Verwendung dieser Schreibrichtung anzeigt.

<table>  <caption>    Using multiple writing modes  </caption>  <thead>    <tr>      <th>Value</th>      <th>Vertical script</th>      <th>Horizontal (LTR) script</th>      <th>Horizontal (RTL) script</th>      <th>Mixed script</th>    </tr>  </thead>  <tbody>    <tr>      <th>horizontal-tb</th>      <td>我家没有电脑。</td>      <td>Example text</td>      <td>מלל ארוך לדוגמא</td>      <td>1994年に至っては</td>    </tr>    <tr>      <th>vertical-lr</th>      <td>我家没有电脑。</td>      <td>Example text</td>      <td>מלל ארוך לדוגמא</td>      <td>1994年に至っては</td>    </tr>    <tr>      <th>vertical-rl</th>      <td>我家没有电脑。</td>      <td>Example text</td>      <td>מלל ארוך לדוגמא</td>      <td>1994年に至っては</td>    </tr>    <tr>      <th>sideways-lr</th>      <td>我家没有电脑。</td>      <td>Example text</td>      <td>מלל ארוך לדוגמא</td>      <td>1994年に至っては</td>    </tr>    <tr>      <th>sideways-rl</th>      <td>我家没有电脑。</td>      <td>Example text</td>      <td>מלל ארוך לדוגמא</td>      <td>1994年に至っては</td>    </tr>  </tbody></table><p>  Your browser does not support the <code>sideways-lr</code> or  <code>sideways-rl</code> values.</p>

CSS

table {  border-collapse: collapse;}td,th {  border: 2px black solid;  padding: 4px;}th {  background-color: lightgray;}.experimental {  display: none;}.notice {  display: table-row;  font-weight: bold;  text-align: center;}@supports (writing-mode: sideways-lr) {  .experimental {    display: table-row;  }  .notice {    display: none;  }}

Das CSS, das die Direktionalität des Inhalts anpasst, sieht folgendermaßen 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 Browsersideways-lr nicht unterstützt, besteht ein Workaround darin,transform zu verwenden, um je nach Schreibrichtung einen ähnlichen Effekt zu erzielen. Der Effekt vonvertical-rl ist derselbe wie beisideways-lr, sodass keine Transformation für von links nach rechts ausgerichtete Skripte erforderlich ist. In einigen Fällen reicht es aus, den Text um 180 Grad zu drehen, um den Effekt vonsideways-lr zu erzielen, aber Schriftarten-Glyphen sind möglicherweise nicht für das Drehen entworfen, sodass dies zu unerwarteten Positionierungen oder Darstellungen 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>我家没有电脑。</span>        <span>Example text</span>      </td>      <td>        <span>我家没有电脑。</span>        <span>Example text</span>      </td>      <td>        <span>我家没有电脑。</span>        <span>Example text</span>      </td>      <td>        <span>我家没有电脑。</span>        <span>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);}

table {  border-collapse: collapse;}td,th {  border: 2px black solid;  padding: 4px;}th {  background-color: lightgray;}span {  display: inline-block;  width: 1.5em;  text-align: center;}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• direction
• unicode-bidi
• text-orientation
• text-combine-upright
• CSS logische Eigenschaften
• CSS Schreibrichtungen Modul
• SVGwriting-mode Attribut
• Erstellen von vertikalen Formularelementen
• Umgang mit unterschiedlichen Schreibrichtungen
• Styling vertikalen Text (Chinesisch, Japanisch, Koreanisch und Mongolisch) auf W3.org (2022)