Creating Better PDFs in Outfit

John Morris — 21st December 2015

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.

Use inches and points

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.

Getting Started

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…

How page breaks work

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.


    <div style="width: 8.3in; height: 11.7in;">
      content for page 1

    <div style="width: 8.3in; height: 11.7in;">
      content for page 2

    <div style="width: 8.3in; height: 11.7in;">
      content for page 3


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.

Using @media screen for guides

You 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

Webkit all the things

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.

Share this post

Latest Posts

How To Build Customer Loyalty In The Real Estate Sector

Customer loyalty is crucial to building a strong brand. The Real Estate sector deals with products and services that are highly personal. It is no surprise then, that word of mouth from well nurtured customers carries significant weight with an audience of new potential customers. 

Read more

The Pros And Cons Of Co-Branding For Franchises

Franchise co-branding with other businesses in psychically similar industries may take many forms. Whether the co-branding activity is the sharing of physical space or simply a shared campaign, the intention is primarily to capitalise on the strength of two brands to expand the pool of customers and attract more business. 

Read more

How to manage an efficient digital asset workflow

Management of digital assets is an issue that organisations of every size must face at some stage of operation. Everything from logos, fonts, photography, stock imagery document files and more must be thoughtfully stored with permissions managed appropriately so that the right parts of the business are matched to the best resources for their application. 

Read more

Request a demo