«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.
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
- 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;
line-height: 3em;
}
h1 {
font-size: 3em;
}
p {
}
- La valeur calculée de
line-height est 3em, soit 48px.
- Toutes les lignes mesurent alors 48px.
|
font-size |
line-height |
| h1 |
3em (48px) |
48px |
| p |
1em (16px) |
48px |
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;
line-height: 1.5;
}
h1 {
font-size: 3em;
}
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
|
font-size |
line-height |
| h1 |
3em (48px) |
72px |
| p |
1em (16px) |
24px |
Rythme vertical sans unités
«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-boxtext-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?
- 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