Reader

<article
  class="reader h-80 w-full max-w-md columns-1 gap-x-12 overflow-x-auto overscroll-x-contain rounded-xl border border-border bg-card px-8 py-6 text-sm/7 text-card-foreground hyphens-auto text-justify [column-fill:auto] snap-x snap-mandatory motion-safe:scroll-smooth focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring supports-[selector(::column)]:[scrollbar-width:none]"
  tabindex="0"
  lang="en"
  aria-labelledby="rdr-title"
>
  <h3 id="rdr-title" class="mb-3 break-after-avoid text-base font-semibold text-foreground">
    A Short History of the Page
  </h3>
  <p class="mb-4">
    Before the scroll had a wheel attached to it, a page was a physical constraint: a sheet
    of a fixed size, filled once, then turned. The turn was free — a flick of the wrist, no
    scrollbar, no momentum to fight.
  </p>
  <p class="mb-4">
    The web flattened that into one long, unbroken scroll. It reads well for a feed and
    poorly for anything you want to hold your place in. Ask someone where they stopped in
    an article and they'll describe a scroll position; ask a reader of a book and they'll
    give you a page number.
  </p>
  <p class="mb-4">
    Multi-column layout can fold that scroll back into pages. Give a block of text a fixed
    height and let it overflow sideways instead of down, and the browser fragments the
    content into as many columns as it needs — each one a page, each one exactly the size
    of the box.
  </p>
  <p class="mb-4">
    Scroll snap turns the sideways scroll into a turn: release anywhere near a column and
    the browser settles on it, the same small commitment as a real page. The dots below are
    the same kind of marker a carousel uses, generated one per column, lit up for whichever
    one you're on.
  </p>
  <p class="mb-4">
    None of this needs a page count computed in script, a resize listener, or a virtual
    scroller. The layout engine already knows how much text fits in a box of a given size —
    pagination was something it could always do, it just needed a reason to.
  </p>
  <p>
    Turn the page a few times. Every dot below is a real, focusable stop the browser placed
    there on its own — count them, and you have counted the pages.
  </p>
</article>

/* Page snapping and page dots for the reader — ::column (CSS Multicol 2, Chrome 135+)
   plus scroll marker groups (CSS Overflow 5, Chrome 135+). This can't be expressed as
   utilities: ::column and ::scroll-marker are generated pseudo-elements, so there's no
   element to put a class on, and the marker needs `content`, which has no utility syntax.
   Everywhere else this whole block is inert and the reader stays a horizontally
   scrolled block of columns. */

.reader {
  scroll-marker-group: after;
}

/* ::column accepts scroll-snap properties only — nothing that affects layout. */
.reader::column {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.reader::scroll-marker-group {
  display: flex;
  width: 100%;
  flex-basis: 100%;
  justify-content: center;
  gap: 0.5rem;
  padding-block: 0.875rem;
}

.reader::column::scroll-marker {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--border);
  cursor: pointer;
  transition: background-color 0.15s;
}

.reader::column::scroll-marker:target-current {
  background: var(--primary);
}

How it works

• columns-1 plus a fixed h-80 makes the prose fragment: content that doesn’t fit the height goes into another column beside it, and overflow-x-auto makes those columns scrollable. One column box is one page. [column-fill:auto] fills each page top to bottom instead of balancing the last one short.
• ::column is the page. It’s the one handle CSS has ever had on a generated column box, and it accepts scroll-snap properties only — scroll-snap-align: center and scroll-snap-stop: always turn scrolling into page turns; nothing that affects layout applies to it.
• scroll-marker-group: after plus a marker on ::column gives every page a dot the browser generates, orders, and keeps in sync; :target-current marks the page you’re on. Clicking a dot scrolls to that page.
• Keep column-gap at least as large as the container’s side padding — px-8 with gap-x-12 here — or the next page peeks past the edge, since centered snapping splits the container’s inline padding evenly into the two gutters.
• hyphens-auto needs the lang attribute to pick a dictionary; break-after-avoid on the heading keeps a title off the bottom of a page.
• Prev/next buttons are the same ::scroll-button() recipe as Carousel; the dots already reach every page, so this demo leaves them out.

Why the CSS block

::column and ::scroll-marker are generated — there’s no element to put a class on — and the marker needs content, which has no utility syntax. Carousel makes the same exception for its dots and arrows. The block is optional: skip it and you keep a scrollable block of columns, just without snap points or page dots.

Accessibility

• Pagination is layout only. The text stays in one continuous DOM order, so a screen reader reads the whole piece and nothing is hidden or duplicated.
• tabindex="0" plus the focus ring makes the article keyboard-focusable. Some engines focus scrollable regions on their own; the attribute makes it explicit everywhere. Arrow keys turn pages, and mandatory snapping lands each press on a page boundary.
• The generated dots form a focusgroup: the whole row is one tab stop, and arrow keys move between dots and scroll the reader.
• The heading names the region through aria-labelledby="rdr-title".
• motion-safe:scroll-smooth, not plain scroll-smooth — the global reduced-motion rule only clamps transition and animation duration, and a dot click would otherwise slide a full page past someone who asked for less motion.
• Size the box in rem, not a viewport unit, so a larger font size produces more pages instead of clipped text.

The fallback story

Without ::column the generated columns can’t be targeted, so there are no snap points and no dots. The article is still a horizontally scrollable block of columns with an ordinary scrollbar — that’s why the scrollbar is hidden only behind supports-[selector(::column)]:[scrollbar-width:none], so engines without dots keep their one way to tell there’s more to scroll. Without scroll-marker-group you lose the dots and keep the scrolling and snapping.