Inline-Formatierungskontext

Der Inline-Formatierungskontext ist Teil der visuellen Darstellung einer Webseite. Inline-Boxen werden hintereinander in der Richtung angeordnet, in der die Sätze im verwendeten Schreibmodus verlaufen:

• In einem horizontalen Schreibmodus werden Boxen horizontal von links nach rechts angeordnet.
• In einem vertikalen Schreibmodus würden sie vertikal von oben nach unten angeordnet.

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

<div class="example horizontal">One Two Three</div>
<div class="example vertical">Four Five Six</div>

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 Zeile bilden, werden von einem rechteckigen Bereich namens Zeilenbox umschlossen. Diese Box wird groß genug sein, um alle Inline-Boxen in dieser Zeile zu enthalten; wenn in der Inline-Richtung kein Platz mehr ist, wird eine neue Zeile erstellt. Daher ist ein Absatz eine Reihe von Inline-Zeilenboxen, die in der Blockrichtung gestapelt sind.

Wenn eine Inline-Box geteilt wird, haben Abstände, Ränder und Innenabstände keinen visuellen Effekt an der Stelle, an der die Teilung erfolgt. Im nächsten Beispiel gibt es ein <span>-Element, das eine Reihe von Wörtern umschließt, die auf zwei Zeilen umgebrochen werden. Der Rahmen auf dem <span> wird an der Umbruchsstelle unterbrochen.

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

body {
  font: 1.2em sans-serif;
}
.example {
  border: 5px solid black;
  margin: 20px;
}

span {
  border: 5px solid rebeccapurple;
}

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

<div class="example horizontal">One <span>Two</span> Three</div>
<div class="example vertical">Four <span>Five</span> Six</div>

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;
}

Inline-Boxen können in der Blockrichtung auf verschiedene Weise ausgerichtet werden, indem die vertical-align-Eigenschaft verwendet wird, die auf der Blockachse in vertikalen Schreibmodi ausgerichtet wird (also überhaupt nicht vertikal!). Im untenstehenden Beispiel macht der große Text die Zeilenbox 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.

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

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;
}

Wenn in der Inline-Richtung zusätzlicher Platz vorhanden ist, kann die text-align-Eigenschaft verwendet werden, um die Inline-Boxen innerhalb ihrer Zeilenbox auszurichten. Versuchen Sie, den Wert von text-align unten auf end zu ändern.

<div class="example horizontal">One Two Three</div>
<div class="example vertical">Four Five Six</div>

body {
  font: 1.2em sans-serif;
}

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

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

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

.example {
  text-align: center;
  inline-size: 250px;
}

Zeilenboxen haben in der Regel die gleiche Größe in der Inline-Richtung, also dieselbe Breite, wenn in einem horizontalen Schreibmodus gearbeitet wird, oder dieselbe Höhe, wenn in einem vertikalen Schreibmodus gearbeitet wird. Wenn jedoch innerhalb desselben Block-Formatierungskontextes ein float vorhanden ist, verursacht das Float, dass die Zeilenboxen, die das Float umschließen, kürzer werden.

<div class="box">
  <div class="float">I am a floated box!</div>
  <p>I am content inside the container.</p>
</div>

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;
}

• Block-Formatierungskontext
• Visuelles Formatierungsmodell