Web-to-print-with-pagedjs

Printing from HTML & CSS

Did you know you can design beautiful printed books, flyers etc. directly in CSS and HTML? This seems like a strange technology to use, because it is much easier to do in Indesign. However, doing it directly from HTML and CSS offers some unique possibilities:

• Better hybrid publishing workflow
  • You can create a publication that has HTML as it's source and from there can be exported to many different formats, including a printed book, pdf file, website, web app, epub etc. Because you have one online source, it is easy to update and collaborate on without having the trouble of sending around multiple versions etc.
• Customized printed publications
  • Printing from HTML & CSS allows you to create printed publications that are tailored to individual users because both the content and design can easily be changed programmatically.

This technology is still rather niche, so many applications for it are relatively underexplored.

Why Paged.js?

For decades, CSS has included possibilities for designing printed publications. Unfortunately, browsers have stopped adhering to these standards for print CSS. This means that you can design a beautiful books in your CSS, but when you print it directly in the browser (like you are supposed to do) it will miss a lot of features that make a book a book. There are many initiatives out there that fix this issue in different ways. One way is to send the file to a server and make a pdf from it there, but this can get rather complicated. Paged.js solves it by using JavaScript to interpret you CSS and force the brower to interpret it correctly when printing. For many designers, this is the simplest solution.

How to get started ith the Paged.js polyfill

The general workflow is to include a link to the Paged.js polyfill (the easiest option) in the head of your HTML document like this:

<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>

After that, all of your print CSS should be correctly interpreted by the browser. It will also automatically show a preview of the print version in you browser window. But be careful, it doesn't work on local files! Therefore, the easiest way to work with it is to run your HTML and CSS files in Visual Studio Code with the Live Server extension.

Writing print CSS

The documentation of print CSS is excellent on Paged.js, so I won't repeat it here. Please follow their instructions here and enjoy!

Example CSS

Here is an example of a css file that uses many different print properties.

body {
    background: red;
    font-size: 35px;
}

@media print {
    @page {
        size: A5;
        margin: 5mm 10mm;
        bleed: 6mm;
        marks: crop;
        /* background-image: url('SILVER-HOLOGRAM-scaled.jpg'); */

        @top-right {
            content: "My beautiful book";
            font-size: 15px;
            color: brown;
        }

        @bottom-right {
            content: "page "counter(page);
        }

        @bottom-center {
            content: string(title);
        }
    }

    @page chapterpage {

        @bottom-right {
            content: "";
        }

    }

    @page: first {
        @top-right {
            content: "";
        }

        @bottom-right {
            content: "";
        }

        @bottom-center {
            content: "";
        }

        background-image:url('SILVER-HOLOGRAM-scaled.jpg');

    }

    @page: right {
        margin-right: 20mm
    }

    @page: left {
        margin-left: 20mm
    }

    body {
        background: white;
    }

    h2 {
        break-before: right;
        string-set: title content(text);
        page: chapterpage;
    }

    h1 {
        break-after: page;
    }

    .page-break {
        break-before: page;
    }

}