Preview HTML as a printed page and save it as PDF

How to use the HTML preview

1. Paste your HTML into the HTML box: a fragment, such as the sample invoice, or a full document.
2. Choose the Page size (A4, US Letter or A5) and the Orientation.
3. Set the Margins in millimetres, from 0 to 50. The default is 18 mm.
4. Leave Add print-friendly styles ticked unless your HTML already has its own print CSS.
5. Check the Print preview, then press Print / Save as PDF. You can also copy the Print-ready HTML or download it as print.html.

What it does and when to use it

Plain HTML has no idea of paper. Printed straight from a browser, it uses the default page size of your printer settings, splits table rows across pages and often prints at a font size that is too small. This tool adds the CSS rules that control printing, so an invoice, a receipt, a report or a set of notes comes out on the page size you chose.

It suits HTML that is generated by a script or a template, HTML from an email, or a table you built with the HTML Table Generator. If the markup is minified and hard to read, open it in the HTML Formatter first.

How it works

The tool adds one style block. It always contains an @page rule with your size, orientation and margin. With print-friendly styles on, it also sets 11 pt Georgia text in black on white, limits the width to 180 mm in portrait or 260 mm in landscape, gives tables collapsed borders, and asks the browser not to break inside table rows, images, pre blocks or quotes, or straight after a heading.

If your HTML has a head, the block goes just before </head>. If it has only an html tag, a head is added. A fragment is wrapped in a complete document with <meta charset="utf-8">. Everything happens in your browser.

Worked examples

A5 landscape with narrow margins. For <h1>Report</h1>, A5, landscape and 10 mm, the style block starts with:

@page { size: A5 landscape; margin: 10mm; }

Page rules only. Untick print-friendly styles and the fragment <p>x</p> becomes a full document whose only CSS is @page { size: A4 portrait; margin: 18mm; }.

A complete document. In <html><head><title>T</title></head><body>x</body></html> with US Letter, the styles are placed right after the title, inside the existing head, so nothing else in your document changes.

Limits and tips

• Page breaks follow CSS. To force a new page before a section, add style="break-before: page" to it.
• Browsers differ slightly in how they honour @page; Chromium-based browsers follow it most closely.
• Long tables still split across pages between rows. Put the header row in a thead so most browsers repeat it on each page.
• For a plain-text version of the same content, use HTML to Text.