A page that is a whole spread
Page 4 of this document is one landscape image covering both halves of a printed sheet, which layout: "spread" declares the way EPUB fixed layout does with rendition:page-spread-center. In double-page mode it takes a page set of its own at the full width of the viewport rather than being squeezed into one half, and it counts as both halves of its sheet, so page 3 is left facing the blank half before it and pages 5 and 6 pair again exactly as they would in print.
Narrow the window until the reader falls back to a single page: the spread is still shown whole, fitted to the width of the viewport, so a phone reader never sees half a picture. Turning the page steps over it as one unit in both modes, and the reading progress counts it as the one page of the document that it is.
Source code
1import * as ComicViewer from "@publira/comic-viewer";23const pages = [4 { id: "page-1", src: "/pages/1.jpg", title: "Page 1" },5 { id: "page-2", src: "/pages/2.jpg", title: "Page 2" },6 { id: "page-3", src: "/pages/3.jpg", title: "Page 3" },7 // One landscape image covering both halves of a printed sheet.8 {9 height: 1000,10 id: "page-4",11 layout: "spread",12 src: "/pages/spread.png",13 title: "Page 4",14 width: 1600,15 },16 { id: "page-5", src: "/pages/5.jpg", title: "Page 5" },17];1819export const Reader = () => (20 <ComicViewer.Root pages={pages}>21 <ComicViewer.Viewport />22 <ComicViewer.Toolbar />23 <ComicViewer.PageNavigation />24 </ComicViewer.Root>25);