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

[at]

Hallo zusammen,

vielleicht fällt euch etwas zu folgender Problemstellung ein:

Ein Inhalt variabler Länge wird im CSS mittels fester column-width und column-count: auto; in eine variable Anzahl von nebeneinander liegenden, gleich großen Spalten aufgeteilt. Wie kann ich scroll-snap-* so darauf anwenden, dass jede der automatisch erzeugten Spalten beim horizontalen Scrollen einrastet? Beziehungsweise wie kann ich die Wirkung von scroll-snap-* für diesen Zweck simulieren? Vielleicht kennt ihr funktionierende Beispiele, die ich nicht gefunden habe.

MfG, at

[Matthias Scharwies]

Servus!

Hallo zusammen,

vielleicht fällt euch etwas zu folgender Problemstellung ein:

Ein Inhalt variabler Länge wird im CSS mittels fester column-width und column-count: auto; in eine variable Anzahl von nebeneinander liegenden, gleich großen Spalten aufgeteilt.

Du hast einen Abschnitt mit anscheinend fester Höhe, aber variabler Breite, der bei breiterem Viewport mehr Spalten bildet?

Bei kleinerem Viewport würden weniger Spalten gebildet und der Inhalt würde sich nach unten verteilen.

Das Grundproblem hier ist, dass sich der Abschnitt zwar darstellungsmäßig in columns teilt, dies aber im DOM nicht sichtbar ist. Sowohl der Firefox als auch Chrome zeigen zwar Grid und Flex, aber eben keine Möglichkeit, die n-te Spalte von irgendetwas zu selektieren. Jedenfalls soweit ich weiß.

• CSS/Tutorials/Typografie/Spalten

Wie kann ich scroll-snap-* so darauf anwenden, dass jede der automatisch erzeugten Spalten beim horizontalen Scrollen einrastet?

So wie ich das verstanden habe gar nicht.

Du setzt ja scroll-snap-type für den Scroll-Container, während scroll-snap-align für die Scroll-Elemente genutzt wird. Du hast aber keine Elemente.

Beziehungsweise wie kann ich die Wirkung von scroll-snap-* für diesen Zweck simulieren?

Evtl mal mit scroll-snap-type proximity experimentieren. Die Nutzer sollen scrollen, wenn Spalten aus dem Viewport geraten, aber (noch) nicht bis zum nächsten Fangpunkt springen.

Den Inhalt mit getBoundingClientRect auszumessen und dann auf dynamisch erzeugte Spalten (<x-column>) zu verteilen, würde ich nicht machen.

Herzliche Grüße

Matthias Scharwies

[at]

Hallo Matthias,

vielen Dank für deine Antwort!

Du hast einen Abschnitt mit anscheinend fester Höhe, aber variabler Breite, der bei breiterem Viewport mehr Spalten bildet?

Ja.

Bei kleinerem Viewport würden weniger Spalten gebildet und der Inhalt würde sich nach unten verteilen.

Nein, aber das ist nicht maßgeblich. Also meinetwegen auch ja, wenn es der Lösungsfindung dient.

Das Grundproblem hier ist, dass sich der Abschnitt zwar darstellungsmäßig in columns teilt, dies aber im DOM nicht sichtbar ist. Sowohl der Firefox als auch Chrome zeigen zwar Grid und Flex, aber eben keine Möglichkeit, die n-te Spalte von irgendetwas zu selektieren. Jedenfalls soweit ich weiß.

Yep! Ich habe auch schon an Shadow DOM gedacht, aber man gönnt mir ja noch nicht einmal die berechnete Anzahl der Spalten.

• CSS/Tutorials/Typografie/Spalten

Was dort steht, kenne ich und das funktioniert ja auch. Allerdings habe ich noch einen Hinweis zu column-span hinzugefügt.

Beziehungsweise wie kann ich die Wirkung von scroll-snap-* für diesen Zweck simulieren?

Evtl mal mit scroll-snap-type proximity experimentieren.

proximity hilft leider auch nicht. Ohne Wert für scroll-snap-align kann man ohne Zwischenstop durchscrollen, mit Wert kann man man praktisch gar nicht scrollen.

Den Inhalt auszumessen und dann auf dynamisch erzeugte Spalten (<x-column>) zu verteilen, würde ich nicht machen.

Ich auch nicht, zumindest nicht gern, die Aufteilung in Spalten funktioniert ja.

MfG, at

[Gunnar Bittersmann]

@@Matthias Scharwies

Wie kann ich scroll-snap-* so darauf anwenden, dass jede der automatisch erzeugten Spalten beim horizontalen Scrollen einrastet?

So wie ich das verstanden habe gar nicht.

Hold my beer.

Du setzt ja scroll-snap-type für den Scroll-Container, während scroll-snap-align für die Scroll-Elemente genutzt wird. Du hast aber keine Elemente.

Nicht?

😷 LLAP

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Wie kann ich scroll-snap-* so darauf anwenden, dass jede der automatisch erzeugten Spalten beim horizontalen Scrollen einrastet?

So wie ich das verstanden habe gar nicht.

Hold my beer.

Du setzt ja scroll-snap-type für den Scroll-Container, während scroll-snap-align für die Scroll-Elemente genutzt wird. Du hast aber keine Elemente.

Nicht?

Genial! Ich hätte nicht gedacht, dass die Browser untereinander stehende Scroll-Elemente zu einer Fangposition zusammenfassen, bzw, dann zur nächsten gehen. Cool!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@at

Ein Inhalt variabler Länge wird im CSS mittels fester column-width und column-count: auto; in eine variable Anzahl von nebeneinander liegenden, gleich großen Spalten aufgeteilt. Wie kann ich scroll-snap-* so darauf anwenden, dass jede der automatisch erzeugten Spalten beim horizontalen Scrollen einrastet?

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

😷 LLAP

[Gunnar Bittersmann]

@@Gunnar Bittersmann

☞ Auf dein Probem angewandt.

Noch ergänzt: In Chromia braucht der Container noch tabindex="0", damit man den Tastaturfokus darauf setzen und mit Pfeiltasten scrollen kann.

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

Und damit kann man im Firefox mit [→] zwar vorwärts scrollen, mit [←] aber nicht mehr zurück. Vermutlich ein Bug.

😷 LLAP

[Felix Riesterer]

Lieber Gunnar,

Und damit kann man im Firefox mit [→] zwar vorwärts scrollen, mit [←] aber nicht mehr zurück. Vermutlich ein Bug.

also bei mir hat das Vor und Zurück mit den Pfeiltasten funktioniert.

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

Und damit kann man im Firefox mit [→] zwar vorwärts scrollen, mit [←] aber nicht mehr zurück. Vermutlich ein Bug.

also bei mir hat das Vor und Zurück mit den Pfeiltasten funktioniert.

Hm, Windows? Oder Linux?

Auf dem Mac geht’s bei mir nicht. Mal die VM mit Windows anschmeißen …

😷 LLAP

[Matthias Scharwies]

Servus!

@@Felix Riesterer

Und damit kann man im Firefox mit [→] zwar vorwärts scrollen, mit [←] aber nicht mehr zurück. Vermutlich ein Bug.

also bei mir hat das Vor und Zurück mit den Pfeiltasten funktioniert.

Hm, Windows? Oder Linux?

Auf dem Mac geht’s bei mir nicht. Mal die VM mit Windows anschmeißen …

Auf Win 10, FF89 geht's auch nicht!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Auf Win 10, FF89 geht's auch nicht!

Ja, konnte ich auf einer Windows-Kiste nachvollziehen. Hab das mal eingetütet.

😷 LLAP

PS: Beim letzten Mal ging der Bugfix ziemlich flott.

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Auf Win 10, FF89 geht's auch nicht!

Ja, konnte ich auf einer Windows-Kiste nachvollziehen. Hab das mal eingetütet.

Danke!

PS: Beim letzten Mal ging der Bugfix ziemlich flott.

Hoffentlich!

Herzliche Grüße

Matthias Scharwies

[Felix Riesterer]

Lieber Gunnar,

Hm, Windows? Oder Linux?

zweiteres (natürlich): Linux Mint mit FF89.0

Liebe Grüße

Felix Riesterer

[Matthias Scharwies]

Servus!

☞ Auf dein Probem angewandt.

Ich hab's mal ins Wiki übertragen:

CSS/Tutorials/Typografie/Spalten#Exkurs:_Scroll_Snap_bei_columns

Herzliche Grüße und vielen Dank!

Matthias Scharwies

[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

[Gunnar Bittersmann]

@@at

Ein Inhalt variabler Länge wird im CSS mittels fester column-width und column-count: auto; in eine variable Anzahl von nebeneinander liegenden, gleich großen Spalten aufgeteilt.

Problem dabei: Die Spaltenbreite wird so berechnet, dass eine ganzzahlige Anzahl von Spalten ins Containerelement passt. Das mag zwar chic aussehen, auf Systemen, die – solange man nicht scollt – keine Scrollbar zeigen (macOS, iOS, Android?), haben Nutzer aber keinen visuellen Hinweis darauf, dass da rechts noch mehr Inhalt ist, zu dem man horizontal scrollen kann.

Besser wäre es, wenn rechts eine Spalte angeschnitten wäre oder man irgeneinenanderen Hinweis (Pfeil?) bekäme.

😷 LLAP

[at]

Hallo Gunnar!

Problem dabei: Die Spaltenbreite wird so berechnet, dass eine ganzzahlige Anzahl von Spalten ins Containerelement passt. Das mag zwar chic aussehen, auf Systemen, die – solange man nicht scollt – keine Scrollbar zeigen (macOS, iOS, Android?), haben Nutzer aber keinen visuellen Hinweis darauf, dass da rechts noch mehr Inhalt ist, zu dem man horizontal scrollen kann.

Dessen bin ich mir bewusst, dieses Problem hängt ja an Flexbox.

Besser wäre es, wenn rechts eine Spalte angeschnitten wäre oder man irgeneinenanderen Hinweis (Pfeil?) bekäme.

Das hatte ich bereits berücksichtigt und wollte mittels passender Größenangaben und overflow-x: scroll; die nachfolgende Spalte anteasern. Das hat bereits vorher funktioniert, trotzdem vielen Dank für den Hinweis!

MfG, at