Vermeiden von column breaks

[Rolf B]

Hallo Jürgen,

mach mein Fiddle auf und lass die "Rebreak" Checkbox aus. Variiere die Breite des Ausgabebereichs. Je nach Länge der Abschnitte und nach Anzahl der Spalten kommt es vor, dass die Abschnittsüberschrift am Ende von Spalte 1 steht und die Inhaltspunkte dazu in der nächsten Spalte. Oder der letzte Punkt eines Abschnitts steht einsam am Beginn einer neuen Spalte.

Schusterjungen und Hurenkinder eben

Matthias hantiert mit <br> herum, um das zu lösen, aber das ist nicht responsiv. Solange man bei zwei Spalten bleibt, kann man das noch mit <br> bändigen, aber bei drei Spalten hängt die reale Spaltenzahl von der Viewportbreite ab (bzw. vom Verhältnis Fontsize zu Viewportbreite) und die erforderliche Auffütterung mit <br> ist nicht mehr konstant.

Man kann ein bisschen mit break-inside:avoid erreichen, aber das ist nur für kleine Abschnitte wirklich gut. Sobald ein Abschnitt mit - sagenwirmal - 6 Punkten kommt, kann das Ergebnis dadurch sehr aus der Balance geraten.

Das Rebreak-Script, das ich versucht habe, tut daher zwei Dinge: Abschnitte mit max. 3 Punkten (in Version 5 - in der v4 waren es noch 2) bekommen die keepTogether-Klasse, die break-inside:avoid zusteuert. Und bei größeren Abschnitten prüfe ich nach einem Resize des Fensters, ob der erste Punkt im Abschnitt einen offsetTop hat, der kleiner ist als der offsetTop der Überschrift. Desgleichen für die Punkte 2 und 1. Und dann versuche ich, mit Hinzufügen der break-Klasse den Umbruch zu verschieben, so dass die Überschrift mit den Punkten 1+2 zusammenbleibt.

Und wie gesagt - da kämpfe ich auch gegen den Browser. Eine Layout-Phase muss auf jeden Fall passieren, weil ich nicht weiß, wie sich die Folgespalten verschieben, wenn ich in Spalte 1 einen Break einfüge. Nach jedem hinzugefügten Break ist demnach ein setTimeout nötig. Das reicht aber noch nicht, denn Chrome macht keinen Reflow, wenn ich eine break-* Eigenschaft hinzufüge. Das tut er nur, wenn sich die Box selbst ändert, z.B. durch Verändern des Paddings. Deswegen mache ich zwei setTimeout-Phasen nach jedem hinzugefügten Break. In der ersten schiebe ich ein Padding-Pixel von rechts nach links und in der zweiten wieder zurück. Klappt meistens. Nicht immer 😕

Ich bin also bislang alles andere als glücklich mit dem Ergebnis.

• Bei manuell hinzugefügten <br> mag ich nicht bleiben.
• Abschnitte grundsätzlich auf break-inside:avoid setzen ist zu unflexibel
• Die Listenstruktur zerschlagen und die Umbrüche komplett manuell auszuführen würde vermutlich einen visuellen Erfolg bringen, das Ergebnis ist aber kein zugängliches HTML mehr und die Semantik dürfte im Eimer sein. Der Algorithmus dafür ist auch nicht trivial, aber wenn das Semantikproblem nicht wäre, würde mich das nicht abschrecken. Das kriegt man sicherlich irgendwie hin; das ist eine Optimierungsaufgabe, die professionelle Spaltensatztools gelöst haben.
• Die einzelnen Reflow-Schritte, die ich jetzt über setTimeout mache, könnte ich auch versuchen, im Script zu simulieren. Ich müsste die Höhen von Überschriften und Listitems bestimmen und dann so lange mit simulierten Breaks jonglieren, bis die Balance gelingt. Das ist allerdings auch nicht trivial.

Rolf