HTML to PDF: The Complete Guide to Perfect Conversion
Converting HTML to PDF sounds simple — but getting perfect results requires understanding how browsers handle pagination, CSS print styles, and the subtleties of page break control. This guide explains everything.
Why Page Breaks Are the Hardest Part
The most common complaint with HTML-to-PDF tools is content being cut in the wrong place — a heading appearing at the bottom of a page while its content starts on the next, a table row split across pages, or an image sliced in half. These issues are caused by the rendering engine not knowing which elements should stay together.
✅ Smart Breaks ON
Headings stay with content, tables intact, no orphan rows
❌ Smart Breaks OFF
Content breaks at fixed intervals regardless of context
💡 Manual Control
Use <!-- PAGE_BREAK --> to force breaks at specific points
CSS Properties That Control Page Breaks
You can add these CSS properties directly in your HTML's <style> tag to control exactly how pages break:
| Property | Value | Effect |
|---|---|---|
| page-break-before | always | Force new page before element |
| page-break-after | avoid | Don't break after (e.g. headings) |
| page-break-inside | avoid | Keep element on one page |
| orphans | 3 | Min. lines at bottom of page |
| widows | 3 | Min. lines at top of next page |
More Free Tools
Frequently Asked Questions
Is my HTML uploaded to a server?
Yes, the HTML is sent to our server for PDF generation using a real headless Chrome browser — which is why the output quality is so high. We do not store your HTML; it is deleted immediately after the PDF is generated.
What is the maximum HTML size?
Up to 500,000 characters (roughly 500KB of HTML). For larger documents, consider splitting into multiple conversions.
Will my CSS styles be preserved?
Yes. Since we use a real Chrome browser (Puppeteer), all CSS — including flexbox, grid, custom fonts, background colors, and gradients — is rendered exactly as it would look in a browser.
How do I force a page break at a specific point?
Add <!-- PAGE_BREAK --> as a comment anywhere in your HTML. It will be converted to a CSS page-break: always instruction at that point.