Der Trick, den es braucht, um eBook-ähnliche Textspalten zu erstellen

In Jasons Pamentals neuestem Web Fonts & Typography News steckt einige interessante CSS-Trickerei. Jason wollte wischbare Spalten für sein digitales Leseerlebnis auf Mobilgeräten schaffen. Das wirft sofort eine interessante Frage auf… *wie setzt man Spalten über die gesamte Breite, die nach Bedarf horizontal Spalten hinzufügen?* Nun, das ist ein guter Trick, und es ist ein Einzeiler.

columns: 100vw auto;

Aber von da an wird es komplizierter und enttäuschender.

Mit nur einem Hauch mehr Formatierung für die Spalten

main {
  columns: 100vw auto;
  column-gap: 2rem;
  overflow-x: auto;
  height: calc(100vh - 2rem);
  font: 120%/1.4 Georgia;
}

erhalten wir dies

Was dem Perfekten so nahe kommt!

Wir würden diesen Effekt wahrscheinlich nicht auf dem Desktop anwenden, aber hey, dafür gibt es Media Queries. Auf Mobilgeräten erhalten wir...

Dieses ruckartige Scrollen macht das dort zu einer schlechten Erfahrung. Wir können das mit -webkit-overflow-scrolling: touch; glätten...

Die Glätte ist *vielleicht* besser, aber die Tatsache, dass die Spalten nicht einrasten, macht es zu einer fast genauso schlechten Leseerfahrung. Dafür gibt es scroll-snap, aber leider

Leider stellt sich heraus, dass man ein block-level Element benötigt, an das man schnappen kann, und die künstlich erstellten Spalten zählen nicht als solche.

Oh nein! So nah! Aber so fern!

Wenn wir tatsächlich Scroll-Snapping haben wollen, muss der Inhalt in block-level Elementen (wie <div>) enthalten sein. Es ist einfach genug, eine horizontale Reihe von <div>-Elementen mit Flexbox einzurichten, wie...

main {
  display: flex;
}
main > div {
  flex: 0 0 100vw;
}

Aber… wie viele divs brauchen wir? Wer weiß! Das sind willkürliche Inhalte, die sich ändern könnten. Und selbst wenn wir es wüssten, wie würden wir Inhalte natürlich zwischen den divs fließen lassen? Das gibt es nicht. Deshalb ist es schade, dass CSS-Regionen nie realisiert wurden. Um diese schöne Wisch-Erfahrung in CSS möglich zu machen, müssen wir entweder

• Scroll-Snapping erlauben, auf Spalten zu arbeiten
• Eine Art von CSS-Regionen haben, die in der Lage sind, wiederkehrende block-level Elemente nach Bedarf nach Inhalt automatisch zu generieren

Keines von beiden ist derzeit möglich.

Jason hat nicht aufgehört! Er hat JavaScript verwendet, um etwas herauszufinden, das weit entfernt von etwas Schwerem wie Scrolljacking ist. Zuerst ermittelt er, wie viele "Seiten" die CSS-Spalten-Technik erzeugt. Dann fügt er dem Scroll-Element Spacer-Divs hinzu, die jeweils die Breite der Seite haben, und *diese* sind die Elemente, zu denen das Scroll-Element schnappen kann. Sehr clever.

Im Moment kann man es auf der Buch-Website erleben, indem man eine optionale Einstellung aktiviert.