Optimizing HTML for Professional PDF Output

In today's digital age, PDF documents remain essential for preserving formatting across different devices and platforms. However, converting HTML to PDF can be challenging, with inconsistencies in layout, styling issues, and performance problems frequently arising. This comprehensive guide explores best practices for structuring and optimizing your HTML to achieve flawless PDF conversion results.

Why HTML to PDF Conversion Can Be Challenging

Converting web content to PDF format involves translating dynamic, responsive designs into fixed-layout documents. This process introduces several inherent challenges:

• Rendering Inconsistencies: Different PDF engines interpret HTML and CSS differently than browsers.
• Page Breaks: Web content flows continuously, while PDFs require discrete pagination.
• Font Rendering: Font inconsistencies between web and print environments.
• Fixed vs. Responsive Layout: Transitioning from fluid layouts to fixed dimensions.
• Resource Management: Handling images, scripts, and styles during conversion.

Developers who understand these fundamental challenges can properly structure their HTML documents from the beginning to ensure smooth conversion processes.

Key Takeaway

Start with the end in mind. When planning a document that will ultimately become a PDF, consider the fixed-layout nature of the final output from the beginning of your design process.

Understanding PDF Rendering Engines

The rendering engine used for conversion significantly impacts the quality of your final PDF. Most HTML to PDF converters fall into two categories:

Browser-Based Engines

These solutions (like Puppeteer, Playwright, or headless Chrome) use browser rendering engines to generate PDFs:

• Advantages: Excellent CSS support, JavaScript execution, modern web feature compatibility.
• Disadvantages: Memory-intensive, potentially slower for large documents, may require server resources.

Dedicated PDF Libraries

Specialized libraries like WeasyPrint, PDFKit, wkhtmltopdf, and many others are purpose-built for HTML to PDF conversion, with options available for most programming languages:

• Advantages: Often faster processing, lower resource usage, better control over PDF-specific features.
• Disadvantages: May have limited support for advanced CSS or JavaScript.

Understanding which type of engine your conversion process uses will help you optimize your HTML accordingly. For example, if using a browser-based engine, you can leverage more complex CSS, while dedicated libraries might require simpler styling approaches.

Choosing the Right Solution for Your Needs

When selecting a conversion engine, consider these factors:

1. Document complexity: How sophisticated is your HTML/CSS.
2. JavaScript requirements: Does your content rely on dynamic JavaScript execution.
3. Performance needs: What are your speed and resource requirements.
4. Scale: Are you generating one-off documents or thousands in batch.

Best Practice

Test your document with multiple rendering engines before committing to a specific conversion approach. Different engines may produce dramatically different results with the same input HTML.

HTML Structure Best Practices

The foundation of successful PDF conversion lies in well-structured HTML.

Here are key principles to follow:

Use Semantic HTML

Semantic elements provide structure that PDF converters can interpret more effectively:

❌ Poor structure:

<!-- Generic divs provide no structural meaning to PDF converters -->
<div class="title">Report Title</div>
<div class="subtitle">Quarterly Results</div>

✅ Better structure:

<!-- Semantic header element clearly defines document structure -->
<header>
  <h1>Report Title</h1>
  <h2>Quarterly Results</h2>
</header>

Implement Proper Nesting

Maintaining a logical document hierarchy with properly nested elements is crucial for PDF conversion success. Proper nesting ensures that the PDF engine correctly interprets the document structure.

How to Properly Nest Elements:

<!-- Uses semantic article instead of generic div -->
<article>
  <!-- Uses semantic header element -->
  <header>
    <h1>Annual Financial Report</h1>
    <p class="date">January 2025</p>
  </header>

  <!-- Uses proper semantic sections instead of ungrouped content -->
  <section id="executive-summary">
    <!-- Follows correct heading hierarchy (h1 → h2) -->
    <h2>Executive Summary</h2>
    <p>Financial highlights from the past year...</p>

    <!-- Properly nests related content in a semantic section -->
    <section id="key-metrics">
      <!-- Maintains logical heading progression (h2 → h3) -->
      <h3>Key Performance Metrics</h3>
      <ul>
        <li>Revenue growth: 12%</li>
        <li>Profit margin: 8.5%</li>
      </ul>
    </section>
  </section>

  <!-- Consistent use of section elements instead of mixing section and div -->
  <section id="financial-statements">
    <h2>Financial Statements</h2>
    <!-- More content -->
  </section>
</article>

Common Nesting Mistakes to Avoid:

<div class="report">
  <!-- Missing header grouping -->
  <h1>Annual Financial Report</h1>
  <p class="date">January 2025</p>

  <!-- Improper heading hierarchy -->
  <h3>Executive Summary</h3> <!-- Should be h2 -->
  <p>Financial highlights from the past year...</p>

  <!-- Ungrouped related content -->
  <h4>Key Performance Metrics</h4>
  <ul>
    <li>Revenue growth: 12%</li>
    <li>Profit margin: 8.5%</li>
  </ul>

  <!-- Inconsistent section structure -->
  <div class="statements">
    <h2>Financial Statements</h2>
    <!-- More content -->
  </div>
</div>

tip

• Structure: Use <article> as container, with <section> elements for each major part.
• Hierarchy: Implement proper heading hierarchy: h1 → h2 → h3 etc.
• Group related fields and elements.

Control Page Breaks

Managing page breaks is essential for professional PDF documents. Without proper page break control, your content can split awkwardly across pages, creating poor reading experiences and unprofessional results.

How to Control Page Breaks Effectively

Avoid breaking inside important elements:

h2, h3, table, .important-box {
  page-break-inside: avoid;
}

Force breaks after major sections:

section, .chapter-end {
  page-break-after: always;
}

Prevent orphaned headings:

h2, h3 {
  page-break-after: avoid;
}

Keep minimum lines together (avoid orphans/widows):

p {
  orphans: 3; /* Minimum lines at bottom of page */
  widows: 3;  /* Minimum lines at top of page */
}

Visual Comparison of Page Break Control

Uncontrolled Page Breaks
Without: page-break-inside: avoid;

Controlled Page Breaks
Using: page-break-inside: avoid;

Page Break Control for Specific Elements

Tables

Keep header with first few rows:

thead {
  display: table-header-group;
}

Allow row groups to break across pages:

tbody {
  page-break-inside: auto;
}

Keep individual rows together:

tr {
  page-break-inside: avoid;
}

Preventing Table Row Splitting

Table Rows Split Across Pages
Without page-break-inside: avoid; on tr elements

Controlled Table Rows
Using page-break-inside: avoid; on tr elements

Images and Captions

Keep figure and its caption together:

figure {
  page-break-inside: avoid;
}

Lists and Related Items

Keep list intro with first few items:

.list-container {
  page-break-inside: avoid;
}

Allow very long lists to break:

.long-list {
  page-break-inside: auto;
}

Keep list items together:

li {
  page-break-inside: avoid;
}

Common Page Break Mistakes to Avoid

/* Too aggressive - may cause large empty spaces */
.content-box {
  page-break-inside: avoid; /* Problematic if box is very large */
}

/* Breaking all sections - wastes paper */
section {
  page-break-before: always; /* Forces break before every section */
}

/* Creates potential empty pages */
h2 {
  page-break-after: always;
  page-break-before: always;
}

tip

• Avoid breaks: Use page-break-inside: avoid on elements that should stay together.
• Force breaks: Apply page-break-after: always at logical document divisions.
• Prevent orphaned headings: Set page-break-after: avoid on headings.
• Control text flow: Use orphans and widows properties to prevent single lines.

PDF Headers and Footers Implementation

Headers and footers are essential elements in PDF documents that enhance navigation, reinforce branding, add professional context, and improve the overall user experience. Creating effective PDF headers with page numbering and consistent branding requires selecting the right implementation approach based on your specific needs and conversion tools.

Approach 1: Fixed Positioning Method (Basic Implementation)

While simpler to implement, this approach has significant limitations for professional PDF documents and is generally not recommended for production use.

CSS for header with fixed positioning:

.page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: white;
    border-bottom: 1px solid #ddd;
}

.content {
    margin-top: 80px; /* Space for header */
}

HTML structure:

<body>
    <div class="page-header">
        <img src="logo.png" alt="Company Logo">
        <p>Confidential Report</p>
    </div>

    <!-- Main content would go here -->
    <div class="content">
        <!-- Document content -->
    </div>
</body>

View example output

Approach 2: CSS Paged Media (Professional Implementation)

This approach leverages the CSS Paged Media specification to create true document headers and footers with precise control over positioning, page numbering, and styling.

CSS for header and footer with Paged Media:

@page {
    size: A5;
    margin: 2cm;

    /* Header areas */
    @top-left {
        content: element(headerLeft);
        border-bottom: 1px solid #ddd;
    }
    @top-center {
        border-bottom: 1px solid #ddd;
    }

    @top-right {
        content: element(headerRight);
        border-bottom: 1px solid #ddd;
    }

    /* Footer with page numbers */
    @bottom-center {
        content: counter(page) " / " counter(pages);
        font-size: 10pt;
    }
}

/* Define running elements */
.headerLeft {
    position: running(headerLeft);
}

.headerRight {
    position: running(headerRight);
    font-size: 10pt;
    text-align: right;
    color: #666;
}

HTML structure:

<body>
    <!-- Running header elements must be defined first -->
    <div class="headerLeft">
        <img src="logo.png" alt="Company Logo for PDF header">
    </div>

    <div class="headerRight">
        Confidential Document
    </div>

    <!-- Main content would go here -->
    <h1>Chapter 1: Introduction</h1>
    <!-- Document content -->
</body>

note

This solution works best with specialized PDF converters like Prince and PDFreactor that fully support the CSS Paged Media specification. Always check your conversion tool's documentation for compatibility.

Approach 3: Browser-Based API Implementation

Many modern browser-based PDF generation tools provide built-in header and footer functionality through their APIs, offering a streamlined implementation path.

Playwright example:

// PDF generation with Playwright
await page.pdf({
    path: 'document.pdf',
    format: 'A5',
    displayHeaderFooter: true,
    headerTemplate: '<div style="font-size:10px;width:100%;text-align:center;padding:5px;"><strong>Company Name</strong> Confidential Report</div>',
    footerTemplate: '<div style="font-size:10px;width:100%;text-align:center;padding:5px;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>',
    margin: { top: '1.5cm', bottom: '1.5cm' }
});

HTML structure (simplified, actual headers/footers handled by tool):

<!-- No special HTML needed for headers/footers -->
<div class="content">
    <!-- Document content -->
</div>

View example output

Document Structure Do's and Don'ts

Proper HTML document structure is the foundation for successful PDF conversion. A well-structured document not only improves PDF rendering consistency but also enhances accessibility and maintainability.

Do ✅	Don't ❌
Use semantic elements: <article>, <section>.	Rely on generic divs with classes.
Create a logical heading hierarchy: h1 → h2 → h3.	Skip heading levels or use headings for styling.
Keep related content in appropriate containers.	Scatter related content across the document.
Structure with pagination in mind.	Ignore page breaks in fixed-layout documents.
Test with PDF accessibility tools.	Neglect PDF-specific accessibility requirements.

CSS Optimization for PDF Output

CSS plays a critical role in determining the quality, consistency, and professional appearance of your HTML to PDF conversion. While standard web CSS focuses on responsive layouts and screen rendering, PDF-focused CSS requires a different approach to achieve print-quality results. These optimization techniques can transform basic web documents into polished, publication-ready PDFs.

Use Print-Specific Styling

Always separate your screen and print styles using media queries to create documents that perform well in both environments.

Standard styles for screen display:

body {
  font-size: 16px;
  line-height: 1.5;
  background-color: #f5f5f5;
  color: #333;
}

Override styles for PDF output:

@media print {
  body {
    font-size: 12pt; /* Print-specific font size */
    line-height: 1.2; /* Tighter line height for print */
    background-color: white; /* Use white background */
    color: black; /* Ensure good contrast for printing */
    width: 100%; /* Reset any width constraints */
  }

  /* Hide web-only elements */
  nav, .sidebar, .web-only, .social-buttons {
    display: none;
  }

Screen vs. Print Views

Screen view for Wikipedia coffee article

Print view for Wikipedia coffee article

Choose Appropriate Units

For PDF documents, absolute units provide more consistent and predictable results across different PDF converters than relative units. This is crucial for professional documents where precise layout control is required.

❌ Problematic for print:

.document-section {
  width: 80%; /* Relative to what? Container varies in PDFs */
  margin: 2em; /* Based on font-size, which may change */
  font-size: 1.2rem; /* Will vary by user settings */
  padding: 5vh 3vw; /* Based on viewport which doesn't exist in PDFs */
}

✅ Optimal for print - precise sizing:

.document-section {
  width: 7in; /* Absolute width */
  margin: 0.5in; /* Consistent margins */
  font-size: 12pt; /* Standard print typography size */
  padding: 12pt 18pt; /* Consistent padding */
}

Print Unit Recommendations:

Unit	Usage	Best for	Examples
pt (points)	Typography, small measurements	Text, line thickness	font-size: 12pt; border: 1pt solid;
in (inches)	Page layout, US documents	Margins, widths	margin: 0.5in; width: 8in;
cm (centimeters)	Page layout, international	Margins, content blocks	margin: 2cm; width: 15cm;
mm (millimeters)	Precise measurements	Fine spacing, thin elements	padding: 5mm; border-radius: 2mm;

Common Mistake

Never rely on viewport-based units: vw/vh or percentage-based sizing for critical layout elements in PDF documents. These units behave unpredictably across different PDF converters.

Manage Font Embedding

Font consistency is one of the most common challenges in HTML to PDF conversion. Different PDF converters handle fonts differently, and without proper font embedding, your carefully chosen typography may default to basic system fonts.

Ensure proper font rendering by:

1. Using web-safe fonts or embedding custom fonts.
2. Specifying complete font stacks with fallbacks.
3. Using web fonts with proper @font-face declarations.

Complete @font-face declaration for reliable font embedding:

@font-face {
  font-family: 'Merriweather';
  src: url('fonts/Merriweather-Regular.woff2') format('woff2'),
       url('fonts/Merriweather-Regular.woff') format('woff'),
       url('fonts/Merriweather-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Merriweather';
  src: url('fonts/Merriweather-Bold.woff2') format('woff2'),
       url('fonts/Merriweather-Bold.woff') format('woff'),
       url('fonts/Merriweather-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

Comprehensive font stack with web-safe fallbacks:

body {
  font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-weight: 600;
}

Ensure consistent font sizing:

@media print {
  body {
    font-size: 11pt;
  }
  h1 { font-size: 22pt; }
  h2 { font-size: 18pt; }
  h3 { font-size: 15pt; }
  p, li { font-size: 11pt; }
  figcaption, footer { font-size: 9pt; }
}

Font Embedding Considerations

• Licensing: Check font licensing restrictions, as many commercial fonts prohibit embedding in distributed PDFs without proper licensing.
• Tool-specific settings: Check your PDF converter's documentation, as different engines may require specific configuration for proper font embedding.

Control Page Dimensions and Margins

Setting explicit page dimensions and margins is essential for professional-quality PDFs. The @page rule provides precise control over page formatting.

Basic page setup:

@page {
  size: A4; /* Standard ISO A4 size */
  margin: 2cm; /* Uniform margins */
}

Advanced page setup with different margin sides:

@page {
  size: letter; /* US Letter size (8.5" × 11") */
  margin-top: 3cm;
  margin-right: 2cm;
  margin-bottom: 2.5cm;
  margin-left: 2.5cm;
}

Different settings for first page:

@page :first {
  margin-top: 6cm; /* Larger top margin for title page */
}

Different settings for left/right pages (like in books - more space near the spine):

@page :left {
  margin-left: 2.5cm;
  margin-right: 2cm;
}

@page :right {
  margin-left: 2cm;
  margin-right: 2.5cm;
}

Common Page Size Reference:

Name	Dimensions	Usage
A4	210 × 297 mm	Standard international business documents.
Letter	8.5 × 11 inches	Standard US business documents.
Legal	8.5 × 14 inches	Legal documents in US.
A5	148 × 210 mm	Booklets, small manuals.

tip

Always specify both the page size and margins in your CSS. Never rely on browser defaults for professional PDF output.

Handling Dynamic Content in PDF Conversion

Dynamic content presents unique challenges when converting HTML to PDF. This section covers essential techniques for maintaining layout integrity and visual quality.

Professional Table Handling

Large data tables require special treatment for proper PDF output.

Essential table styles for PDF conversion:

table {
  width: 100%;
  border-collapse: collapse;
  page-break-inside: auto; /* Allow tables to break across pages */
}

/* Ensures headers repeat on each new page */
thead {
  display: table-header-group;
}

tr {
  page-break-inside: avoid; /* Keep rows together where possible */
  page-break-after: auto; /* But allow breaks between rows */
}

/* Make table footers appear at the end of the table */
tfoot {
  display: table-footer-group;
}

Strategies for Large Data Tables

When dealing with extensive data tables:

• Logical separation: Split large datasets into multiple related tables.
• Header consistency: Maintain identical column structure across split tables.
• Print-specific styling: Use condensed fonts and reduced padding for print media.
• Row grouping: Use <tbody> elements to group related rows logically.

Table Best Practices

Do ✅	Don't ❌
Use proper HTML table elements: <thead>, <tbody>, <tfoot>.	Build tables with divs/spans.
Use absolute units (pt, in, cm).	Use relative units (%, em).
Keep row heights reasonable.	Create overly tall rows.
Test with real production data.	Test with minimal sample data.
Simplify complex tables for print.	Include interactive elements.

Charts and Data Visualization

For charts and visualizations in PDFs:

1. Use vector formats (SVG) whenever possible.
2. Ensure proper sizing and aspect ratios.
3. Consider simplified versions for print.
4. If using canvas-based charts, ensure they're properly rendered before conversion.
5. Add explicit text labels (avoid tooltip-dependent data).
6. Test printed output in grayscale to verify contrast.
7. Consider pre-rendering complex visualizations to static images.

Chart optimized for PDF output:

<!-- SVG chart elements with explicit sizing -->
<div class="chart-container" style="width: 6in; height: 4in;">
  <svg id="bar-chart" viewBox="0 0 600 400" aria-labelledby="chart-title">
    <title id="chart-title">Q3 Sales Performance by Region</title>
  </svg>
</div>

Styles for chart PDF rendering:

.chart-container {
  page-break-inside: avoid; /* Keep charts on one page */
  margin: 0.25in 0; /* Provide breathing room */
}

Form Fields

Most HTML forms convert to static representations in PDFs:

<form class="pdf-form">
  <!-- Include clear visual styling for form elements -->
  <div class="form-field">
    <label for="full-name">Full Name:</label>
    <input type="text" id="full-name" name="full-name"
           style="border: 1pt solid #999; padding: 4pt; min-height: 14pt;">
  </div>

  <div class="form-field">
    <label for="email">Email Address:</label>
    <input type="email" id="email" name="email">
  </div>
</form>

note

For truly interactive PDF forms, specialized libraries like PDFLib are typically required. Most HTML to PDF converters only create static representations of form elements.

Images and Media Optimization

Images often cause issues in PDF conversion. Follow these practices for optimal results:

Image Resolution and Format

• Vector images (SVG): Best for logos, icons, and illustrations.
• Raster images: Use appropriate resolution (typically 150-300 DPI for print).
• Format selection: JPG for photos, PNG for transparency, SVG for vectors.

<!-- ✅ Vector logo for crisp printing at any size -->
<img src="company-logo.svg" alt="Company Logo" class="logo">

<!-- ✅ Photo with print-appropriate resolution -->
<img src="team-photo.jpg" alt="Team Photo" width="1200" height="800">

Image Sizing and Positioning

Explicitly set dimensions to prevent layout shifts:

.document-image {
  width: 3in; /* Use absolute units for print consistency */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Prevents inline alignment issues */
  margin: 0.2in auto; /* Centers image with consistent spacing */
}

Handling Background Images

Background images require special attention in print contexts:

.hero-section {
  background-image: url('hero-bg.jpg');
  background-size: cover;
  -webkit-print-color-adjust: exact; /* Safari/Chrome */
  color-adjust: exact; /* Firefox */
  print-color-adjust: exact; /* Standard */
  padding: 0.5in; /* Use print units for padding */
}

PDF Image Format Reference:

Image Type	Best Format	Resolution	Notes
Photos	JPG	300 DPI	Balance quality vs file size.
Logos/Icons	SVG	Vector	Scale without quality loss.
Screenshots	PNG	144-192 DPI	Preserve text clarity.
Diagrams	SVG/PNG	Vector/144+ DPI	Maintain clean lines.
Backgrounds	JPG	150-200 DPI	Lower resolution often sufficient.

Common Mistake

Using web-optimized images in PDFs intended for printing, resulting in pixelated output. Always use print-quality assets for PDF conversion.

Quick PDF Troubleshooting Guide

Problem	Solution
Text overflow	Apply overflow-wrap: break-word; hyphens: auto; to box with fixed widths.
Missing styles	Add <style> in <head> with essential print styles using specific selectors. For critical elements, use inline styles with style attribute.
Layout shifts	Set exact dimensions with print units: width: 6in; height: 4in; Avoid relative positioning and floats in critical content.
Hidden content	In print media query, target collapsible elements: .hidden-content { display: block; visibility: visible; opacity: 1; }
Print media detection	Use both approaches for maximum compatibility: @media print, pdf { } and @page { size: A4; margin: 2cm; }

tip

Test PDF output with multiple browsers and conversion tools, as rendering engines may interpret CSS differently.

Conclusion

Creating perfectly optimized HTML for PDF conversion requires attention to detail across multiple dimensions:

1. Structure: Use semantic HTML with proper nesting and organization.
2. Styling: Implement print-specific CSS with appropriate units and layouts.
3. Resources: Optimize images, fonts, and external dependencies.
4. Testing: Validate across engines and devices.

Remember to start with the end in mind – understanding the fixed-layout nature of PDFs from the beginning of your design process will save significant time and frustration. Well-optimized PDFs deliver a professional, consistent experience for your audience, preserving your branding and ensuring information is presented exactly as intended, regardless of the viewing environment.

By following the best practices outlined in this guide, you can significantly improve the quality, consistency, and performance of your HTML to PDF conversion processes.

Comprehensive PDF Conversion Checklist

Document Structure

• ✅ Use semantic HTML elements (<article>, <section>, <header>, etc.).
• ✅ Implement proper heading hierarchy (h1 → h2 → h3).
• ✅ Group related content within appropriate container elements.
• ✅ Validate HTML to ensure proper structure.

CSS Optimization

• ✅ Implement dedicated print-specific CSS using @media print.
• ✅ Set explicit page size with @page { size: A4; }.
• ✅ Define appropriate margins for all page edges.
• ✅ Use absolute units (pt, in, cm, mm) for print-specific measurements.
• ✅ Apply appropriate line heights (1.2-1.5 for print content).
• ✅ Set orphans and widows controls for text flow.

Typography and Fonts

• ✅ Embed custom fonts properly using complete @font-face declarations.
• ✅ Provide appropriate fallback fonts in every font stack.
• ✅ Use appropriate font sizes for print (10-12pt for body text).
• ✅ Apply proper font weights for different heading levels.
• ✅ Ensure good contrast between text and background.

Page Break Management

• ✅ Control page breaks around headings with page-break-after: avoid.
• ✅ Prevent breaking inside crucial elements with page-break-inside: avoid.
• ✅ Force breaks after major sections when appropriate.
• ✅ Configure table headers to repeat across pages (display: table-header-group).

Images and Media

• ✅ Use appropriate resolution images (minimum 150-300 DPI for print).
• ✅ Apply vector formats (SVG) for logos, icons.
• ✅ Set explicit image dimensions to prevent layout shifts.
• ✅ Optimize file sizes while maintaining quality.
• ✅ Ensure proper color profiles (consider CMYK for professional printing).
• ✅ Include alt text for all images for accessibility.

Headers and Footers

• ✅ Implement page numbering using appropriate techniques for your converter.
• ✅ Create consistent headers/footers using proper positioning techniques.
• ✅ Add document title, dates, and other identifying information.

Testing and Validation

• ✅ Review PDF output across multiple PDF viewers.
• ✅ Test with actual production data, not just sample content.
• ✅ Verify rendering on both screen and printed output.
• ✅ Test with different page sizes if the document needs to be flexible.

HTML to PDF: It's like fitting an octopus into a shoebox... but now you know how! 🐙