Contexte de formatage en ligne (inline/incise)

Dans cet article, nous allons voir ce qu'est le contexte de formatage en ligne (inline formatting context).

Concepts-clés

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

Note : Dans ces exemples, on utilise les propri√©t√©s logiques (relatives √† la direction du flux avec le mode d'√©criture et la directionnalit√©) (ex. padding-inline-start plut√īt que padding-left) afin qu'elles s'appliquent le long de la direction en ligne, que le texte soit horizontal ou vertical. Pour en savoir plus sur ces propri√©t√©s, voir les propri√©t√©s et les valeurs logiques en CSS.

Alignement sur la direction de bloc (block)

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.

Alignement le long de la direction en ligne (inline)

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.

Effets du flottement (float)

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.

Voir aussi