PDF page size, orientation and margins with CSS @page

Set A4, Letter, landscape or custom PDF page sizes and margins with the CSS @page rule. The API has no page size parameter.

Last updated

Page size and margins are set in CSS with the @page rule. Without a size, pages are A4 portrait.

<style>
  @page {
    size: A4; /* or letter, legal, A5, A3 */
    margin: 20mm 15mm;
  }
</style>
<p>Content</p>

Landscape and custom sizes use the same property:

@page { size: A4 landscape; }
@page { size: 210mm 99mm; } /* width, then height */

One wide page in a portrait document

A named page applies its own size to the element that uses it:

@page wide { size: A4 landscape; }
.wide-table { page: wide; break-after: page; }

The element starts on a landscape page. break-after: page moves the content after it back to the default page size. Without it, that content stays on the landscape page.

Page breaks

h2 { break-before: page; }        /* each chapter starts a new page */
tr, figure { break-inside: avoid; } /* keep rows and figures in one piece */

A document longer than 50 pages is rejected with status 422 (limits).

Next step

Add headers, footers and page numbers.

FAQ

How do I set A4 or Letter page size for a PDF?
Declare it in CSS: @page { size: A4; } or size: letter. The API takes no page size parameter, and pages default to A4.
Can one page be landscape in a portrait document?
Yes. Define a named page such as @page wide { size: A4 landscape; } and give the element page: wide and break-after: page.