Gérer la rupture du contenu entre les colonnes
Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification CSS Fragmentation. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes.
Quelques notions de bases sur la fragmentation
Le module de spécification CSS Fragmentation détaille la façon dont le contenu peut être coupé entre les conteneur de fragmentation. Pour une disposition multi-colonnes, le conteneur de fragmentation correspond à la boîte de colonne.
Le contenu d'une boîte de colonne peut être varié et une coupure peut être malvenue à certains endroits. On préfèrerait par exemple qu'une légende ne soit pas séparée de l'image entre une colonne et la suivante. Les propriétés relatives à la fragmentation permettent de contrôler certains aspects de ces coupures.
Voici plusieurs emplacements où on peut souhaiter contrôler les ruptures :
- Les ruptures à l'intérieur des boîtes, par exemple à l'intérieur d'un élément
<figure>
- Les ruptures avant et après les boîtes
- Les ruptures entre les lignes
Les ruptures à l'intérieur des boîtes
Pour contrôler la façon dont le contenu est coupé à l'intérieur d'une boîte, on pourra utiliser la propriété break-inside
. Cette propriété peut prendre les valeurs suivantes :
auto
avoid
avoid-page
avoid-column
avoid-region
Dans l'exemple qui suit, on a appliqué break-inside
sur l'élément figure
afin d'éviter que la légende soit séparée de l'image.
Les ruptures avant et après les boîtes
Les propriétés break-before
et break-after
contrôlent respectivement les ruptures avant et après les éléments. Dans une disposition multi-colonnes, ces propriétés peuvent être utilisées avec les valeurs suivantes :
auto
avoid
avoid-column
column
Avec l'exemple suivant, on force une rupture avant chaque élément de titre h2
.
Les ruptures entre les lignes
On peut aussi utiliser les propriétés orphans
et widows
. La propriété orphans
contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété widows
contrôle le nombre de lignes qui restent au début d'un fragment.
Les propriétés orphans
et widows
prennent un entier comme valeur et qui indique le nombre de lignes à avoir à la fin ou au début d'un fragment. On notera que ces propriétés ne fonctionnent qu'à l'intérieur d'un conteneur de bloc (un paragraphe par exemple). Si le bloc contient un nombre de lignes inférieur au nombre précisé pour la propriété, toutes les lignes resteront groupées ensemble.
Dans l'exemple ci-après, on utilise la propriété orphans
pour contrôler le nombre de lignes conservées à la fin d'une colonne. Vous pouvez modifier la valeur afin de voir l'impact sur la rupture du contenu.
Résultat non garanti
Si on souhaite prévenir la rupture à de nombreux endroits, le navigateur sera quand même obligé de couper le contenu entre les colonnes. D'une certaine façon, ces propriétés agissent plutôt comme des suggestions envers le moteur que comme des ordres.
De plus, la prise en charge de ces propriétés n'est pas la plus homogène possible entre les navigateurs. Vous pouvez vous référer aux tableaux de compatibilité des pages de chaque propriété pour en savoir plus. Dans la plupart des cas, mieux vaudra encore laisser gérer le système plutôt que d'avoir trop de ruptures aux endroits indésirables.