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écificationCSS 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émentfigure 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ésbreak-before etbreak-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 titreh2.

Les ruptures entre les lignes

On peut aussi utiliser les propriétésorphans etwidows. 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ésorphans etwidows 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.