# HTML/CSS to Print-Ready PDF

Typeset a multi-page, print-ready PDF straight from HTML and CSS: @page size/margins, running chapter headers, page counters, crop and registration marks, bleed.

> Canonical page: https://elysiatools.com/en/tools/pdf-typesetting-html-css-nojs-print

- **Category:** Document Tools

- **Keywords:** html to pdf, css paged media, pagedjs, page css, crop marks, bleed, margin boxes, running header, page counter, print ready pdf, typesetting, pagination, print css, chromium print

## Overview

A CSS-paged-media typesetter: feed it one self-contained HTML document whose CSS carries the print design, and it renders a paginated, print-ready PDF - the "LaTeX-quality output from HTML" workflow, no JavaScript in your document required. The renderer loads your file in headless Chromium in print media mode and prints with page-size-from-CSS on and backgrounds on. Two engines: Paged.js, the open-source (MIT) W3C paged-media polyfill, is the default and implements the parts browsers do not - crop and registration marks (the marks property), bleed, running headers and footers through margin boxes like @top-center with string-set chapter titles, page and pages counters, named pages, generated content for lists and footnotes - it chunks your content into fixed page boxes and draws the marks outside the trim. Native Chromium is the fallback engine: Chrome 131+ implements @page sizes, margins and all sixteen margin-box regions natively, which covers many designs, but mark rendering is limited, which is why the polyfill exists. Use Auto to pick Paged.js whenever the bundled polyfill is available and fall back to native otherwise. Practical notes: keep the document self-contained (inline styles, data-URI images) since the renderer has no network fetches; @page size accepts any CSS length or named size plus landscape; the PDF page box grows by the bleed amount so marks and bleed land outside the trim, ready for the print shop; and complex scripts are laid out with the system fonts of the render host. The report metadata records the engine used and the number of pages Paged.js laid out, so you can verify the pagination before sending it to print.

## Inputs

- **HTML document** (file)
- **Extra CSS (optional)** (file)
- **Layout engine** (select)

## When to use

- Typesetting books, brochures, or booklets from web markup requiring crop marks, bleed areas, and printer alignment targets.
- Generating multi-page business reports that require running headers, chapter titles, and 'Page X of Y' counters defined via CSS margin boxes.
- Replacing complex LaTeX or desktop publishing pipelines with predictable HTML and CSS print media stylesheets.

## How it works

- Provide a self-contained HTML file (and optional external CSS stylesheet) containing print markup, inline styling, and data-URI embedded assets.
- Select the layout engine: Paged.js for full paged-media polyfill support (bleed, crop marks, string-set headers), Native Chromium for standard @page rules, or Auto to dynamically pick Paged.js with fallback.
- The headless browser renders the layout in print media mode, expands the page box to accommodate bleed and printer marks outside the trim area, and generates a downloadable PDF.

## Use cases

- Book publishing workflows requiring automated running headers, chapter breaks, and outer-margin page numbers.
- Commercial print production needing standardized trim lines, bleed margins, and registration crosses for offset or digital presses.
- Automated corporate reporting pipelines that convert HTML data templates into cleanly paginated, printable documents.

## Frequently asked questions

### Can I use external assets like hosted fonts or remote images?

No. The renderer operates without external network requests, so all images must be data URIs and styles or fonts must be embedded within the files.

### What is the difference between Paged.js and Native Chromium engines?

Paged.js polyfills full W3C paged media features like crop marks, registration marks, and bleed expansion, while Native Chromium relies strictly on built-in browser @page and margin-box support.

### How are crop marks and bleed handled in the final PDF?

When using Paged.js with bleed and marks configured, the output PDF dimensions expand beyond the trim size so printer marks appear outside the final page cut boundary.

### Does my HTML document require JavaScript for pagination?

No. Your source document requires no JavaScript; the layout and pagination logic are derived entirely from CSS @page rules and the chosen rendering engine.

### What file formats are accepted as inputs?

You can upload one primary HTML file (.html, .htm) up to 10 MB and an optional supplementary CSS file (.css) up to 2 MB.

## Related tools

- [HTML to PDF Renderer](https://elysiatools.com/en/tools/html-to-pdf-renderer): Render a limited HTML subset into a PDF with a deterministic layout
- [PDF Header/Footer Snippets](https://elysiatools.com/en/tools/pdf-header-footer-snippets): Convert HTML to PDF with reusable logo, title, and date snippets
- [HTML Mail to PDF](https://elysiatools.com/en/tools/libreoffice-html-mail-to-pdf): Render email HTML content to PDF with preserved basic formatting using Puppeteer
- [Markdown to PDF Theme Pack](https://elysiatools.com/en/tools/markdown-to-pdf-theme-pack): Convert Markdown to PDF with dark, light, or print-ready themes
- [PDF Table Extractor to CSV/JSON](https://elysiatools.com/en/tools/pdf-table-extractor-to-csv-json): Extract tables from PDFs with OpenDataLoader and export them as structured JSON, flat CSV, or HTML tables
- [PDF to PowerPoint](https://elysiatools.com/en/tools/pdf-to-powerpoint): Extract text content from PDF files and convert to PowerPoint presentation slides
- [PDF to Text Advanced](https://elysiatools.com/en/tools/pdf-to-text-advanced): Advanced PDF to text converter with page selection, formatting options, and metadata extraction
- [OCR PDF to Structured JSON Bridge](https://elysiatools.com/en/tools/ocr-pdf-to-structured-json-bridge): Extract the PDF text layer with geometry (lines by y-position, tables by column gaps, headings by font size, colon key-value pairs), then fill a user-supplied JSON Schema field by field — labels matched by normalized keys, values coerced to declared types and validated with ajv.

## Samples

- [PDF Samples](https://elysiatools.com/en/samples/pdf-samples): Generated PDF samples from tools dated 2026-02-01 to 2026-02-10
- [Markdown Slide Deck Samples](https://elysiatools.com/en/samples/md-slide-deck-to-pdf): Remark/Marp style Markdown slide decks for testing PDF export layouts
- [HTML with Images Samples](https://elysiatools.com/en/samples/html-with-images): HTML source code samples with images for testing extraction
- [HTML Viewer Samples](https://elysiatools.com/en/samples/html-viewer-samples): Sample HTML files (semantic page, form, landing page) for the in-browser HTML Viewer