Page sizes

Every page in a Format document is a fixed-size box. A Layout sets that size with a width and a height in CSS pixels, and every page it produces is exactly those dimensions.

These are the only values Format requires in pixels. The pixel value applies directly as the page box's dimensions, so the outer size of the page is one fixed unit while everything inside stays ordinary CSS: mm, cm, in, pt, and % all work exactly as they do on the web. A width or height in any other unit is rejected; the value must end in px.

Common paper sizes

ISO A series (worldwide except North America)

North American

Long-form

Converting from other units

If your size isn't in the table above, convert it. One CSS pixel is 1/96th of an inch by definition, so every absolute unit maps to pixels through a fixed ratio from the CSS Values and Units spec:

So A4 (210 mm × 297 mm) is 793.71 × 1122.52 px:

<Layout id="invoice" width={793.71} height={1122.52}>...</Layout>

Landscape and portrait

Swap width and height to rotate. The same A4 page in landscape:

<Layout id="dashboard" width={1122.52} height={793.71}>...</Layout>

A document can mix portrait and landscape by giving each run of pages its own Layout with its own dimensions. Each Layout starts on a fresh page, so the orientation switch is clean.

Custom sizes

Any positive pixel value works. For unusual formats, invitations, posters, fold-out leaflets, measure your target in millimeters or inches and convert with the ratios above.

{/* Square 6 × 6 inch invitation */}
<Layout id="invite" width={576} height={576}>...</Layout>

{/* Landscape brochure, 5 × 7 inches */}
<Layout id="brochure" width={672} height={480}>...</Layout>

{/* Portrait poster, 18 × 24 inches */}
<Layout id="poster" width={1728} height={2304}>...</Layout>

Bleed and trim

Format has no separate bleed setting. A page is exactly the width and height you give it, so bleed is something you build into those dimensions rather than a property you toggle.

Print bleed means running your background past the trim line, so slight cuts during finishing don't leave white edges. The standard is 3 mm on every side. To produce a print-ready PDF with bleed:

1. Enlarge width and height by 6 mm total, 3 mm per edge. A4 (793.71 × 1122.52 px) becomes 816.39 × 1145.20 px, since 3 mm is 11.34 px (3 × 96 ÷ 25.4).
2. Apply the background on :host, use margin for the 3 mm bleed, and use padding to hold content inside the trim:

:host {
  background: #fdf8ef;   /* fills the whole page, bleed included */
  margin: 3mm;           /* the trim line sits 3mm in from each edge */
  padding: 2cm;          /* keep content clear of the trim */
}

The background reaches the physical edge because Format lifts your :host background-color onto the page box behind the margin. The margin insets the page itself, so the color in the 3 mm band is the bleed and the trimmed page is everything inside it.

If your document is only ever read on screen (web download, email), you don't need bleed. Size the page to the finished dimensions and skip the margin.

Related

• Layout
• Flow
• Styling pages
• Margins and page padding
• Images