Frage zum Wiki-Artikel „Spalten“

[nix]

Schon bemerkt?

„Andererseits ist es sowieso nicht möglich, die column-Eigenschaft so zu steuern, dass bei Absätzen nicht einzelne Zeilen isoliert am Ende (Schusterjunge), bzw. Beginn (Hurenkind) der Spalte überstehen.“ — zwar beiliebe nicht ausgetestet, aber: orphans und widows zeigt, jedenfalls in Safari, durchaus Wirkung. Nur kollidieren bei meinen bisherigen Versuchen die beiden meist. Aber: der Browser bemüht sich und hält zumindest eines der beiden Enden entsprechend zusammen.

[Matthias Scharwies]

Servus!

Schon bemerkt?

„Andererseits ist es sowieso nicht möglich, die column-Eigenschaft so zu steuern, dass bei Absätzen nicht einzelne Zeilen isoliert am Ende (Schusterjunge), bzw. Beginn (Hurenkind) der Spalte überstehen.“

— zwar beiliebe nicht ausgetestet, aber: orphans und widows zeigt, jedenfalls in Safari, durchaus Wirkung. Nur kollidieren bei meinen bisherigen Versuchen die beiden meist.

nicht möglich == kollidieren meist

Aber: der Browser bemüht sich und hält zumindest eines der beiden Enden entsprechend zusammen.

bemüht sich != steuert, dass bei Absätzen nicht einzelne Zeilen isoliert dastehen

---

Grundsätzlich: Das ist das Problem bei mehrspaltigem Layout - es passt eben nie für alle Auflösungen.

Ein Beispiel sind unsere Portalseiten mit ihren vielen Links.

Zuerst (ca. 2014) zwei, drei oder vier Spalten, die aus je einem div bestanden und mit Flexbox nebeneinander positioniert wurden.

Problem: Die Spalten mussten manuell befüllt werden.

Dann Vorlage:nSpalten, die mit columns arbeitet.

Problem: Die vielen Links wurde mittlerweile in Listen mit Unterlisten gegliedert; oft rutschte der letzte Listenpunkt auf die neue Seite.

Ein Einfügen von <br> verschlimmbesserte das und führte zu Lücken/Leerräumen in der Mobildarstellung.

Heute: Cards

Lösung: Überschrift gut erkennbar, Icon verdeutlicht, Unterseiten anklickbar

Problem: Teilweise unterschiedlich viel Inhalt; zusätzliche div-Elemente

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

„Andererseits ist es sowieso nicht möglich, die column-Eigenschaft so zu steuern, dass bei Absätzen nicht einzelne Zeilen isoliert am Ende (Schusterjunge), bzw. Beginn (Hurenkind) der Spalte überstehen“

Okay, der Satz kam 2017 von Dir. Du hast auch eine Referenznote hinzugefügt, zu Castor&Pollux. Aber die schreiben das nicht oder haben es irgendwann rausgenommen. Und selbst wenn es da stünde, der Artikel ist von 2010 und die orphans/windows-Eigenschaften wurden 2013 implementiert.

Du selbst begründest diesen Satz mit dem Verhalten der Listen in der nSpalten-Vorlage. Aber DORT ist er keine Begründung, weil das Listen mit einer Zeile pro Absatz sind. orphans und windows wirken aber immer nur innerhalb eines Absatzes. Wenn wir die nSpalten Listen ohne li Elemente gestalteten, also als Absätze mit <br>-gesteuerten Zeilen, dann würden die Umbruchregeln dort greifen.

Grundsätzlich funktionieren orphans und widows auch im n-Spaltensatz in Chrome. Mit einer Ausnahme: Hat der Absatz weniger als (orphans+widows) Zeilen - sprich: Es gibt Zeilen, die schusternde Hurenkinder sind, dann vergessen sie ihre hart anschaffende Mama und nageln lieber beim Schuster. Äh, also, die orphans-Eigenschaft hat Vorrang vor widows. Der Browser könnte natürlich auch versuchen, den kompletten Absatz zusammenzuhalten. Tut er aber nicht.

Ich hatte schon einige Male mit nSpalten experimentiert, um es zu bändigen. Bislang ohne Erfolg. Im Moment scheint es, als ob man mit

.nSpalten li:first-child {
    break-after: avoid;
}
.nSpalten li:last-child {
    break-before: avoid;
}
.nSpalten p {
    margin-top: 0;    /* wg vertikalem Rhythmus */
    break-after:avoid;
}

in Chrome guten Erfolg hätte. Das teste ich jetzt noch im Fuchs. Ist aber doch nicht so ganz einfach, gerade bei geschachtelten Listen wird es schwierig und vor allem ist Chrome ungnädig, wenn man in den Dev-Tools damit spielt. Das wird nicht immer sauber akzeptiert, scheint mir.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

„Andererseits ist es sowieso nicht möglich, die column-Eigenschaft so zu steuern, dass bei Absätzen nicht einzelne Zeilen isoliert am Ende (Schusterjunge), bzw. Beginn (Hurenkind) der Spalte überstehen“

Okay, der Satz kam 2017 von Dir. Du hast auch eine Referenznote hinzugefügt, zu Castor&Pollux. Aber die schreiben das nicht oder haben es irgendwann rausgenommen. Und selbst wenn es da stünde, der Artikel ist von 2010 und die orphans/windows-Eigenschaften wurden 2013 implementiert.

Ja, man kann das columns-Kapitel um einen Link auf orphans erweitern und ein Beispiel so aufbauen.

Ich hatte schon einige Male mit nSpalten experimentiert, um es zu bändigen. Bislang ohne Erfolg.

Das scheint mir der Knackpunkt: Sollen wir unsere Tutorials umschreiben, für Werte wie text-indent:hanging, die noch nicht implementiert sind; für orphans hier, was „bislang ohne Erfolg“ probiert wurde oder sollen wir funktionierende best practices vorstellen?

Im Moment scheint es, als ob man mit

.nSpalten li:first-child {
    break-after: avoid;
}
.nSpalten li:last-child {
    break-before: avoid;
}
.nSpalten p {
    margin-top: 0;    /* wg vertikalem Rhythmus */
    break-after:avoid;
}

in Chrome guten Erfolg hätte. Das teste ich jetzt noch im Fuchs. Ist aber doch nicht so ganz einfach, gerade bei geschachtelten Listen wird es schwierig und vor allem ist Chrome ungnädig, wenn man in den Dev-Tools damit spielt. Das wird nicht immer sauber akzeptiert, scheint mir.

Eben!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias Scharwies,

"ohne Erfolg" stimmt so nicht. Im Fließtext klappt das.

Das ist aber nicht das nSpalten-Problem, denn orphans/windows kümmern sich Fließtext-Zeilen innerhalb eines Blocks und sind nicht dazu gemacht, um Blockelemente beisammen zu halten. Das geht nur mit break-before & Co auf den Blockelementen (z.B. den li). Chromia unterstützen das seit Mai 2022 - deswegen ging es bei mir vorher auch nicht.

Der Knackpunkt sind die Waldbewohner (Feuerfüchse und Webkitze), denen diese Unterstützung noch fehlt. Ich habe das im Testwiki aber trotzdem mal dringelassen, auf den Einstiegsseiten für CSS und JavaScript.

Rolf

[nix]

Aber: der Browser bemüht sich und hält zumindest eines der beiden Enden entsprechend zusammen.

bemüht sich != steuert, dass bei Absätzen nicht einzelne Zeilen isoliert dastehen

Also da, in meinen Versuchsballons, täten sich auch die Giganten des DTP etwas schwer: wenn orphans + widows ≥ Anzahl an Zeilen, die Umgebung aber nach einem Umbruch schreit, ist kaum mehr zu erwarten. (Und ich hab’s nur deshalb erwähnt, weil ich dafür jetzt nicht auch noch Zeit aufwenden will, die zumindest jetzt sowieso vertan wäre. Als Hinweis auf „nur recht oberflächlich betrachtet“.)