Skip to main content

Advanced PDF Topics

Once you're comfortable with the basics, these techniques give you finer control over your PDF output.

Forcing page breaks​

Use page-break-before: always to start content on a new page:

<p>Content for page 1</p>

<p style="page-break-before: always">
  This starts on page 2
</p>

<p style="page-break-before: always">
  This starts on page 3
</p>

You can also use page-break-after: always to insert a break after an element.

Preventing page breaks inside elements​

Sometimes an image or a block of content gets split across two pages. Use page-break-inside: avoid to keep elements together:

.keep-together {
  page-break-inside: avoid;
}

li {
  page-break-inside: avoid;
}

This is especially useful for list items, cards, and image blocks.

Setting a page background color​

To set a background color for the entire PDF, use a fixed-position element:

<div id="background"></div>
<h1>My Document</h1>
#background {
  background: #f0f4f8;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

Using emojis in PDFs​

Emojis work in PDFs — you just need to load a font that supports them:

@font-face {
  font-family: 'Noto Color Emoji';
  src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}

body {
  font-family: Noto Color Emoji, sans-serif;
}

Then use emojis directly in your HTML:

<p style="font-size: 48px">😀 😃 📄 ✅ 🎉</p>

Repeating table headers across pages​

When a table spans multiple pages, you can repeat the header row on each page. Just put your header cells inside a <thead> element:

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Qty</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>5</td>
      <td>$10.00</td>
    </tr>
    <!-- more rows... -->
  </tbody>
</table>

This is enabled by default — just make sure you use <thead> and <tbody>. The same works for <tfoot> to repeat table footers.

Further reading​