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

Planning Effective Higher Education Events in the Post-Covid Era

On-campus events have long been part of the life-blood of university marketing and recruitment activities. But, like so many other things, these activities have been disrupted or transformed over the past 18 months due to the impact of COVID-19 on the higher education sector in general, and on students in particular.

Read more

Logo Design: Best-practice tips and ideas

Your logo is an instant visual shorthand way of identifying your brand. Logos tap into the human brain’s ability to process imagery and pattern, and associate memory and emotion - thereby instilling instant meaning into your mark.  Read how to create an amazing logo in this blog.

Read more

Leveraging Brand Management

If your design team is struggling against tight deadlines and repetitive production work; if your scaled-back marketing team needs to ramp up activity without extra help; if production costs are growing out of control, Brand Automation might be the solution to your brand management problem.

Read more

Request a demo