Creating a PDF with multiple pages in Outfit is a little different than creating any other type of template, there are a few unique challenges, but nothing that can’t be solved with a bit of thinking and some CSS.
When a document from Outfit gets exported to a PDF, all of the units you have used get converted to points. This means that working with points (pt) for any PDF work you do in Outfit, is definitely a good thing to get used to. Inches covert to points really well, so it’s only fans of the metric system that have to stray away from their preferred unit of measure.
It’s good to know straight off the bat if the document you are creating will have multiple pages (you can easily change this later but it might need a little bit of refactoring). This is an important aspect to think about because it determines the overall structure of your markup. Why, you ask? To answer that we need to know a little bit more about…
A page break in Outfit occurs when the content of the document overflows the document’s dimensions.
On the web, if you have more content than the screen can cater for, what happens? You Scroll! Because you can’t exactly scroll inside a PDF, Outfit takes the content that is overflowing the document’s dimensions and creates extra pages to accommodate the extra content.
This is why you have to think about your markup beforehand. It’s almost like working with 100vh x 100vw sections on a web page. Each section or ‘page’ in our case is the same dimensions as the document’s dimensions.
Let’s say you want to create a PDF with three pages. A nice, easy way to do that in Outfit would be creating three stacked divs, each with dimensions the same size as the document’s.
Assuming you want an A4 document with three pages, the following markup would do the job.
<body>
<div style="width: 8.3in; height: 11.7in;">
content for page 1
</div>
<div style="width: 8.3in; height: 11.7in;">
content for page 2
</div>
<div style="width: 8.3in; height: 11.7in;">
content for page 3
</div>
</body>
Exported from Outfit, you get a PDF with three pages.
If you don’t need multiple pages in your PDF, you don’t need to use divs hard-coded to the same size as the document. percentages and absolute positioning are your best friends.
@media screen for guidesYou can use media queries to add ‘guidelines’ or to indicate where the page breaks will be; and also to indicate anything else you want to display in the template, but exclude from the final export. Results in guides that won’t be exported.
Final Thought
Outfit and webkit go hand in hand. Even if you’re using a non webkit browser, remember your -webkit- prefixes for the best results when exporting your documents.