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.

overflow

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.

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

Choosing fonts for different channels

When looking for that signature font combination that will distinguish your brand from the crowd, it’s important to maintain a connection with your brand while catering for the distinct requirements of different channels and messaging.

Read more

How to choose an accessible font

Aesthetics, brand attributes and on-device distribution are often the key considerations when designers and marketers come to select the fonts and typefaces they want to use in their marketing communications, but another important factor that shouldn’t be overlooked is accessibility: can the chosen fonts easily be read, and therefore understood, by people of all abilities?

Read more

How to choose the right font

From serif to sans serif, classic to traditional and everything in between, your font choices say a lot about your brand every day so it’s important to get them right!

Read more

Get a demo