The basics to run Paged.js
Paged.js comes in two flavours: a polyfill that will automatically run when you starts the browser and a npm module that you can run. Both can be adapted to your need pretty easily, but feel free to use what’s the more convenient for you, but in this chapter, we’ll focus on the polyfill.
Using Paged.js as a polyfill
To be able to run Paged.js on your document, you will need the following:
- The html and css files you want to transform into a book;
- Paged.js script (either locally, or using our CDN link);
- A web server to let the polyfill access your CSS file;
- a web browser to see the magic in the screen.
Getting the script unpkg.com
You can use the hosted version of the script on unpkg.com by copying the line of code below in the
head of your document:
You can also download that file and call it from the head of your HTML file:
As soon as your browser has loaded everything your HTML needs to be shown on screen (including images, font files, etc.), the script will start paginating the content and pages will appear on your screen. If you need a previous version of Paged.js you can check the releases on unpgk.com. Please notice the button top right to get to older versions.
Preview your work
Paged.js will manipulate the DOM so the browser can understand the css rules you wrote. On screen, pages will be shown from top to bottom on the left side of the page. To have a better understanding of what’s happening on the page, we made a small CSS file call interface that defines the layout to show your book on screen. Since we’re using
@media screen, page borders and shadow won’t appear on paper when printed. You can download this CSS file: interface-01.1 and link it to your document in the
<link href="path/to/file/interface-0.1.css" rel="stylesheet" type="text/css">. Please check the file, as it already offers options to show facing pages, recto/verso, baseline, etc.
Generate your first PDF from the browser
Once Paged.js has done its work, you can generate the PDF using the Save as PDF function your browser is using.
Click on the “Print” button of your browser. (It will most likely be in
File > Printor, on your keyboard,
CTRL/CMD + P)
Change the Destination to “Save as a PDF file”.
In the avanced settings, as Paged.js is not using any of those options, you need to be sure the that the following statements are right:
- Margins are set to “none”,
- “Headers and footers” is unchecked or set to none,
- “Background graphics” is checked.
You can then open your PDF in your favorite PDF reading tool.