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.
Caveat
The behavior of header and footer can be a bit tricky to grasp at first and there’s a few things you need to know.
Header and footer need margins to be visible. If you keep the default 0
margins at the top or the bottom, you will not see your content appear. For instance the minimum recommended bottom margin for the footer to appear is 10
.
Be careful with paragraph margins. Paragraphs have a default bottom margin. If you do not suppress it using CSS or inline styles, the text of the paragraph could be hidden behind the page content.
Default formatting
Using the first three fields, you can only insert text in specific locations: left, center and right.
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 case 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.