Makzan / I share what I learnt

Setting header and footer for DocRaptor and PrinceXML PDF generation

I’m setting the header and footer content while using the DocRaptor and PrinceXML engine.

C6592D25-4FAA-4A44-AD10-A3F6F51C8F81

Nothing appears on the header and footer until I give the page some margin. That is my lesson learnt.

Originally I configure the @page margin to be 0 and use only page padding. This works until I need to place the book title name page number in the header and footer area.

headers and footers are positioned inside these page margins and are not part of the page content — DocRaptor Doc

The header and footer is not part of the content. They are part of the margin. So the margin must be enough for the header and footer content to appear.

Here is my latest CSS to configure the page to allow header and footer content to appear.

@page {
  size: A4 landscape;
  margin-left: 0;
  margin-right: 0;
  margin-top: 15mm;
  margin-bottom: 15mm;
  padding: 10mm 25mm;
  
  @top-left {
    content: "Mobile First Web Design";
    padding-left: 25mm;
    font-family: sans-serif;
    font-size: .8rem;
  }
  
  @bottom-right {
    font-size: .8rem;
    content: counter(page);
    padding-right: 25mm;
    font-family: sans-serif;    
  }
}

Published on April 20, 2019. More articles like this: Today I Learned, Writing.

Sign up for weekly dispatch each week.

Want productive tips and web technologies links like this in your inbox each week? No spam ever. Just useful content:

Read previous weekly dispatch newsletters.