source

http://iamvdo.me/blog/css-avance-metriques-des-fontes-line-height-et-vertical-align

line-height ?

Les métriques des fontes :

• Cadratin (ou em square) : bloc carré de référence dans lequel s'inscrit chaque caractère de la fonte.
  Traditionnellement les dimensions de l'em square se calaient sur la largeur du M, d'où l'appellation « em ». Selon le format de la fonte, un em square vaut 1000 unités (OpenType), ou 1024 ou 2048 (TrueType). De ce nombre d'unités dépend la valeur des autres métriques (ces valeurs sont relatives à celle de l'em square). Certains caractères dépassent de l'em square. Il n'y a aucun moyen de n'afficher QUE l'em square en CSS, il faut utiliser un logiciel type FontForge pour obtenir les métriques d'une fonte.

• Ascendantes : distance de la baseline au point le plus haut du caractère le plus haut. Si les ascendantes font 2x la taille de l'em square, l'ascendante fait 2x le nombre d'unités de l'em square. Dans FontForge la valeur des ascendantes correspond au champ Win Ascend pour Windows, et HHead Ascend pour Mac. Selon les OS, les fontes ne s'afficheront donc pas forcément pareil !

• Descendantes : distance de la baseline au point le plus bas du caractère le plus bas. Même système de calcul relatif que les ascendantes. Dans FontForge la valeur des descendantes correspond au champ Win Descend pour Windows, et HHead Descend pour Mac.

• Les unités de l'em square correspondent aux pixels spécifiés en CSS pour la font-size. Par exemple si le body est en font-size : 20px, 1em = 20px. La taille de la police ne se limite pas à l'em square (on a vu que certains caractères en dépassaient). Pour trouver la hauteur de la content-area (zone qui englobe les caractères), il faut convertir en px les ascendantes et les descendantes, puis les additionner. Si par exemple, les ascendantes font 2000 unités et les descendantes 1500 unités, pour un em square de 1000 et une font-size de 20px :

(Unités ascendantes / Unités em square * font-size pixels) + (Unités descendantes / Unités em square * font-size pixels) = hauteur de la content area en px (2000/100020) + (1500/100020) = 70

En HTML/CSS une line-box est un ensemble de boîtes inline (boîtes anonymes englobant du texte seul, et/ou balises inline type span) alignées sur une seule ligne. La hauteur de cette ligne correspond à la hauteur des boîtes inline la plus haute et la plus basse.

La hauteur d'une boîte inline n'est pas la taille de la content-area mais celle de la virtual-area. La content area est centrée verticalement dans la virtual-area. La taille de la virtual-area est déterminée par la valeur de line-height. Dans FontForge il est possible de trouver le Typo Line Gap, qui correspond à la taille de l'espace entre la virtual-area et la content-area quand line-height vaut normal. Si ce gap vaut zéro, la virtual-area est égale à la content-area. Dans l'exemple précédent, 1em = 20px, et line-height : 70px, soit relativement à 1em, 3.5em. La valeur normale de line-height pour notre fonte imaginaire serait donc 3.5.

On comprend donc que la valeur normale de line-height dépend des métriques de chaque fonte, et ne vaut pas forcément 1em par défaut. Si on décide de mettre line-height :1 à une fonte qui a une virtual-area de plus d'1em, on risque des chevauchements.

Pour les éléments inline, padding et border augmentent la zone de l'arrière-plan (background), mais pas la hauteur du content-area (et n'ont donc pas d'incidence sur la hauteur de la line-box). margin-top et margin-bottom n’ont pas d’effet pour les éléments inline remplacés, inline-* et éléments inline blocksifiés : padding, margin et border augmentent la hauteur, et donc le content-area et la line-box

On a vu précédemment que la hauteur de la line-box dépendait de la hauteur des boîtes inline la plus haute et la plus basse. On pourrait s'attendre, lorsqu'il n'y a qu'une seule boîte inline dans la line-box, que la hauteur de la line-box corresponde pile poil à la virtual-area de la boîte inline. Ce serait sans compter sur le strut : les navigateurs font leurs calculs comme si chaque line-box commençait par un caractère d’une largeur de 0px, que la spec appelle le strut. Ce caractère peut fausser l'alignement sur la baseline, puisque sa boîte anonyme va caler sa baseline au même niveau que celle de la boîte inline, quitte à monter plus haut que cette dernière, et donc agrandir la line-box. Notre boîte inline sera donc visuellement placée un peu plus bas que prévu dans la line-box.

vertical-align : middle utilise une baseline comme référence pour déterminer le milieu de la boîte inline (baseline du parent + hauteur d'x du parent / 2). Les baselines pouvant être faussées, et les hauteurs d'x différentes, on ne peut pas être sûr que la boîte inline soit bien alignée sur le milieu de la ligne parente.

Par contre vertical-align top et bottom restent des valeurs sûres puisque le bloc inline s'aligne sur la line-box (en haut ou en bas), et text-top / text-bottom sur la content-area (somme des ascendantes et descendantes du bloc inline). C'est la virtual-area qui s'aligne avec. vertical-align accepte des valeurs numériques qui décalent d'autant les boîtes inline de la baseline.

Au final les métriques des fontes sont des valeurs constantes qui ne peuvent pas être manipulées en CSS, et dont les valeurs sont interprétées différemment selon le navigateur, donc on comprendra que l'alignement vertical soit une science inexacte.