Page Layout & Style

Properties

Size and Orientation

Page size and orientation can be changed using the CSS @page { size } rule.

1@page {
2  size: letter landscape;
3}

Margins

Header and Footer

Header and footer components, such as defined using <PageTop> and <PageBottom>, live in the margin area. If the margin is too small, the header and footer may be clipped.

Margin Units

If your PDF is meant for printing, it is best advised to set the margin properties in absolute units, such as in or cm. Font-size relative units such as em or rem are not recommended, as changing the root font-size may affect the readability of content close to page edges.

Margins can be set using the CSS @page { margin } rule.

1@page {
2  margin: 1in;
3}

Alternate Margins

You can set different margins for various pages using page-specific layouts.

Headers and Footers

Headers and footers can be added to your documents by removing elements from the flow and placing them in the margin area. We recommend using the <PageTop> and <PageBottom> components to create headers and footers.

Header and footer elements appear on all subsequent pages to where they would appear in the normal flow.

This has several implications:

  • If you wish to have the header and footer on all pages, you should put them at the very beginning of the document,
  • You may overwrite the header and footer by creating a new header and footer later in the document flow,
  • If you wish to have different headers and footers on different pages, you should use page-specific layouts.
1import { PageTop, PageBottom, PageNumber, PagesNumber } from '@fileforge/react-print';
2
3<body>
4<PageTop>
5  <h1>Header</h1>
6</PageTop>
7<PageBottom>
8  <PageNumber /> of <PagesNumber />
9</PageBottom>
10<main>
11{/** Your content here **/}
12</main>
13</body>

Background Graphics

You can add edge-to-edge background graphics to your document by adding background properties to the @page rule.

1@page {
2  background-color: lightblue;
3}
4
5@page:first {
6  background-image: url('background.jpg');
7  background-size: cover;
8}

Watermarks

You can add watermarks to your document by adding @prince-overlay properties to the @page rule.

1@page {
2  @prince-overlay {
3    content: "Confidential";
4    font-size: 48pt;
5    color: lightgray;
6    transform: rotate(-45deg);
7  }
8}

Page-Specific Layout

Page Selectors

You can use various properties to style only specific pages in your document. For example, you can set different margins for even and odd pages, or you can add a background image to the title page.

1/** By default, the first page of a document is a right page **/
2@page:right {
3  margin-right: 1in;
4}
5
6@page:left {
7  margin-left: 1in;
8}

Named Pages

@page rules apply to all pages in the document. If you wish to control aspects of a specific page, you can use named pages and apply the rules to the named page. Named pages work similarly to all other @page selectors.

1table {
2  page: page-landscape;
3}
4
5@page page-landscape {
6  size: landscape;
7}

You can then use the table-landscape class to apply the landscape layout to a specific table. The table will be moved into a new page with the landscape layout.

1<table class="table-landscape">
2  <tr>
3    <th>Header 1</th>
4    <th>Header 2</th>
5  </tr>
6  <tr>
7    <td>Row 1, Cell 1</td>
8    <td>Row 1, Cell 2</td>
9  </tr>
10</table>