One page at a time

Some books shouldn’t open into a spread - a phone-sized reader, say, where one page is the whole point. This one stays single however wide the container gets. Turning it works the way it does everywhere else: the outer edge turns forward, the edge by the spine turns back, and the middle of the page is left alone, so selecting text and following links there just work. On a mouse, hovering shows you where to grab: the outer edge furls, and by the spine the previous page starts to curl back over.

One page at a time

Pull the edge to open it

Only the edges turn it

Click the middle of this page and nothing happens. Select this text, or follow this link to the option, and the page stays put. On a mouse, hover near an edge and it furls to show you where to grab.

Always one page

This book never opens into a spread, however wide the screen is. With the layout left on auto, a box this wide would be showing two pages.

Sized to fit

The page shrinks to fit a phone and stops growing at one phone's width on a desktop. Resize the window and watch it.

The end

single-page.ts

import "@openpageflip/core/styles.css";
import { type Book, createBook } from "@openpageflip/core";

export function mount(container: HTMLElement): Book {
  return createBook(container, {
    width: 360, // the page's ratio, and with maxWidth below, its largest size
    height: 480,
    size: "stretch", // shrinks to fit a phone
    maxWidth: 360, // but never grows past one phone-sized page
    layout: "single", // one page, however wide the container is
  });
}