HTML to PDF — Render Markup to a Paged PDF

This makes a picture of your HTML, not a text document

That sentence is the whole tool. Your markup is rendered to a bitmap, and that bitmap is placed onto a PDF page. The result looks pixel-for-pixel like the preview — the colours, the table borders, the font you styled — but it is an image. Open the PDF and try to select the total on the invoice: you cannot. Search for a word: nothing is found. A screen reader sees an empty page. That is the trade you are making, and it is the right trade for some jobs and the wrong one for others.

It is the right trade when the look is the point and the text does not need to be live — a certificate, a styled flyer, a receipt you are archiving as a visual record, a layout you built in CSS and want frozen exactly as drawn. It is the wrong trade when someone downstream needs to copy an amount, search a reference number, or run the document through anything that reads text. For that, your browser already has the better tool: File → Print → Save as PDF keeps a real text layer because it uses the browser’s own print engine. This tool exists for the cases where that engine gives you less visual control than you want.

How the render actually works, and where it diverges from a browser

Your HTML is loaded into a hidden frame, then a canvas renderer walks the DOM and paints each element onto an off-screen canvas. That canvas becomes a PNG, and the PNG is embedded into a PDF page sized to match. The reason fidelity is very good but not perfect is that this renderer re-implements CSS painting in JavaScript rather than asking the browser to paint — so it supports the common, well-worn properties (box model, flexbox, grid, tables, backgrounds, borders, web-safe and most loaded fonts) and quietly falls short on newer or exotic CSS it has not implemented.

Two consequences follow directly. First, external assets must be reachable: a font or image from another domain needs CORS headers, or the renderer cannot pull it into the canvas — the safest route is to inline images as data URLs and use system or Google Fonts. Second, if an asset hard-blocks the render, the tool surfaces an error instead of silently shipping a half-drawn page. It also renders at 2× and scales down, which is why edges stay crisp on a high-DPI screen and in print rather than looking soft.

Pagination cuts the image, so plan your breaks

Tall content does not clip — that is the good news. The renderer measures the natural height of your layout, captures the whole thing as one long image, and slices it into page-height tiles, one PDF page each. The preview draws dashed guides at exactly those slice lines so you can see the splits before you export.

The catch is that the slice is geometric, not semantic. It cuts at a fixed pixel height regardless of what is there, so a break can land straight through a line of text or a table row — the bottom half of the sentence ends up on the next page. There is no “keep this together” logic, because at the point of slicing there is no text any more, only pixels. The fix is on your side: size a page’s worth of content to the page height, or nudge blocks with top margins so the natural break falls on the boundary. If you need true text-aware pagination, that is again a job for the browser’s print dialog.

The page count is simple arithmetic you can predict. The renderer takes the total rendered height of your content and divides it by the page height, rounding up. On an A4 portrait page (1123 pixels tall at the preset), content that measures 2600 pixels tall becomes ceil(2600 ÷ 1123) = 3 pages, and the third page is only about a third full — the remainder is padded with your chosen background colour so every page is the same height. Knowing this, if you land just barely into an extra near-empty page, trimming a little content or reducing a margin often pulls the whole thing back to a clean page count.

Getting the page size right

You specify the page in CSS pixels; the tool converts to PDF points using the CSS standard of 96 pixels per inch, then 72 points per inch. So the A4 Portrait preset’s 794×1123px becomes a 595×842pt page — real A4 — and Letter’s 816×1056px becomes 8.5×11in. The presets carry the correct numbers, so the simplest path is to pick one and set your wrapper to width: 100%; height: 100%.

If you type custom dimensions, hold the aspect ratio you actually want: A4 is 1:1.414, so a custom A4-ish page wants its height ≈ 1.414× its width, or the artwork will not fill the sheet and you will get bands of background. And remember the height field defines where page breaks fall — it is not just the first page’s height, it is every page’s height.

Related tools

If what you actually want is an image of the markup rather than a PDF, the HTML to image tool uses the same renderer and hands back a PNG, JPG, or WebP directly. If the exported PDF is heavier than you want — image-based PDFs usually are — run it through the PDF compressor. And if you already have several PDFs to combine into one file, the merge PDF tool handles that without re-rendering anything.