HTML to PDF Styling: CSS and Page Layout

Why Convert HTML to PDF

Web content that you want to print, archive, or share offline is most conveniently converted to PDF. HTML to PDF turns a dynamic web page into a fixed document.

Common situations:

• Saving web articles
• Generating online invoices/receipts
• Exporting reports
• Creating e-books

Ways to Convert HTML to PDF

Browser Print

The simplest method: in the browser, press Ctrl+P and select "Save as PDF" as the destination. The browser's rendering engine converts the web page to PDF directly.

Pros: free, good CSS support. Cons: manual operation, not suitable for batch processing; interactive elements on the page may interfere.

Online Tools

Use the HTML to PDF tool:

1. Enter a web page URL or paste HTML
2. The tool renders and converts
3. Download the PDF

Processed in the browser; content is not uploaded.

Programming Libraries

For development scenarios, use programming libraries:

• JavaScript: Puppeteer (headless Chrome), jsPDF
• Python: pdfkit, WeasyPrint
• Server-side: wkhtmltopdf

CSS Styling

CSS Support Level

Different conversion engines have different CSS support:

• Browser engine (Chrome): most comprehensive support, flex and grid both work
• wkhtmltopdf: based on old WebKit, doesn't support new CSS
• WeasyPrint: supports most CSS 2.1, some CSS 3

Confirm which CSS features the engine supports before converting to PDF.

Print-Specific CSS

Use @media print to write print-specific styles:

@media print {
  .no-print { display: none; }  /* Hide elements not to print */
  body { font-size: 12pt; }     /* Use pt not px for print */
  a { text-decoration: none; }  /* Remove link underlines */
}

Hiding Interactive Elements

Navigation, buttons, and ads on web pages are meaningless in PDF. Hide them with @media print:

@media print {
  nav, footer, .ad, .sidebar { display: none; }
}

Color Handling

• Screens use RGB; PDF printing uses CMYK
• Background colors aren't printed by default—to force printing, set -webkit-print-color-adjust: exact
• Dark backgrounds consume more ink in PDF—consider changing to light colors

Page Break Control

Page Breaks

CSS controls page breaks:

h1 { page-break-before: always; }  /* Page break before headings */
table { page-break-inside: avoid; } /* Prevent tables from being cut */
img { page-break-inside: avoid; }   /* Prevent images from being cut */

Page Break Properties

• page-break-before: page break before the element
• page-break-after: page break after the element
• page-break-inside: no page break inside the element

Preventing Orphans and Widows

p { orphans: 3; widows: 3; }  /* At least 3 lines at paragraph end/start */

Headers and Footers

Browser Print

In the browser print dialog, you can set headers and footers (page numbers, title, URL). But styling is limited.

Library-Generated

Libraries like Puppeteer allow custom headers and footers:

const pdf = await page.pdf({
  displayHeaderFooter: true,
  headerTemplate: '<div style="font-size:9pt;">Report Title</div>',
  footerTemplate: '<div>Page <span class="pageNumber"></span></div>',
  margin: { top: '60px', bottom: '60px' }
});

Image Handling

Image Paths

Use absolute paths or base64 for images in HTML:

• Absolute path: <img src="https://example.com/img.png">
• base64: <img src="data:image/png;base64,...">
• Relative paths: may not be found when converting to PDF—use absolute paths or base64

base64 Embedding

For small images, use base64 embedding to avoid path issues:

<img src="data:image/png;base64,iVBORw0KGgo...">

Large images in base64 make the HTML larger—use judiciously.

Image Clarity

• Use high-resolution images
• Don't enlarge images beyond their original size
• Vector graphics (SVG) are sharpest when converted to PDF

Font Handling

Font Loading

Web pages use Web Fonts (Google Fonts, etc.)—fonts must finish loading when converting to PDF. With programming libraries, ensure fonts are fully loaded before converting.

Font Embedding

PDFs must embed fonts to display consistently on any device. Conversion tools generally embed fonts automatically.

Common Fonts

Use common fonts (Arial, Times New Roman, SimSun) to avoid font issues.

Converting with DocsAll

HTML to PDF tool:

1. Enter a web page URL or paste HTML code
2. The tool renders the web page
3. Converts to PDF
4. Download

Processed in the browser; content is not uploaded to a server.

FAQ

Styles Lost

• CSS not loaded (external CSS path is wrong)
• Used CSS features not supported by the engine
• Fix: use inline CSS, use supported CSS features

Page Breaks Cut Content

• No page break control set
• Fix: add page-break-inside: avoid

Images Not Displaying

• Wrong path
• Cross-origin restrictions
• Fix: use absolute paths or base64

Chinese Characters Garbled

• Font doesn't support Chinese
• Encoding isn't UTF-8
• Fix: use a font that supports Chinese, declare UTF-8 encoding in HTML

Background Colors Not Printed

• Browser doesn't print backgrounds by default
• Fix: set -webkit-print-color-adjust: exact in CSS, or check "Background graphics" in the print dialog

Page Too Wide

• Web page width exceeds the PDF page
• Fix: adjust CSS width, or switch to landscape paper

Summary

The essence of HTML to PDF is CSS styling and page break control. Use @media print to write print styles and hide interactive elements. Control page breaks with page-break properties. Use absolute paths or base64 for images. DocsAll HTML to PDF tool runs in the browser—content never leaves your device.