PDFPipe

Everything else / 16:9 slide

16:9 slide page size for PDF export

A 16:9 slide is 338.67 by 190.5 millimetres, which is 1280 by 720 pixels at 96 to the inch, and it is the page to use when the PDF will be projected rather than printed.

The dimensions

One measurement in four units. Millimetres and inches are what a printer works in; points are what the PDF itself stores; pixels are only useful for checking a screen mock-up against the real thing.

  • Millimetres: 338.67 x 190.5 mm
  • Inches: 13.33 x 7.5 in
  • Points: 960 x 540 pt
  • CSS pixels: 1280 x 720 px at 96 dpi

Where the size comes from

The size follows from the screen, not the paper. Presentation software defines a widescreen slide as 13.333 by 7.5 inches, which is exactly 1280 by 720 at 96 pixels to the inch, and every projector and display expects that ratio. A PDF at this size fills a screen with no letterboxing.

What gets printed at this size

  • generated slide decks and pitch material
  • dashboards exported for a screen rather than a printer
  • one-page summaries designed to be shown, not filed

Margins that survive a real printer

12mm all round as a working minimum, and more if the deck will ever be shown on a display that overscans. Type has to be much larger than on paper: 18pt is a caption here, body copy is 24pt and a heading is 40pt, because the reading distance is metres rather than centimetres.

The CSS

16:9 slide is not one of the six named formats the API accepts, so the size has to come from the document. Declare it in the page box and set prefer_css_page_size in the request.

css
@page {
  size: 338.67mm 190.5mm;
  margin: 12mm;
}

body {
  /* Projected, not read at arm's length. Everything scales up. */
  font-size: 24pt;
  line-height: 1.3;
}

h1 {
  font-size: 40pt;
}

.slide {
  /* One slide per page, always. */
  break-after: page;
  height: 100%;
}

The render request

With a custom size the options carry no format at all: the one flag tells the renderer to use the page box the document declares.

json
{
  "html": "<!doctype html>...",
  "options": {
    // No named format. The page box in the document's own CSS is the
    // size, and this flag is what tells the renderer to use it.
    "prefer_css_page_size": true
  }
}

The mistake people make

Setting the size in pixels. A page box declared as 1280px by 720px is only 16:9 by arithmetic, and any rounding at all leaves a hairline band down one edge that is obvious against a projected white slide. Declare it in millimetres or inches.

Frequently asked

What is 16:9 slide in pixels?

1280 x 720 px at 96 dpi, at the 96 pixels to the inch that CSS assumes. That number is useful for comparing a screen mock-up against the page, and useless for laying out the document: use 338.67 x 190.5 mm instead, because a page laid out in pixels shifts whenever the render scale changes.

Can I pass 16:9 slide as a format?

No. The API accepts six named formats: A4, A3, A5, Letter, Legal and Tabloid. 16:9 slide is reached through the document's page box with prefer_css_page_size set, which is a supported path and not a workaround.

Does landscape need a different page size?

No. Landscape is the same rectangle turned, so it is set as an orientation rather than as swapped dimensions. Writing the width and height the other way round produces the same page and makes the intent harder to read later.

Other page sizes

Sizes that come up in the same conversation, and one from each of the other families.

Paste the CSS below into the playground and see the page box it produces.