Gérer la rupture du contenu entre les colonnes

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

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 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.

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.

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.