Contexte de formatage en incise

Concepts de base

Le contexte de formatage en incise fait partie du rendu visuel d'une page web. Les boîtes en incise sont disposées les unes après les autres, dans la direction dans laquelle les phrases s'écoulent selon le mode d'écriture utilisé :

• Dans un mode d'écriture horizontal, les boîtes sont disposées horizontalement, en commençant par la gauche.
• Dans un mode d'écriture vertical, elles sont disposées verticalement en commençant par le haut.

Dans l'exemple ci-dessous, les deux éléments HTML <div> avec les bordures noires font partie d'un contexte de formatage en bloc, tandis qu'à l'intérieur de chaque boîte, les mots participent à un contexte de formatage en incise. Les mots dans le mode d'écriture horizontal s'écoulent horizontalement, tandis que les mots dans le mode d'écriture vertical s'écoulent verticalement.

<div class="exemple horizontal">Un Deux Trois</div>
<div class="exemple vertical">Quatre Cinq Six</div>

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

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

Les boîtes formant une ligne sont contenues dans une zone rectangulaire appelée boîte de ligne. Cette boîte est assez grande pour contenir toutes les boîtes en incise dans cette ligne ; lorsqu'il n'y a plus de place dans la direction en incise, une autre ligne est créée. Par conséquent, un paragraphe est un ensemble de boîtes de ligne en incise, empilées dans la direction en bloc.

Lorsqu'une boîte en incise est coupée, les marges, les bordures et les rembourrages n'ont aucun effet visuel où le coupure se produit. Dans l'exemple suivant, il y a un élément HTML <span> qui entoure un ensemble de mots qui s'enroulent sur deux lignes. La bordure sur le <span> se brise au point d'enroulement.

<div class="exemple">
  Avant cette nuit —
  <span
    >une nuit mémorable, comme il allait le prouver — des centaines de millions
    de personnes</span
  >
  avaient regardé les volutes de fumée s'élever de leurs feux sans en tirer une
  inspiration particulière.
</div>

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

span {
  border: 5px solid rebeccapurple;
}

Les marges, bordures et les remplissages dans la direction en incise sont respectés. Dans l'exemple ci-dessous, vous pouvez voir comment la marge, la bordure et le remplissage sur l'élément <span> en incise sont ajoutés.

<div class="exemple horizontal">Un <span>Deux</span> Trois</div>
<div class="exemple vertical">Quatre <span>Cinq</span> Six</div>

body {
  font: 1.2em sans-serif;
}

.exemple {
  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;
}

Aligner dans la direction du bloc

Les boîtes en incises peuvent être alignées dans la direction du bloc de différentes manières, en utilisant la propriété vertical-align, qui aligne sur l'axe du bloc dans les modes d'écriture verticaux (donc pas du tout verticalement !). Dans l'exemple ci-dessous, le grand texte fait augmenter la taille de la boîte en incise de la première phrase, par conséquent la propriété vertical-align peut être utilisée pour aligner les boîtes en incise de chaque côté de lui. Nous utilisons la valeur top, essayez de la changer en middle, bottom ou baseline.

<div class="exemple horizontal">
  Avant cette nuit —
  <span
    >une nuit mémorable, comme il allait le prouver — des centaines de millions
    de personnes</span
  >
  avaient regardé les volutes de fumée s'élever de leurs feux sans en tirer une
  inspiration particulière.
</div>

<div class="exemple vertical">
  Avant cette nuit —
  <span
    >une nuit mémorable, comme il allait le prouver — des centaines de millions
    de personnes</span
  >
  avaient regardé les volutes de fumée s'élever de leurs feux sans en tirer une
  inspiration particulière.
</div>

body {
  font: 1.2em sans-serif;
}

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

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

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

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

Aligner dans la direction en incise

S'il y a de l'espace supplémentaire dans la direction en incise, la propriété text-align peut être utilisée pour aligner les boîtes en incise à l'intérieur de leur boîte de ligne. Essayez de changer la valeur de text-align ci-dessous en end.

<div class="exemple horizontal">Un Deux Trois</div>
<div class="exemple vertical">Quatre Cinq Six</div>

body {
  font: 1.2em sans-serif;
}

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

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

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

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

Effet des éléments flottants

Les boîtes en incise ont généralement la même taille dans la direction en incise, donc la même largeur si on travaille dans un mode d'écriture horizontal, ou la même hauteur si on travaille dans un mode d'écriture vertical. Cependant, si il y a un float dans le même contexte de formatage en bloc, le flottant fait que les boîtes en incise qui entourent le flottant deviennent plus courtes.

<div class="boite">
  <div class="flottant">Je suis une boîte flottante&nbsp;!</div>
  <p>Je suis le contenu à l'intérieur du conteneur.</p>
</div>

body {
  font: 1.2em sans-serif;
}

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

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

Voir aussi

• Contexte de formatage en bloc
• Modèle de formatage visuel