Line-height: une propriété méconnue

Vincent De Oliveira · @iamvdo

«Personne n'a jamais vraiment compris line-height» Anonyme

Le rôle de line-height

• Gérer l’espace vertical entre les lignes
• Créer un rythme vertical.

• Ça paraît simple...

C’est quoi le line-height?

• Interligne?
• Mais de où à où exactement?

C’est quoi le line-height?

• Un paragraphe est un empilement de lignes (line-box)
• Chaque ligne a sa propre hauteur
• Les lignes ne se superposent jamais

• Le line-height, c'est la hauteur minimale d'une ligne

Définir le line-height

• La valeur par défaut est normal (c'est aussi la valeur calculée)

• Deux méthodes différentes
  • Avec unités: px, %, em
  • Sans unités
• Pas une meilleure que l'autre

Line-height avec unités

html {
  font-size: 1em; /*16px*/
  line-height: 3em; /*48px*/
}
h1 {
  font-size: 3em; /*48px*/
}
p {
  
}

• La valeur calculée de line-height est 3em, soit 48px.
• Toutes les lignes mesurent alors 48px.

• Voir le rendu

Rythme vertical avec unités

• Utilisation indifférente de px, em ou %
• Mais em et % sont relatifs, donc des calculs sont nécessaires
• Voir le rendu

Line-height sans unités

.container {
  font-size: 1em; /*16px*/
  line-height: 1.5; /*24px*/
}
h1 {
  font-size: 3em; /*48px*/
}
p {
  
}

• Le facteur de 1.5 donne un line-height de 24px.
• Respecte la cascade: chaque élément n'hérite pas de cette valeur.
• line-height = font-size * facteur

• Voir le rendu

Rythme vertical sans unités

• Moins évident de gérer un rythme vertical
• Voir le rendu

«OK, là c'était facile! Regardons dans le détail maintenant...»

Inline formatting context

• Comment se décompose un <p>?
• Par exemple, ce code:

<p>Good design. ... <strong>...</strong> ... </p>

• Comment s'affiche t'il à l'écran?

Inline formatting context

• Création d'une (ou plusieurs) boites horizontales pour les éléments inline

Inline formatting context

• Création de boites anonymes

Inline formatting context

• Calcul de la hauteur de chaque boite
• Création des lignes (line-boxes)

• La hauteur d'une ligne dépend donc de la hauteur de ses enfants

Hauteur d'une boite inline

• Un élément, deux hauteurs!

• Hauteur réelle
  • C'est le content-area
  • Dépend de la police et de la taille
  • Baseline, ascendante (A) et descendante (D)
  • Identifiable avec background
• Hauteur virtuelle
  • Calcul du leading (= line-height - A+D)
  • La moitié de ce leading est ajouté en haut et l'autre moitié en bas. C'est le half-leading
  • Hauteur virtuelle = hauteur réelle + 2 half-leading
  • Plus simple: Hauteur virtuelle = line-height

• C'est la hauteur virtuelle qui est utilisée pour la hauteur d'une ligne

Un élément, deux hauteurs!

Démo

.container {
  font-size: 100px;
  line-height: 200px;
}
span {
  background: white;
}

Hauteur d'une ligne (line-box)

• Calcul la hauteur de chaque élément de niveau inline
  • pour inline, c'est la valeur du line-height
  • pour inline-block, inline-table, éléments remplacés (img, input, contenu généré, etc.), c'est la limite des marges hautes et basses.
• Alignement des boites avec vertical-align

• La hauteur de la line-box est la distance entre la limite la plus haute et la limite la plus basse

Alignements

• C'est la propriété vertical-align
  • top ou bottom: alignement sur la line-box
  • text-top ou text-bottom: alignement sur le content-area
  • D'autres valeurs aussi: baseline, middle, etc.

• Attention, c'est la hauteur virtuelle qui est alignée!

Démo

.container {
  font-size: 100px;
  line-height: 200px;
}
span {
  background: #444;
}

Hauteur d'une ligne (line-box)

• Hauteur de ligne avec éléments inline
• vertical-align: baseline par défaut

Hauteur d'une ligne (line-box)

• Hauteur de ligne avec éléments inline-block

• Rappel inline-block
  • Les marges agrandissent la hauteur
  • Alignement baseline est la dernière ligne (sauf si overflow: hidden: marge basse)

Hauteur d'une ligne (line-box)

• Un élément vide crée également une boite de niveau inline
• Sa hauteur peut donc influer sur la hauteur de ligne

div {
  height: 300px;
}
span {
  background: deepskyblue;
}
span::after {
  content:'';
  
}

Problèmes d'alignements

• middle n'est pas toujours centré
• middle aligne le centre d'une boite avec la baseline du parent, + une demi hauteur d'x.
• Si A - x/2 != D + x/2

• Agrandissement de la hauteur de ligne possible

Démo

.container {
  font-size: 50px;
  line-height: 100px;
}
img {
  
}

Good

• Besoin de connaitre les valeurs précises de la police pour un alignement parfait

«Vous suivez encore? C'est maintenant que les problèmes arrivent…»

line-height: normal

• Mais c'est combien en fait?
• Parce que line-height: normal != line-height: 1
• La spec définit entre 1 et 1.2: mais c'est faux!

«line-height: 1 c'est le mal…» Moi

Démo

div {
  
  background: orangered;
}
span {
  background: deepskyblue;
}

• La hauteur virtuelle peut alors être plus petite que la hauteur réelle!
• Elle peut même être de 0!

Mais c'est combien alors?

• Ça dépend de la police
• Et de sa taille!
• Besoin de connaitre line-height, mais surtout Ascendante et Descendante
• Font calculator et infos sur les polices installées

• Très difficile de connaitre la hauteur
• Impossible en CSS

Alignements précis

• Ex: aligner les images dans un bloc de texte
  • Le bas de l'image aligné sur la ligne de base
  • Le haut aligné sur la hauteur d'x
• Voir le rendu

Et après?

• Nouveau module CSS3 en cours
• Alignement des lignes sur une grille
• CSS Line Grid Module Level 1