Prerequisite Knowledge

It's easy to create headers and footers with DocRaptor, but it first requires understanding "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. These margins can be adjusted with CSS.

This is important, because 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 your headers and footer. To do, simply change the top and bottom margins on the @page element, like this:


<style>
@page {
  margin-top: 120px; /* header height */
  margin-bottom: 80px; /* footer height */
}
</style>

Text-based Headers & Footers

The CSS content property allows you to define simple, text-based headers and footers. For example:

<style>
@page {
  margin-top: 20px;
  @top {
    /* header with counter functions to insert page counters */
    content: "Page " counter(page) " of " counter(pages) " pages "
  }
}
</style>

You can even copy text strings from existing content, such as section or chapter titles:

<style>
@page {
  margin-bottom: 20px;
  @bottom {
    /* footer with string function to copy document content, see h1 rule below */
    content: string(chapter-title)
  }
}

h1 { 
  /* use string-set to define a new string, copied from document content */
  string-set: chapter-title content();
}
</style>

HTML-based Headers & Footers

If you want a header or footer that is more than just simple text, you can easily create HTML-based headers and footers through the CSS flow property. It removes HTML content from your document's normal layout and put it into a named "flow" . You can then define that flow as the content for your headers and footers. It will be repeated on every page.

Footer HTML must be placed at the top of your page because flow isn't created until the HTML is read by the parser. if the footer HTML is placed at the bottom of 10-page document, only the 10th page will have the footer displayed.

Here's an example of a footer (headers work exactly the same way, just with a @page @top rule instead):

<body>
<style>
footer {
  flow: static(footer-html);
}
@page {
  margin-bottom: 80px;
  @bottom {
    content: flow(footer-html);  
  }
}
</style>

<footer>
  <a href="https://docraptor.com">DocRaptor is awesome!</a>
<img src="https://docraptor.com/docraptor-logo.png" />
</footer>
<!-- Note: The footer content is ABOVE the rest of the document content -->
<p>Normal document content </p>
</body>

Headers and footers can be styled with normal CSS code. You can add background images, change font styles, float page numbers to the right, etc..

Different Headers & Footers on Different Pages

If you want to have different headers and footers on different pages, you can use named pages to specify which pages the headers and footers go on. More details are available in this page on named pages.

If you have any problems, or we didn't your answer your question with this document, please contact our support team!