Contexte de formatage en ligne (inline/incise)

Le contexte de formatage en ligne est une des méthodes permettant de créer le rendu visuel d'une page web. Les boîtes en ligne sont disposées les unes après les autres selon le mode d'écriture utilisé :

• Pour un mode d'écriture horizontal, les boîtes en ligne sont disposées horizontalement de la gauche vers la droite.
• Pour une mode d'écriture vertical, les boîtes en lignes sont disposées verticalement du haut vers le bas.

Dans l'exemple qui suit, on a deux éléments (<div>) avec une bordure noire qui forment chacuns un contexte de formatage de bloc au sein duquel chaque mot contribue à un contexte de formatage en ligne. Les boîtes utilisées dans le mode d'écriture horizontal sont organisées horizontalement tandis que celles dans l'élément avec un mode d'écriture vertical sont disposées verticalement.

Les boîtes qui forment une ligne sont contenues dans une zone rectangulaire qu'on appelle boîte de ligne (line box). Cette boîte sera assez grande pour contenir l'ensemble des boîtes en ligne de cette ligne. Lorsqu'il n'y a plus de place disponible sur l'axe en ligne, une autre ligne est créée. Ainsi, un paragraphe est formé par un ensemble de boîtes de ligne, empilées le long de l'axe de bloc.

Lorsqu'une boîte en ligne est découpée en deux, les marges, bordures et le remplissage (padding) n'ont pas d'impact visuel à l'emplacement de la séparation. Dans le prochain exemple, on peut voir un élément (<span>) enveloppant un ensemble de mots s'étirant sur deux lignes. On voit que la bordure sur <span> est coupée au passage à la ligne.

Les marges, les bordures et le remplissage (padding) le long de la direction en ligne sont respectés. Dans l'exemple suivant, on peut voir comment sont ajoutés les marges, bordures et le remplissage à l'élément en ligne <span> qui a été ajouté.

Les boîtes en ligne peuvent être alignées sur la direction de bloc de différentes façons avec la propriété vertical-align. Celle-ci permettra d'aligner le contenu sur l'axe de bloc (lorsque le mode d'écriture est vertical, vertical-align ne permet pas d'aligner sur l'axe vertical !). Dans l'exemple qui suit, une portion de texte plus grande rend la boîte de ligne plus grande pour la première phrase. On peut alors utiliser vertical-align afin d'aligner les boîtes en ligne. L'exemple utilise initialement la valeur top mais vous pouvez le modifier en utilisant middle, bottom ou encore baseline.

S'il reste de l'espace le long de la direction en ligne, la propriété text-align permetra d'aligner le contenu des boîtes en lignes au sein des boîtes de ligne. Dans l'exemple qui suit, vous pouvez notamment changer la valeur de text-align afin d'utiliser end.

Les boîtes de ligne ont généralement la même taille sur l'axe en ligne (c'est-à-dire la même largeur quand on utilise un mode d'écriture horizontal ou la même hauteur si on utilise un mode d'écriture vertical). S'il existe un élément flottant (float) au sein du même contexte de formatage de bloc, cet élément entraînera la diminution de la taille des boîtes de ligne pour celles qui entourent l'élément flottant.

• Le contexte de formatage en bloc
• Le modèle de formatage visuel