CSS Print Architecture: Mastering the @page Directive
To produce professional, publication-grade PDFs from HTML, web developers utilize CSS Paged Media rules. The @page at-rule controls paper dimensions, orientation, and perimeter margins:
@media print {
@page {
size: A4 portrait;
margin: 15mm 10mm 15mm 10mm;
}
body {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
background: #ffffff !important;
color: #000000 !important;
}
.no-print, header, nav, footer {
display: none !important;
}
.page-break {
break-before: page;
}
table, tr, td, .card {
break-inside: avoid;
}
}
Paper Size & Resolution Reference Guide
The table below provides standard dimensions, aspect ratios, and pixel dimensions at 300 DPI (standard print resolution) across popular global document formats:
| Paper Standard | Dimensions (Millimeters) | Dimensions (Inches) | Pixel Canvas (300 DPI) | Primary Global Usage |
|---|---|---|---|---|
| ISO A4 | 210 × 297 mm | 8.27 × 11.69 in | 2480 × 3508 px | International standard (Europe, Asia, Latin America, Australia). |
| US Letter | 215.9 × 279.4 mm | 8.50 × 11.00 in | 2550 × 3300 px | Standard commercial format in United States & Canada. |
| US Legal | 215.9 × 355.6 mm | 8.50 × 14.00 in | 2550 × 4200 px | Court filings, real estate agreements, commercial contracts. |
| ISO A5 | 148 × 210 mm | 5.83 × 8.27 in | 1748 × 2480 px | Pocket booklets, formal flyers, receipts, and medical charts. |
The 4-Step Architecture for Designing Print-Ready HTML Documents
-
Step 1: Design in Fixed Physical Units (Millimeters & Inches)
While screen design utilizes responsive viewport units (
vw,vh) and percentages, printable document wrappers must be styled using fixed physical dimensions (such aswidth: 210mm;for A4) to prevent unpredictable layout reflow when passing into PDF canvas rasters. -
Step 2: Force Exact Color Fidelity in Backgrounds
Web browsers automatically disable background colors and gradients during print generation to conserve physical printer ink. To force background banners, invoice header fills, and badge colors to render into your PDF, always declare
print-color-adjust: exact !important;and-webkit-print-color-adjust: exact !important;on body and container elements. -
Step 3: Embed Web Fonts via Base64 or HTTPS CDNs
When generating PDFs on devices that lack local system fonts, standard typography reverts to generic serif or sans-serif fallbacks. Guarantee cross-device visual consistency by loading fonts via HTTPS from reliable CDNs (like Google Fonts) or embedding critical font files as base64 data URIs directly within
@font-faceblocks. -
Step 4: Audit Image Assets for High-DPI Print Clarity
Standard web images at 72 DPI appear blurry and pixelated when printed or zoomed in a PDF viewer. Ensure logos, signature stamps, and certification badges use vector SVG graphics or high-resolution PNG images rendered at a minimum of 200 to 300 DPI.
Frequently Asked Questions About Converting HTML to PDF
Why do some external images fail to appear in my generated PDF?
When images are hosted on third-party domains that do not send Cross-Origin Resource Sharing (CORS) headers (Access-Control-Allow-Origin: *), browser security models block html2canvas from reading the image pixel data to prevent cross-origin data exfiltration. Ensure images are hosted on the same origin or are converted into base64 data URIs.
How can I make my PDF selectable and searchable rather than an image?
Clicking the "Native Browser Print (Ctrl+P)" button opens your browser's native print spooler. Selecting "Save as PDF" produces a 100% native vector PDF with fully highlightable, selectable text, active hyperlinks, and compact file size.
Can I convert password-protected web pages to PDF?
Yes. Because this tool runs client-side inside your active authenticated browser session, you can paste the rendered HTML from any internal dashboard or intranet portal and export the PDF instantly without configuring server authentication cookies.
How do I remove browser headers and footers (URL, date, page title)?
In your browser's native print dialog (accessed via Ctrl+P or our Native Print button), expand "More settings" and uncheck "Headers and footers". This produces a clean, unblemished PDF document suitable for formal business delivery.