Working with Prince 12’s New Page Margin Layout

What are page margins?

Web pages are a single, continuously-scrolling page, but PDFs are often made up of multiple pages. So with DocRaptor, each page has its own margin, and these margins can be adjusted with CSS. Read more in our Headers & Footers Guide.

Headers and footers are positioned inside these page margins and are not part of the page content. By default, DocRaptor documents have a very small page margin, with little room for a header or footer. Most likely, you'll want to increase the height of these margins, or your headers and footers will be cropped.

The margins do not automatically resize to fit your header and footer content height. You must explicitly define the margin height to match the content in your headers and footers.

What changed in Prince 12?

With Prince 12, content inside the page margins, such as headers and footers, can no longer be displayed outside of the margin area. This behavior change allows for better overall overflow and clearfix handling within your documents.

Prior to Prince 12, the content of page margin areas could overflow outside margin area and be displayed on top of the document content. This overflow was normally unintentional and caused by not defining the height of the margin area. But sometimes, overflowing the margin area was a useful technique for more advanced layouts such as full-bleed pages with background images and watermarked documents.

How can I fix page margins and full-bleed layouts in Prince 12?

If you see a major change in your document when testing an upgrade to Prince 12, especially to headers, footers, and full-bleed pages, read through the guide below.

Fixing Headers & Footers

If your header or footer is cut-off or missing, adjust the margin size as needed to correctly fit your header/footers. For example:

@page { 
  margin-top: 120px;
  margin-bottom: 180px;
}

Note that changing the size of your page margins will change the flow of the main content in your PDF. For more details, see our Headers & Footers Guide.

Fixing Watermarks & Overlays

If you want content to overlap your page content on every page, such as with a watermark, use the @prince-overlay page region. It is a special page region that overlays your page content. With Prince 12, all the other page regions (such as @top and @bottom) will be cut off at margin boundaries instead of extending past the margin and overlap your content. See our Watermark Example for full source code.

Fixing Page Bleeds

You may be using CSS like this to set full-bleed backgrounds:

body {
  background-image: src("full-bleed.png");
}

With Prince 12, this image will only be shown in your main document content and will not extend to your page margins. Instead, apply the background directly on the @page element like this:

@page {
  background-image: src("full-bleed.png");
}

If you want full-bleeds on only certain pages, use named pages to style different pages differently.

Need More Help?

If this guide doesn't fix your issues, please contact our support team at Support@DocRaptor.com and we'll be happy to help with upgrading to Prince 12. Thanks!