Flusslayout und Schreibrichtungen

Die CSS 2.1-Spezifikation, die beschreibt, wie der normale Fluss funktioniert, geht von einem horizontalen Schreibmodus aus. Layout Eigenschaften sollten in vertikalen Schreibrichtungen auf die gleiche Weise funktionieren. In diesem Leitfaden betrachten wir, wie sich das Flusslayout verhält, wenn es mit verschiedenen Dokumentenschreibrichtungen verwendet wird.

Dies ist kein umfassender Leitfaden zur Verwendung von Schreibrichtungen in CSS, das Ziel hier ist es, die Bereiche zu dokumentieren, in denen das Flusslayout möglicherweise unerwartet mit Schreibrichtungen interagiert. Der Abschnitt Siehe auch bietet Links zu weiteren Ressourcen über Schreibrichtungen.

Schreibrichtungsspezifikation

Die CSS Writing Modes Level 3 Specification definiert die Auswirkungen, die eine Änderung der Dokumentenschreibrichtung auf das Flusslayout hat. In der Einführung der Schreibrichtungen sagt die Spezifikation,

"Eine Schreibrichtung in CSS wird durch die Eigenschaften writing-mode, direction und text-orientation bestimmt. Sie wird hauptsächlich in Bezug auf ihre Inline-Basisrichtung und Blockflussrichtung definiert."

Die Spezifikation definiert die Inline-Basisrichtung als die Richtung, in der der Inhalt in einer Zeile angeordnet ist. Dies definiert den Anfang und das Ende der Inline-Richtung. Der Start ist dort, wo Sätze beginnen, und das Ende ist dort, wo eine Textzeile endet, bevor sie auf eine neue Zeile umbricht.

Die Blockflussrichtung ist die Richtung, in der Boxen, beispielsweise Paragraphen, in dieser Schreibrichtung gestapelt werden. Die CSS-Eigenschaft writing-mode steuert die Blockflussrichtung. Wenn Sie Ihre Seite oder einen Teil Ihrer Seite auf vertical-lr ändern möchten, können Sie writing-mode: vertical-lr auf das Element setzen, und dies ändert die Richtung der Blöcke und somit auch die Inline-Richtung.

Während bestimmte Sprachen einen bestimmten Schreibmodus oder eine Textausrichtung verwenden, können wir diese Eigenschaften auch kreativ nutzen, zum Beispiel um eine Überschrift vertikal laufen zu lassen.

html
<div class="box">
  <h1>A heading</h1>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
</div>
css
body {
  font: 1.2em sans-serif;
}
h1 {
  writing-mode: vertical-lr;
  float: left;
}

Blockflussrichtung

Die writing-mode Eigenschaft akzeptiert die Werte horizontal-tb, vertical-rl und vertical-lr. Diese Werte steuern die Richtung, in der Blöcke auf der Seite fließen. Der Anfangswert ist horizontal-tb, was eine von oben nach unten gerichtete Blockflussrichtung mit einer horizontalen Inline-Richtung ist. Links-nach-rechts-Sprachen, wie Englisch, und Rechts-nach-links-Sprachen, wie Arabisch, sind alle horizontal-tb.

Das folgende Beispiel zeigt Blöcke, die den Anfangswert horizontal-tb explizit verwenden:

html
<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>
css
body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: horizontal-tb;
}

Vergleichen Sie dies mit dem Wert vertical-rl, der Ihnen eine von rechts-nach-links gerichtete Blockflussrichtung mit einer vertikalen Inline-Richtung gibt, wie im nächsten Beispiel gezeigt.

css
body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: vertical-rl;
}

Das letzte Beispiel demonstriert den dritten möglichen Wert für writing-mode — vertical-lr. Dies gibt Ihnen eine von links-nach-rechts gerichtete Blockflussrichtung und eine vertikale Inline-Richtung.

css
body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: vertical-lr;
}

Verschachtelte Schriebmodi

Wenn einer verschachtelten Box eine andere Schreibrichtung als ihrem übergeordneten Element zugewiesen wird, wird eine Inline-Level-Box so angezeigt, als hätte sie display: inline-block.

html
<div class="box">
  <p>
    One <span>November</span> night in the year 1782, so the story runs, two
    brothers sat over their winter fire in the little French town of Annonay,
    watching the grey smoke-wreaths from the hearth curl up the wide chimney.
    Their names were Stephen and Joseph Montgolfier, they were papermakers by
    trade, and were noted as possessing thoughtful minds and a deep interest in
    all scientific knowledge and new discovery.
  </p>
</div>
css
body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: vertical-rl;
}
.box span {
  writing-mode: horizontal-tb;
  padding: 10px;
  border: 1px solid rebeccapurple;
}

Eine Block-Level-Box wird einen neuen Block-Formatierungskontext etablieren, was bedeutet, dass, wenn ihr innerer Anzeigetyp flow wäre, sie einen berechneten Anzeigetyp von flow-root erhalten wird. Dies wird im nächsten Beispiel gezeigt, bei dem die Box, die als horizontal-tb angezeigt wird, ein Float enthält, das aufgrund ihres übergeordneten Elements einen neuen BFC etabliert.

html
<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>

  <div>
    <div class="float"></div>
    This box should establish a new BFC.
  </div>

  <p>
    Their names were Stephen and Joseph Montgolfier, they were papermakers by
    trade, and were noted as possessing thoughtful minds and a deep interest in
    all scientific knowledge and new discovery.
  </p>
</div>
css
body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: vertical-rl;
}
.box > div {
  writing-mode: horizontal-tb;
  padding: 10px;
  border: 1px solid rebeccapurple;
}
.float {
  width: 100px;
  height: 150px;
  background-color: rebeccapurple;
  float: left;
}

Ersetzte Elemente

Ersetzte Elemente wie Bilder werden ihre Ausrichtung basierend auf der writing-mode Eigenschaft nicht ändern. Ersetzte Elemente, wie Formularelemente, die Text enthalten, sollten jedoch mit der verwendeten Schreibrichtung übereinstimmen.

html
<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>

  <img
    alt="a colorful hot air balloon against a clear sky"
    src="https://mdn.github.io/shared-assets/images/examples/balloon.jpg" />

  <p>
    Their names were Stephen and Joseph Montgolfier, they were papermakers by
    trade, and were noted as possessing thoughtful minds and a deep interest in
    all scientific knowledge and new discovery.
  </p>
</div>
css
body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: vertical-rl;
}

Logische Eigenschaften und Werte

Sobald Sie in anderen Schreibrichtungen als horizontal-tb arbeiten, erscheinen viele der Eigenschaften und Werte, die auf die physischen Dimensionen des Bildschirms abgebildet sind, seltsam. Wenn Sie zum Beispiel einer Box eine Breite von 100px geben, kontrolliert das in horizontal-tb die Größe in der Inline-Richtung. In vertical-lr kontrolliert es die Größe in der Blockrichtung, weil es sich nicht mit dem Text dreht.

html
<div class="box">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>
css
body {
  font: 1.2em sans-serif;
}
.box1 {
  writing-mode: horizontal-tb;
  border: 5px solid rebeccapurple;
  width: 100px;
  margin: 10px;
}
.box2 {
  writing-mode: vertical-lr;
  border: 5px solid rebeccapurple;
  width: 100px;
  margin: 10px;
}

Daher haben wir neue Eigenschaften von block-size und inline-size. Wenn wir unserem Block eine inline-size von 100px geben, ist es egal, ob wir in einem horizontalen oder einem vertikalen Schreibmodus sind, inline-size bedeutet immer die Größe in der Inline-Richtung.

html
<div class="box">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>
css
body {
  font: 1.2em sans-serif;
}
.box1 {
  writing-mode: horizontal-tb;
  border: 5px solid rebeccapurple;
  inline-size: 100px;
  margin: 10px;
}
.box2 {
  writing-mode: vertical-lr;
  border: 5px solid rebeccapurple;
  inline-size: 100px;
  margin: 10px;
}

Das Modul CSS logische Eigenschaften und Werte enthält logische Versionen der Eigenschaften, die Ränder, Abstände und Ränder sowie andere Zuordnungen steuern, für die wir typischerweise physische Richtungen angegeben haben.

Zusammenfassung

In den meisten Fällen funktioniert das Flusslayout so, wie Sie es erwarten würden, wenn Sie die Schreibrichtung des Dokuments oder Teile des Dokuments ändern. Dies kann verwendet werden, um vertikale Sprachen richtig zu setzen oder aus kreativen Gründen. CSS macht dies einfacher, indem logische Eigenschaften und Werte eingeführt werden, sodass bei der Arbeit in einem vertikalen Schreibmodus die Größenzuordnung auf der Inline- und Blockgröße des Elements basieren kann. Dies wird nützlich sein, wenn Sie Komponenten erstellen, die in verschiedenen Schreibrichtungen funktionieren können.

Siehe auch