Complete Guide: How This HTML to PDF Converter Works
Most online HTML to PDF tools take a screenshot of your page and wrap it in a PDF. You get an image: blurry when zoomed, impossible to search, useless to a screen reader. This converter does something different — it lets your own browser lay the page out, then redraws that layout as a real vector PDF. You keep your CSS and you keep your text.
Everything happens on your device
Your HTML, your CSS and the finished PDF never touch our servers. The page is rendered in a sandboxed frame inside your own browser tab, measured there, and written to a PDF there. We could not read your document even if we wanted to.
That makes the tool safe for invoices with client details, contracts, medical forms, internal reports and anything else you would not paste into a stranger's website. The only network requests are for the page itself, the PDF engine, and any images you linked to.
Real CSS support, because the browser does the layout
The converter never tries to re-implement CSS. It hands your markup to the browser at the exact printable width of your chosen paper, waits for fonts and images to settle, and then reads back where every single line of text, border and box actually landed. Anything your browser can lay out, this tool can place on paper.
- Layout — flexbox, CSS grid, floats, tables, absolute and relative positioning, multi-column text.
- Colour and fill — solid backgrounds, linear and radial gradients, background images with
cover,contain, positioning and repeating. - Boxes — borders per side, dashed and dotted styles,
border-radiusincluding different radii per corner, and outerbox-shadow. - Text — weight, italics, colour,
letter-spacing,text-transform,text-align(including justify), underline, overline and strike-through. - Lists — bullets, numbers, letters and roman numerals, nested to any depth, with the
startandvalueattributes honoured. - Opacity and clipping — element opacity and
overflow: hiddenboth carry through.
Text stays text
Every line of copy is written into the PDF as vector text with the real font embedded. That means you can select it, copy it, search it with Ctrl+F, and hand the file to a screen reader or a text-extraction pipeline. Zoom to 800% and the letters stay razor sharp, because there are no pixels involved.
To make the output match the preview character for character, the tool turns off kerning and ligature substitution while measuring, then uses the very same font file when writing the PDF. Where a line is justified or unusually spaced, each word is placed at its measured position instead, so nothing drifts.
A preview on real paper, not a web page
The right-hand pane is not an approximation. It is your document rendered at the true width of an A4, Letter, Legal, A3, A5 or Tabloid sheet, with your margins drawn in and a dashed rule wherever a page break will fall. A badge on each rule tells you which page starts there.
You can zoom in and out, snap back to fit-width, scroll through the full document, and toggle the margin guides on to check nothing is creeping into the gutter. Because the preview and the export share one rendering pass, what you approve is what you get.
Page breaks that behave
Bad page breaks are what make converted documents look cheap. This one applies the same rules a typesetter would:
- A line of text is never cut in half across two pages.
- Table rows, images, figures and SVG blocks stay whole.
- A heading is kept with the first couple of lines it introduces, so it never dangles alone at the foot of a page.
- Your own instructions win:
break-before: page,break-after: pageandbreak-inside: avoidare all read straight from the computed style, as are the legacypage-break-*properties. - Need a break with no CSS at all? Drop in
<div class="page-break"></div>.
Elements positioned with position: fixed are treated the way a printer would treat them — measured against a single sheet and repeated on every page, which is exactly what you want for a watermark or a standing footer.
Links, bookmarks and document properties
Anchors keep working. External http, https, mailto and tel links become clickable regions in the PDF, and in-page links such as href="#section-3" are resolved to whichever page that section landed on.
Your <h1> to <h6> headings are turned into a nested PDF bookmark tree, so readers get a proper outline in the sidebar of Acrobat, Preview or Chrome. Title, author, subject and keywords can all be set for the file's document properties.
Headers, footers and page numbers
Add a running head, a running foot, or both, and align each independently. Page numbers can sit in six positions and use whichever format you prefer — a bare numeral, Page 3, 3 / 12 or Page 3 of 12. You can suppress the whole lot on the first page, which is what you usually want for a cover or a letterhead.
Tokens make the text dynamic: {page}, {pages}, {title}, {date} and {time} are all substituted per page.
Nine embedded font families
Fonts are shipped with the tool and embedded straight into the PDF, so your file looks the same on a machine that has never heard of your typeface. You can name any of these in your CSS: Arimo, Tinos, Cousine, Inter, Roboto, Open Sans, Lato, Montserrat and DejaVu Sans, each with regular, bold, italic and bold-italic.
Common system font names are quietly re-pointed at a metric-compatible face — Arial and Helvetica map to Arimo, Times New Roman and Georgia to Tinos, Courier New and Consolas to Cousine. The widths are identical to the originals, so existing stylesheets need no changes and the preview cannot drift away from the PDF. DejaVu Sans is there for documents with heavy symbol, maths or extended Latin coverage.
Images, SVG and canvas
<img> tags, CSS background images, inline <svg> and <canvas> elements are all carried into the PDF. Inline SVG is rasterised at print resolution so charts and icons stay crisp, and object-fit values of fill, cover, contain, none and scale-down are respected.
Choose the image resolution that suits the job: 96 dpi for a small file to email, 150 dpi as a balance, 220 dpi by default, or 300 dpi when the document is going to a commercial printer. Data URLs and images from your own domain always work; images from other sites need to allow cross-origin reads, and when they do not, the tool falls back to a public image proxy and tells you in the notes if a picture still could not be fetched.
Full control over the sheet
Six paper sizes, portrait or landscape, four margin presets plus per-side custom margins in millimetres, and a scale control from 60% to 150% for squeezing a little more onto each page. If your layout is wider than the paper — a big table, say — the converter notices and shrinks it to fit rather than clipping it, and tells you what scale it settled on.
What is supported, honestly
No converter handles every corner of CSS. Here is where this one stands, so there are no surprises:
| Feature | Status | Notes |
|---|---|---|
| Flexbox, grid, tables, floats | Full | Measured from the browser's own layout |
| Text, fonts, alignment, justify | Full | Vector text with embedded fonts |
| Borders, radii, shadows | Full | Outer shadows; inset shadows are skipped |
| Gradients & background images | Full | Linear and radial, with size, position and repeat |
| Images, inline SVG, canvas | Full | Cross-origin images need CORS or the proxy fallback |
| Links & heading bookmarks | Full | External and in-document targets |
| Transforms | Partial | Translate, scale and rotation are handled; skew is approximated |
| Right-to-left scripts | Partial | Rendered, but bidirectional reordering may need review |
| CSS filters, blend modes, masks | Partial | Ignored during export; the underlying content still prints |
| Animations & video | Partial | Captured at their first frame, as on any printed page |
Built for actually working in
The editor has line numbers, tab indentation, automatic indent on a new line, and drag-and-drop for .html and .css files. A one-click formatter tidies messy markup or minified CSS. Press Ctrl+S or Ctrl+P to export, Ctrl+Enter to force a re-render.
Your work and every setting are saved to this browser's local storage as you type — never to a server — so closing the tab by accident does not cost you anything. Turn that off with one switch if you would rather leave no trace.
Five templates to start from
If you want to see what the tool can do before writing anything, load a template: a gradient-header invoice with a totals block, a two-column resume, a business report with callouts and a data table, a landscape certificate, and a multi-page article that demonstrates forced page breaks. Each one is fully editable and shows a different corner of the CSS support.
Who this is for
Developers generate invoices, receipts and reports from templates without standing up a headless-browser service. Designers turn a coded layout into a shareable PDF proof. Freelancers and small businesses keep a styled invoice template in the browser and export it in seconds. Writers and students take an HTML draft to a printable document with proper margins and page numbers. Anyone who has been let down by a screenshot-based converter will notice the difference the first time they try to select a line of text.
Write HTML, style it however you like, watch it land on paper, and download a PDF that behaves like a real document — all without a single byte leaving your computer. Scroll up and start typing, or load a template to see it work.