Inline-Formatierungskontext

Dieser Leitfaden erklärt den Inline-Formatierungskontext.

Grundlegende Konzepte

Der Inline-Formatierungskontext ist Teil der visuellen Darstellung einer Webseite. Inline-Boxen werden nacheinander in der Richtung des Satzverlaufs im verwendeten Schreibmodus angeordnet:

  • In einem horizontalen Schreibmodus werden Boxen horizontal, beginnend auf der linken Seite, angeordnet.
  • In einem vertikalen Schreibmodus würden sie vertikal, beginnend oben, angeordnet.

Im folgenden Beispiel sind die zwei <div>-Elemente mit den schwarzen Rändern Teil eines Block-Formatierungskontexts, während innerhalb jeder Box die Wörter an einem Inline-Formatierungskontext teilnehmen. Die Wörter im horizontalen Schreibmodus verlaufen horizontal, während die Wörter im vertikalen Schreibmodus vertikal verlaufen.

html
<div class="example horizontal">One Two Three</div>
<div class="example vertical">Four Five Six</div>
css
body {
  font: 1.2em sans-serif;
}
.example {
  border: 5px solid black;
  margin: 20px;
}

.horizontal {
  writing-mode: horizontal-tb;
}
.vertical {
  writing-mode: vertical-rl;
}

Boxen, die eine Linie bilden, sind von einem rechteckigen Bereich, dem sogenannten Linienkasten, umschlossen. Dieser Kasten wird groß genug sein, um alle Inline-Boxen in dieser Linie zu enthalten; wenn im Inline-Dimension kein weiterer Platz ist, wird eine weitere Linie erstellt. Daher ist ein Absatz eine Reihe von Inline-Linienkästen, die in der Block-Dimension gestapelt sind.

Wenn eine Inline-Box geteilt wird, haben Ränder, Rahmen und Abstände dort, wo die Teilung erfolgt, keine visuelle Wirkung. Im nächsten Beispiel gibt es ein <span>-Element, das eine Reihe von Wörtern umschließt, die sich auf zwei Linien verteilen. Der Rahmen auf dem <span> bricht an der Umbruchstelle.

html
<div class="example">
  Before that night—
  <span
    >a memorable night, as it was to prove— hundreds of millions of people</span
  >
  had watched the rising smoke-wreaths of their fires without drawing any
  special inspiration from the fact.
</div>
css
body {
  font: 1.2em sans-serif;
}
.example {
  border: 5px solid black;
  margin: 20px;
}

span {
  border: 5px solid rebeccapurple;
}

Ränder, Rahmen und Abstände in der Inline-Dimension werden respektiert. Im folgenden Beispiel können Sie sehen, wie der Rand, der Rahmen und der Abstand auf dem Inline-<span>-Element hinzugefügt werden.

html
<div class="example horizontal">One <span>Two</span> Three</div>
<div class="example vertical">Four <span>Five</span> Six</div>
css
body {
  font: 1.2em sans-serif;
}

.example {
  border: 5px solid black;
  margin: 20px;
}

span {
  border: 5px solid rebeccapurple;
  padding-inline-start: 20px;
  padding-inline-end: 40px;
  margin-inline-start: 30px;
  margin-inline-end: 10px;
}
.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}

Hinweis: Ich verwende die logischen, flussrelativen Eigenschaften — padding-inline-start anstelle von padding-left — damit sie in der Inline-Dimension funktionieren, unabhängig davon, ob der Text horizontal oder vertikal ist. Lesen Sie mehr über diese Eigenschaften in Logische Eigenschaften und Werte.

Ausrichtung in der Block-Dimension

Inline-Boxen können in der Block-Dimension auf verschiedene Weise ausgerichtet werden, indem die vertical-align-Eigenschaft verwendet wird, die auf der Block-Achse in vertikalen Schreibmodi ausrichtet (daher überhaupt nicht vertikal!). Im folgenden Beispiel macht der große Text den Linienkasten des ersten Satzes größer, daher kann die vertical-align-Eigenschaft verwendet werden, um die Inline-Boxen auf beiden Seiten davon auszurichten. Ich habe den Wert top verwendet; versuchen Sie, ihn auf middle, bottom oder baseline zu ändern.

html
<div class="example horizontal">
  Before that night—<span>a memorable night</span>, 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.
</div>

<div class="example vertical">
  Before that night—<span>a memorable night</span>, 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.
</div>
css
body {
  font: 1.2em sans-serif;
}

span {
  font-size: 200%;
  vertical-align: top;
}

.example {
  border: 5px solid black;
  margin: 20px;
  inline-size: 400px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}

Ausrichtung in der Inline-Dimension

Falls es zusätzlichen Platz in der Inline-Dimension gibt, kann die text-align-Eigenschaft verwendet werden, um die Inline-Boxen innerhalb ihres Linienkastens auszurichten. Versuchen Sie, den Wert von text-align unten auf end zu ändern.

html
<div class="example horizontal">One Two Three</div>
<div class="example vertical">Four Five Six</div>
css
.example {
  text-align: center;
  inline-size: 250px;
}

Effekt von Floats

Linienkästen haben normalerweise die gleiche Größe in der Inline-Dimension, daher die gleiche Breite, wenn im horizontalen Schreibmodus gearbeitet wird, oder Höhe, wenn im vertikalen Schreibmodus gearbeitet wird. Wenn jedoch ein float innerhalb desselben Block-Formatierungskontexts vorhanden ist, führt der Float dazu, dass die Linienkästen, die den Float umschließen, kürzer werden.

html
<div class="box">
  <div class="float">I am a floated box!</div>
  <p>I am content inside the container.</p>
</div>
css
body {
  font: 1.2em sans-serif;
}

.box {
  background-color: rgb(224 206 247);
  border: 5px solid rebeccapurple;
}

.float {
  float: left;
  width: 250px;
  height: 150px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}

Siehe auch