column-count: auto; und scroll-snap-*

[at]

Hallo Gunnar!

Über #6017 und #5911 bin ich auf dieses Beispiel gestoßen.

☞ Auf dein Probem angewandt.

Der Trick ist wohl, scroll-snap-align auf Kindelemente des Containers anzuwenden – in meinen Beispiel auf section.

Vielen Dank! Das ist zumindest ein erster wichtiger Teil des Tricks.

Ein zweiter behebt das Problem, das entsteht, wenn nicht in jeder Spalte ein neues Kindelement beginnt. In deinem Beispiel sind Teile von Artikel 25 ff. ja nicht lesbar, wenn die Breite des Viewports nur für eine Spalte reicht und die Höhe weniger als acht Zeilen beträgt. Längere Absätze würde das Problem verstärken.

Deshalb habe ich <section> zusätzlich scroll-snap-type: x mandatory; mitgegeben und wahllos leere <span>-Elemente eingestreut und folgendermaßen formatiert:

span {
	display: block;
	float: right;
	position: relative;
	left: 3em;
	width: 0;
	height: 0;
	scroll-snap-align: start;
}

Die <span>-Elemente kann ich per Javascript einbauen. Allerdings muss ich noch testen, ob das CSS in allen gängigen Browser funktioniert.

MfG, at