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 Blöcke fortschreiten. Wenn sie für ein gesamtes Dokument festgelegt wird, sollte sie auf dem Wurzelelement gesetzt werden (dem html Element für HTML-Dokumente).

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 class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <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;
  display: flex;
}

#example-element > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex: 1;
}

Diese Eigenschaft legt die Fließrichtung der Blöcke fest, also die Richtung, in die blockstufige Container gestapelt werden, und die Richtung, in die Inline-Inhalte innerhalb eines Blockcontainers fließen. Sie bestimmt somit auch die Anordnung von blockstufigen Inhalten.

Syntax

css
/* 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 Fließrichtung in horizontalen Skripten wird auch von der Richtung 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

Für ltr Skripte fließt der Inhalt horizontal von links nach rechts. Für rtl Skripte fließt der Inhalt horizontal von rechts nach links. Die nächste horizontale Zeile wird unter der vorherigen Zeile positioniert.

vertical-rl

Für ltr Skripte fließt der Inhalt vertikal von oben nach unten, und die nächste vertikale Zeile wird links von der vorherigen Zeile positioniert. Für rtl Skripte 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 Skripte fließt der Inhalt vertikal von oben nach unten, und die nächste vertikale Zeile wird rechts von der vorherigen Zeile positioniert. Für rtl Skripte 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 Skripte fließt der Inhalt vertikal von oben nach unten. Für rtl Skripte fließt der Inhalt vertikal von unten nach oben. Alle Glyphen, selbst die in vertikalen Skripten, werden seitlich nach rechts ausgerichtet.

sideways-lr

Für ltr Skripte fließt der Inhalt vertikal von unten nach oben. Für rtl Skripte fließt der Inhalt vertikal von oben nach unten. Alle Glyphen, selbst die in vertikalen Skripten, werden seitlich nach links ausgerichtet.

lr

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

lr-tb

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

rl

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

tb

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

tb-lr

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

tb-rl

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

Formale Definition

Anfangswerthorizontal-tb
Anwendbar aufalle Elemente außer Tabellenzeilengruppen, Tabellenspaltengruppen, Tabellenzeilen und Tabellenspalten
VererbtJa
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

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

Beispiele

Verwendung mehrerer Schreibmodi

Dieses Beispiel demonstriert alle Schreibmodi, wobei jeder mit Text in verschiedenen Sprachen gezeigt wird.

HTML

Das HTML ist eine <table> mit jedem Schreibmodus in einer Zeile, wobei eine Spalte Text in verschiedenen Skripten mit diesem Schreibmodus zeigt.

html
<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:

css
.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, gibt es einen Workaround mit transform, um einen ähnlichen Effekt abhängig von der Skriptrichtung zu erzielen. Der Effekt von vertical-rl ist derselbe wie bei sideways-lr, sodass für von links nach rechts laufende Skripte keine Transformation erforderlich ist. In einigen Fällen reicht es aus, den Text um 180 Grad zu drehen, um den Effekt von sideways-lr zu erzielen, aber die Schriftzeichen sind möglicherweise nicht zum Drehen konzipiert, wodurch unerwartete Positionierungen oder Darstellungen entstehen können.

HTML

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

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

BCD tables only load in the browser

Siehe auch