Settings

Orientation

You can choose between Portrait (default) and Landscape. In both cases the page size will be an A4 format.

Margins

It is possible to set the page margins. The default size is 10mm and you can override each side of the page individually.

Depending on what you’re going for, you may choose between page margins or applying margin and padding CSS properties on the body element. Play with it, see what’s right for you!

The positions of the header and footer are not influenced by the value of the margins but their respective sizes are.

Header/Footer

Both header and footer act the same way. One is at the top of the page, the other at the bottom. The following settings apply to both.

Default formatting

Using the first three fields, you can only insert text in specific locations: left, center and right.

In all cases, you can insert magic values that will be replaced when generating the document:

  • [page] current page number
  • [topage] total number of pages

If you want for instance to automatically insert the pagination details in the top right of the page, you would do so by defining the Header Right setting to [page]/[topage].

Custom content

In most cases the default header/footer formatting is enough but in some occasions, you may need to create a custom header/footer.

That’s when the Content setting comes in handy as you can insert any HTML content you need inside.

You can use your dynamic data inside it, this is not the cas for the default formatting.

The rendering engine has some issues today that you should be aware of:

Images
Images can only be used with base64 `data:` URI.
Font size
The font-size CSS property will need to be smaller than the one used for the document’s content. The default is set to 11px.

JavaScript and CSS

You cannot use JavaScript inside the header/footer, it will not be executed.

The CSS of the template will not apply inside it so you’ll need to insert a <style> tag in the Content textarea if you want to style the content.

You can target the header and footer using the #header and #footer CSS selectors respectively.

Pagination

Using a custom content doesn’t mean you’re losing the magic of [page] and [topage] but you’ll need to write a bit more text:

  • <span class="pageNumber"></span> current page number
  • <span class="totalPages"></span> total number of pages

The corresponding values will be inserted at generation.