Paged.js examples

Showcase books paginated in the browser with Paged.js. Live site: https://pagedjs.github.io/pagedjs-examples/ (once published).

Each example is a self-contained folder — its own HTML, CSS, images and fonts, all referenced relatively. There is no build step: open a folder in a browser and it paginates itself.

Examples

Example	Standalone	Viewer
Auroræ: Their Characters and Spectra	aurorae/	viewer
Introductory Business Statistics, exported from Ketida	ketida/	viewer
Moby-Dick	moby-dick/	viewer
Samples	samples/	viewer
Samples, Gaia theme	samples/gaia.html	viewer
The Future of Ideas	the-future-of-ideas/	viewer

Run locally

npm install
npm start

Then open http://localhost:9090/.

npm start runs serve with the options in serve.json: symlinks, so an npm linked pagedjs is followed instead of 404ing. Link to examples with a trailing slash (aurorae/); serve serves a bare /aurorae without redirecting, and relative paths then resolve against the root. serve also drops the .html extension, so the Gaia page is /samples/gaia locally and /samples/gaia.html on GitHub Pages.

Any static server that serves the tree works as well, for example python3 -m http.server.

Against a local Paged.js checkout

Until Paged.js 0.6 is on npm, this is the only way to run the examples — the published package does not have the source layout the import maps point at.

cd~/repos/pagedjs-combo && npm install && npm link # registers "pagedjs" globallycd~/repos/pagedjs-examples && npm install && npm link pagedjs && npm start

Caveats:

• Any later npm install in this repo prunes the link. Re-run npm link pagedjs.
• Other static servers need their own follow-symlinks option (python3 -m http.server follows symlinks; many others do not).
• lit, css-tree and fragmentainers are dependencies of this repo, because the import map resolves them from this tree rather than from Paged.js's own node_modules. To run a local fragmentainers checkout too, npm link fragmentainers here as well.

How loading works

There is no bundler. Each page carries an inline import map naming the concrete files every bare specifier resolves to, followed by a module script that pulls in the polyfill:

<scripttype="importmap">{"imports": {"pagedjs": "../node_modules/pagedjs/src/index.js","pagedjs/polyfill": "../node_modules/pagedjs/src/polyfill/polyfill.js","pagedjs/components": "../node_modules/pagedjs/src/components/index.js","pagedjs/css-transformer": "../node_modules/pagedjs/src/css-transformer/CssTransformer.js","css-tree": "../node_modules/css-tree/dist/csstree.esm.js","lit": "../node_modules/lit/index.js","lit/": "../node_modules/lit/","lit-html": "../node_modules/lit-html/lit-html.js","lit-html/": "../node_modules/lit-html/","lit-element": "../node_modules/lit-element/index.js","lit-element/": "../node_modules/lit-element/","@lit/reactive-element": "../node_modules/@lit/reactive-element/reactive-element.js","@lit/reactive-element/": "../node_modules/@lit/reactive-element/","fragmentainers": "../node_modules/fragmentainers/src/index.js","fragmentainers/fragmentation": "../node_modules/fragmentainers/src/fragmentation/index.js","fragmentainers/layout": "../node_modules/fragmentainers/src/layout/index.js","fragmentainers/algorithms": "../node_modules/fragmentainers/src/algorithms/index.js","fragmentainers/styles": "../node_modules/fragmentainers/src/styles/index.js","fragmentainers/components": "../node_modules/fragmentainers/src/components/index.js","fragmentainers/handlers": "../node_modules/fragmentainers/src/handlers/index.js","fragmentainers/resolvers": "../node_modules/fragmentainers/src/resolvers/index.js","fragmentainers/debug/": "../node_modules/fragmentainers/debug/"}}</script><scripttype="module">import"pagedjs/polyfill";</script>

Notes on the shape of that block:

• Import maps must be inline — <script type="importmap" src="..."> is not supported — and one map applies to one document. So the block is duplicated verbatim into every example page; paste it into a new one.
• Browsers ignore the exports field in package.json, which is why the map names concrete files rather than package names.
• css-tree resolves to dist/csstree.esm.js, its self-contained ES build; the package source is CommonJS-flavoured and would need a resolver.

Viewer

viewer/?url=<page> opens any example — or any same-origin HTML page — in a spread view with layout statistics and a fragment-outline toggle. Add &range=1-6 to paginate only part of a long book:

viewer/?url=../moby-dick/&range=1-6

Inline <style> blocks in a viewed page have their relative url()s resolved against the viewer's own document, not the page's, so examples should keep their CSS in linked stylesheets.

Add an example

Create <slug>/index.html plus book.css, and images/ / fonts/ as needed. All references must be relative, so the folder works both at the site root and under a project path.

In <head>, in this order:

1. the stylesheet links;
2. optionally a classic inline <script>window.PagedConfig = { … }</script> — it has to come before the module script, since the polyfill reads it on load;
3. the import map;
4. <script type="module">import "pagedjs/polyfill";</script>.

Then add a row to the landing page (index.html) and to the table below.

Provenance and licenses

Example	Text source	Text license	Markup / CSS	Notes
aurorae	Project Gutenberg, Auroræ: Their Characters and Spectra, J. Rand Capron	Public domain (Project Gutenberg License)	MIT	Fonts: Spectral (OFL 1.1), HK Grotesk (OFL 1.1), Daubenton (see aurorae/fonts/daubenton/LICENSE.txt)
ketida	OpenStax, Introductory Business Statistics (© 2018 Rice University), HTML exported from Ketida	CC BY 4.0	MIT	Attribution required — see the copyright page in ketida/index.html
samples	Electric Book Works, Samples, selection by Arthur Attwell (ISBN 978-1-928313-13-7)	CC BY 4.0	MIT	Frontmatter, images, code and mathematics, indexes
samples (Gaia theme)	Same markup as samples	CC BY 4.0	gaia.css ported from electricbookworks/paged-design (CC0 1.0)	Fonts (Crimson Pro, Inter) are loaded from Google Fonts at runtime
moby-dick	Project Gutenberg / Virginia Tech transcription	Public domain	MIT	Long-document example
the-future-of-ideas	Lawrence Lessig, The Future of Ideas (2001)	CC BY-NC (non-commercial only)	MIT	The text may not be reused commercially

License

The HTML structure, CSS and tooling in this repository are MIT — see LICENSE. The book texts, images and fonts keep their own licenses, listed above.