Few tips with Paged.js #

In this section, we will provide you with some valuable tips for using Paged.js, an extremely useful tool for creating visually precise PDFs using your preferred HTML to PDF API (aka Doppio).

You can find all the additional information in the Paged.js documentation.

The @media page query #

To configure your PDF with Paged.js, the first step is to add a @page media query inside a style tag of your HTML document.

@page {
    size: A4;
    margin: 20mm;
}

The size property refers to the size of the page or your 'paper'. Typically, the PDF is in A4 format, but you might need specific sizes (A3, A5, A2, etc.). It is also possible to specify a length and a width.

The margin property is used to set the margins for each page of the document (20mm in this example). This is often done in mm or cm, as PDFs are typically used for physical document formats.

The sixteen margin boxes of a page #

The page margins are segmented into 16 distinct areas, designated for inserting automatically generated elements such as page numbers and headers. These specific areas are referred to as margin boxes.

Each box can be customized with its own margin, border, padding, and content. The default dimensions of these boxes are dictated by the page box's overall margin.

This layout is the one defined by the W3C specification.

To insert content into these margin boxes, you can add new css properties.

@page {
    size: A4;
    margin: 20mm;

    /* Top-center Margin with PagedJS */
    @top-center {
        vertical-align: center;
        text-align: center;
        background: #fafafa;
        color: purple;
        content: "Top-center margin";
    }
}

Here you have added the text 'Top-center margin' in purple to the @top-center margin. The CSS properties vertical-align and text-align allow you to center your text.

The count page number #

A common requirement for a PDF is to display the page number. To do this, simply add in the property content the counter(page) value in the margin box @bottom-right-corner where you wish to show the number.

@page {
    size: A4;
    margin: 20mm;

    /* Counter page in bottom-right corner with PagedJS */
    @bottom-right-corner {
        vertical-align: center;
        text-align: center;
        background: #fafafa;
        color: purple;
        content: "P. " counter(page);
    }
}

Here, the page number will appear in the bottom right corner in purple, formatted as 'P. 10'.

Start on a new page #

Paged.js creates automatically a new page when there's too much content for one page. But sometimes, you need to decide where to split the pages yourself. Like in a document, you often want chapters to start on a new page.

For this, you can use the property break-before: page on the CSS class you want to start on a new page.

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

And there you have it, a few tips to save you time with Paged.js, but don't hesitate to consult the complete documentation on the Paged.js website. To assist you further, we have also set some of these properties by default in our template models.

Other Paged.js articles on Doppio #

Using Paged.js - Installation

Paged.js - Installation with React

Paged.js - Installation with Vue 3

Few tips with Paged.js