Comme décrit dans le passage traitant des contextes de mise en forme en−ligne, les agents utilisateurs rangent les boîtes en−ligne dans des boîtes de ligne, les empilant les unes sur les autres. On détermine la hauteur de ces boîtes de ligne ainsi :
On calcule la hauteur de chaque boîte en−ligne contenues dans la boîte de ligne (voir "Le calcul des hauteurs et des marges" ainsi que la propriété 'line−height') ;
1.
Puis on aligne ces boiîtes en−ligne verticalement en fonction de la valeur de leur propriété 'vertical−align'
; 2.
La hauteur de la boîte de ligne correspond à la distance entre le haut de la boîte la plus élevée et le bas de celle la plus basse.
3.
Les éléments en−ligne vides engendrent des boîtes en−ligne vide, mais ces dernières ont quand même des marges, des espacements, des bordures et une hauteur de ligne, et donc, elles influencent ces calculs tout comme les élément avec un contenu.
Noter que, quand toutes les boîtes, dans la boîte de ligne, sont alignées sur leurs bas, la boîte de ligne aura exactement la hauteur de celle qui a la plus grande hauteur. Cependant, quand celles−ci sont alignées sur une ligne de base commune, le haut et le bas de la boîte de ligne peuvent ne pas coïncider avec ceux de la boîte de plus grande hauteur.
10.8.1 L'interlignage et le demi−interlignage
La hauteur d'une boîte de ligne pouvant différer de celle de la taille de police du texte contenu dans une boîte (ex.
'line−height' > 1em), il peut y avoir un espace au−dessus et en−dessous des glyphes ainsi rendus. On appelle cette différence, entre la taille de la police et la valeur calculée pour la propriété 'line−height', l'interlignage, et la moitié de celle−ci, le demi−interlignage.
Les agents utilisateurs centrent verticalement les glyphes dans une boîte en−ligne, ajoutant un demi−interlignage au−dessus et en−dessous de ceux−ci. Par exemple, un extrait de texte dont la hauteur est de '12pt' et la valeur de la propriété 'line−height' est '14pt', il serait ajouté un espace supplémentaire de 2pts, répartis en 1pt au−dessus et 1pt au−dessous des lettres. Ceci concerne aussi les boîtes vides, celles−ci se comportant comme si elles contenaient des lettres infiniment réduites.
Quand la valeur de la propriété 'line−height' est inférieure à la taille de la police, la hauteur finale de la boîte en−ligne sera inférieure à la taille de la police et l'affichage des glyphes "débordera" de la boîte de ligne. Si une telle boîte en−ligne touche le bord de la boîte de ligne, l'affichage "débordera" aussi dans la boîte de ligne adjacente.
Bien que les marges, bordures et espacements des éléments non remplacés n'interviennent pas dans le calcul de la hauteur de la boîte en−ligne (et ainsi dans celui de la boîte de ligne), ceux−ci sont quand même rendus autour de la boîte de ligne. En conséquence, si la hauteur de la boîte de ligne est inférieure à celle comprise entre les bords externes des boîtes qui y sont contenues, les arrière−plans et les couleurs des espacements peuvent "déborder"
dans les boîtes de ligne adjacentes. Cependant, certains agents utilisateurs peuvent utiliser la boîte de ligne pour
"découper" les aires de bordure et d'espacement (et ne pas les rendre).
'line−height'
Valeur : normal | <nombre> | <longueur> | <pourcentage> | inherit Initiale : normal
S'applique à : tous les éléments Héritée : oui
Percentages: se rapporte à la taille de la police de l'élément lui−même Médias : visuel
Quand on applique cette propriété à un élément de type bloc dont le contenu est composé d'éléments de type en−ligne, celle−ci spécifie la hauteur minimale de chacune des boîtes en−ligne générées. Cette hauteur minimale se décompoe en une hauteur minimale au−dessus de la ligne de base de l'élément de type bloc et en une profondeur minimale au−dessous de celui−ci, exactement comme si chacune des boîtes de ligne commençait par une boîte en−ligne de largeur nulle, celle−ci ayant les valeurs des propriétés de police et de hauteur de ligne de l'élément de type bloc (ce que TEX appelle un "étai").
Quand on l'applique à un élément de type en−ligne, celle−ci spécifie la hauteur exacte de chacune des boîtes générées par l'élément. Sauf dans le cas des éléments de type en−ligne remplacés, où la hauteur de la boîte est donnée par la propriété 'height'.
Les significations des valeurs pour cette propriété sont : normal
Indique aux agents utilisateurs une valeur calculée "raisonnable", basée sur la taille de la police de l'élément. Cette valeur revêt la même signification que <number>. On recommande pour 'normal' une valeur calculée entre 1.0 et 1.2 ;
<longueur>
Cette longueur est appliquée à la hauteur de la boîte. Les valeurs négatives ne sont pas admises ;
<nombre>
La valeur calculée de la propriété est obtenue en multipliant ce nombre par la taille de la police de l'élément. Les valeurs négatives ne sont pas admises. Cependant, ce nombre est hérité, et non la valeur calculée ;
<pourcentage>
La valeur calculée de la propriété correspond à ce pourcentage multipliée par la valeur calculée pour la taille de la police. Les valeurs négatives ne sont pas admises.
Exemple(s) :
Les trois règles suivantes produisent une même hauteur de ligne :
DIV { line−height: 1.2; font−size: 10pt } /* nombre */
DIV { line−height: 1.2em; font−size: 10pt } /* longueur */
DIV { line−height: 120%; font−size: 10pt } /* pourcentage */
Quand un élément contient du texte dont l'affichage requiert plusieurs polices, les agents utilisateurs devraient en déterminer la valeur pour la propriété 'line−height' en fonction de celle qui a la plus grande taille.
Généralement, quand la propriété 'line−height' a une seule valeur pour toutes les boîtes en−ligne d'un paragraphe (sans images trop hautes), la recommandation précédente devrait faire que les lignes de base des lignes successives soient indépendantes de la hauteur de ligne. Ceci est important quand on doit aligner des colonnes de texte dans différentes polices, par exemple dans une table.
Noter que les éléments remplacés ont une propriété 'font−size' et une propriété 'line−height', même si on ne les utilise pas directement dans la détermination de la hauteur de la boîte : les valeurs exprimées en 'em' et en 'ex' sont relatives à celle de la propriété 'font−size', et les valeurs en pourcentage de la propriété 'vertical−align', relatives à celle de la propriété 'line−height'.
'vertical−align'
Valeur : baseline | sub | super | top | text−top | middle | bottom | text−bottom | <pourcentage> |
<longueur> | inherit Initiale : baseline
S'applique à
: ceux des éléments de type en−ligne et à l'élément 'table−cell' Héritée : non
Pourcentage
: se rapporte à la valeur de la propriété 'line−height' de l'élément lui−même Médias : visuel
Cette propriété agit sur le positionnement vertical à l'intérieur de la boîte de ligne des boîtes générées par un élément de type en−ligne. Les règles suivantes n'ont de sens que par rapport à un élément parent de type en−ligne, ou de type bloc si celui−ci génère des boîtes en−ligne anonymes ; elles sont inopérantes autrement.
Note : la signification des valeurs pour cette propriété est légèrement différente dans le contexte des tables.
Consulter le chapitre traitant des algorithmes pour la hauteur des tables pour le détail.
baseline
Aligne la ligne de base d'une boîte avec celle de son parent. Si la boîte en est dépourvue, aligner le bas de celle−ci avec la ligne de base de son parent ;
middle
Aligne le milieu vertical de la boîte avec la ligne de base de la boîte de son parent, ce milieu étant augmenté de la moitié de la valeur de la propriété 'x−height' du parent ;
sub
Abaisse la ligne de base de la boîte à la position appropriée pour une écriture en indice dans la boîte du parent. Cette valeur n'a pas d'effet sur la taille de la police de texte de l'élément ;
super
lève la ligne de base de la boîte à la position appropriée pour une écriture en exposant dans la boîte du parent. Cette valeur n'a pas d'effet sur la taille de la police de texte de l'élément ;
text−top
Aligne le haut de la boîte avec le haut du texte de l'élément parent ; text−bottom
Aligne le bas de la boîte avec le bas du texte de l'élément parent ;
<pourcentage>
Élève (pour une valeur positive) ou abaisse (pour une valeur négative) la boîte de ce pourcentage (qui se rapporte à la valeur de la propriété 'line−height'). La valeur '0%' signifie la même chose que 'baseline' ;
<longueur>
Élève (pour une valeur positive) ou abaisse (pour une valeur négative) la boîte de cette quantité. La valeur '0cm' signifie la même chose que 'baseline'.
Ces dernières valeurs se rapportent la boîte de ligne dans laquelle survient la boîte générée : top
Aligne le haut de la boîte avec le haut de la boîte de ligne ; bottom
Aligne le bas de la boîte avec le bas de la boîte de ligne.