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 0mm 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.
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 be used with remote URL or 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.