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;    
  }
}
Makzan
I teach web design. I write books on HTML5 games development. I host classes on mobile web and app development. I made animation with Adobe Flash (now Animate).

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.