Right to left

binding: "right" puts the spine on the right, which is all a right-to-left book is. The cover sits alone on the left, reading on turns a page from the left edge over to the right, and on touch a swipe to the right goes forward. Your pages stay in reading order, first to last, the same as for any other book - the binding decides which side of the spine each one lands on, not you.

The page-side classes follow the screen, so opf-page--left is still the page on the left. It’s just that in this book that’s the later one of the pair.

OpenPageFlip

A page-turn effect for the web

Drag an edge

Hover the outer edge and it furls. Take hold and pull: let go past the middle and the page turns; let go early and it settles back.

Or just click

Click a page's outer edge and it turns. The middle is yours: text selects, links open. On a touch screen, a swipe anywhere turns the page.

Hard and soft

Covers are hard, so they swing as one stiff sheet. Inner pages bend along the fold, the way paper does.

Any HTML

Pages are ordinary elements. Text, images, forms, video - whatever a page holds keeps working.

The end

right-to-left.ts

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

/** A right-to-left book, the way a manga reads: the spine on the right, the cover on the left. */
export function mount(container: HTMLElement): Book {
  return createBook(container, {
    width: 400,
    height: 560,
    size: "stretch",
    cover: true,
    binding: "right", // pages turn from the left edge; a swipe to the right reads on
  });
}