Inline-Formatierungskontext

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

• In einem horizontalen Schreibmodus werden Boxen horizontal, beginnend von links, angeordnet.
• In einem vertikalen Schreibmodus würden sie vertikal, beginnend am oberen Rand, angeordnet werden.

Im folgenden 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 horizontale 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, genannt "Line Box", umschlossen. Diese Box wird groß genug sein, um alle Inline-Boxen in dieser Zeile zu enthalten; wenn im Inline-Modus kein Platz mehr ist, wird eine weitere Zeile erstellt. Daher ist ein Absatz eine Reihe von Inline-Line-Boxen, die in Blockrichtung gestapelt sind.

Wenn eine Inline-Box geteilt wird, haben Ränder, Rahmen und Abstände dort, wo die Teilung stattfindet, keinen visuellen Effekt. Im nächsten Beispiel gibt es ein <span>-Element, das eine Reihe von Wörtern umschließt, die auf zwei Zeilen umbrechen. Der Rahmen auf dem <span> bricht an der Umbruchstelle.

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

Ränder, Rahmen und Abstände in Inline-Richtung werden berücksichtigt. Im untenstehenden Beispiel können Sie sehen, wie der Rand, der Rahmen und der Abstand auf das Inline-<span>-Element angewendet 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 Weisen ausgerichtet werden, unter Verwendung der vertical-align-Eigenschaft, die in vertikalen Schreibmodi auf der Blockachse (daher überhaupt nicht vertikal!) ausgerichtet wird. Im untenstehenden Beispiel macht der große Text die Line-Box des ersten Satzes größer, daher kann die vertical-align-Eigenschaft verwendet werden, um die Inline-Boxen beiderseits 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 Inline-Richtung zusätzlicher Platz vorhanden ist, kann die text-align-Eigenschaft verwendet werden, um die Inline-Boxen innerhalb ihrer Line-Box 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;
}

Line-Boxen haben normalerweise die gleiche Größe in Inline-Richtung, 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-Formatierungskontextes vorhanden ist, führt das Float dazu, dass die Line-Boxen, die das Float umfließ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