Printing a web page to a custom-sized PDF on macOS

Published Apr 12, 2026

Creating a custom-sized PDF document from a web page using standard browser features is still somewhat tricky. For a recent project, I was curious to find adequate workflows for all major browsers on macOS.

I’ve used two simple test pages, one for each page orientation: landscape (64cm × 36cm) and portrait (36cm × 64cm). The relevant CSS bits to configure the print output:

@page {
	/* landscape page size */
	size: 64cm 36cm;
	
	/* portrait page size */
	/* size: 36cm 64cm; */ 

	/* disable page margins */
	margin: 0;
}

html {
	/* maintain colors and backgrounds */
	print-color-adjust: exact;

	/* page background */
	background: #eee;
}

There are a few ways to produce PDFs in macOS browsers:

File → Print, then choose the Save as PDF destination (Firefox/Chrome);
File → Export as PDF (Safari);
File → Print, then Open PDF in Preview (Chrome);
File → Print, then Print using system dialog… (all browsers), with custom page size definitions that match the designs.

The results of applying these methods are tabulated below. Each result is linked to its corresponding PDF output.

Method	Firefox		Chrome		Safari
Save as PDF	P ✅	L 🛑	P ✅	L ✅	n/a
Export as PDF	n/a		n/a		P 🛑	L 🛑
Open PDF in preview	n/a		P 🛑	L 🛑	n/a
System (L page def, P orient)	P 🛑	L 🛑	P ⚠️	L ✅	P 🛑	L ⚠️
System (L page def, L orient)	P 🛑	L 🛑	P ✅	L ⚠️	P ⚠️	L 🛑
System (P page def, P orient)	P ✅	L ✅	P ✅	L ⚠️	P ⚠️	L 🛑
System (P page def, L orient)	P ✅	L ✅	P ⚠️	L ✅	P 🛑	L ⚠️

Test result matrix for printing a web page to a PDF using various methods available in macOS browsers. P stands for the portrait test case, and L stands for the landscape test case. When discussing orientation, page def refers to the custom page size’s intrinsic orientation, while orient refers to the user-facing orientation option. Successful results are marked with ✅, usable results with ⚠️, and failures with 🛑.

There are probably some browser bug reports to write, or link to, for the various failure modes, but I won’t dwell on them now. The important thing is that for each major browser on macOS, as long as you’re okay with a clunky workflow, there’s at least one method that roughly works without any extra software:

In Firefox, if you’re printing a portrait PDF, you’re in luck: the Save as PDF destination works out of the box. Otherwise, you have to Print using the system dialog…, create a custom page size that’s intrinsically in portrait orientation regardless of your design’s orientation, and save the PDF from there. For both test cases, the custom page size needs to be 360 mm in width and 640 mm in height, with 0 mm margins all around. [Gecko#1882056]
In Chrome, the Save as PDF destination works out of the box regardless of your design’s orientation. Additionally, you can produce the PDF through the system dialog, using a custom page size whose intrinsic orientation matches your design, and choosing Portrait as the orientation in the print dialog. Otherwise the PDF ends up rotated 90°, hence the ⚠️ “usable result” rating (you can press ⌘R in Preview to rotate the page afterwards).
In Safari, print through the system dialog following the same instructions as in Chrome. The method earns a mere ⚠️ “usable result” rating as the gray background on the <html> element in the test pages doesn’t fill the entire page in the PDFs. This is probably solvable with more CSS, but I haven’t investigated.
Edge and Vivaldi work the same as Chrome, as they share the Chromium engine.

Both test pages were a single page. I should hope these methods work just as well for multi-page documents. And if the built-in PDF capabilities just don’t cut it, Vasilis van Gemert pointed to an approach that works across browsers: installing a virtual PDF printer such as RWTS PDFwriter.