The Trickery it Takes to Create eBook-Like Text Columns

Jason Pamental's recent work on Web Fonts & Typography News showcases a clever approach to creating swipeable columns for a mobile-friendly eBook experience. The challenge? Generating full-width columns that dynamically adjust horizontally as needed.

A seemingly simple solution using CSS columns initially appears promising:

columns: 100vw auto;

Adding some refinements:

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

While close to ideal, the resulting scrolling proves jerky and unsatisfactory. Attempts to improve smoothness using -webkit-overflow-scrolling: touch; and scroll-snapping fall short due to limitations in how scroll-snapping interacts with automatically generated columns. Scroll-snapping requires block-level elements, which the CSS columns technique doesn't inherently provide.

A flexbox approach using <div> elements offers a potential solution: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">main { display: flex; } main &gt; div { flex: 0 0 100vw; }</pre><div class="contentsignin">Copy after login</div></div> <p>However, this requires pre-defining the number of divs, which is impractical for variable content. The lack of CSS regions, a feature that would automatically generate block-level elements, further complicates matters.</p> <p>Pamental's ingenious workaround employs JavaScript. It determines the number of "pages" generated by the CSS columns method, then inserts spacer divs, each the width of a page, into the scrolling container. These divs act as scroll-snap targets, enabling smooth, page-like swiping. This clever technique effectively sidesteps the limitations of CSS alone. Currently, this enhanced experience is available as an optional setting on the book's website.</p> </div>

The above is the detailed content of The Trickery it Takes to Create eBook-Like Text Columns. For more information, please follow other related articles on the PHP Chinese website!