--- name: html2pdf description: Create beautiful, professionally designed PDFs from HTML/CSS with full styling support, custom layouts, gradients, backgrounds, and print media queries. When Claude needs to create visually stunning PDFs with complex layouts, typography, colors, or design elements that go beyond simple text documents. Use this for reports, presentations, brochures, invoices, certificates, and any PDF requiring professional visual design. --- # HTML to PDF Creation Create beautiful, professionally designed PDFs using HTML/CSS with full browser rendering support. ## Overview This skill enables creation of visually stunning PDFs using HTML and CSS, similar to how the PPTX skill uses html2pptx for presentations. Unlike basic PDF libraries that only support simple text and tables, this approach provides: - **Full CSS support**: Gradients, shadows, borders, flexbox, grid layouts - **Professional typography**: Custom fonts, line heights, letter spacing - **Rich color design**: Background colors, images, patterns - **Print-optimized**: Page breaks, margins, widow/orphan control - **Responsive layouts**: Multi-column, cards, grids ## When to Use This Skill Use html2pdf when creating PDFs that require: - Complex visual layouts and design - Professional typography and color schemes - Gradients, backgrounds, or decorative elements - Multi-column layouts or grid systems - Reports with headers, footers, and consistent branding - Documents that need to look polished and professional **Don't use** for simple text extraction or basic form filling (use the PDF skill instead). ## Creating a PDF from HTML ### Basic Workflow 1. **Plan the design** - Determine page size (letter, A4, legal, etc.) - Choose color palette and typography - Sketch layout structure 2. **Create HTML file** - Start with proper document structure - Use semantic HTML elements - Apply CSS styling inline or in ` ``` ### Page Setup with @page The `@page` CSS rule controls page-specific properties: ```css /* Standard letter size */ @page { size: letter; margin: 1in 0.75in; } /* A4 size */ @page { size: a4; margin: 25mm; } /* Custom size */ @page { size: 8.5in 11in; margin: 0.5in; } /* Landscape orientation */ @page { size: letter landscape; } /* Different margins for first page */ @page :first { margin-top: 2in; } ``` ### Typography Guidelines Use points (pt) for font sizes in print: ```css h1 { font-size: 24pt; } h2 { font-size: 18pt; } h3 { font-size: 14pt; } body { font-size: 11pt; } small { font-size: 9pt; } ``` Control line breaks and page breaks: ```css /* Prevent widows and orphans */ p { widows: 2; orphans: 2; } /* Keep headings with following content */ h1, h2, h3 { page-break-after: avoid; } /* Force page break before element */ .new-page { page-break-before: always; } /* Prevent page break inside element */ .keep-together { page-break-inside: avoid; } ``` ### Color and Design Use CSS variables for consistent color schemes: ```css :root { --color-primary: #1a365d; --color-secondary: #2d3748; --color-accent: #3182ce; --color-gray-light: #f7fafc; --color-gray: #cbd5e0; } /* Apply colors */ .header { background: var(--color-primary); color: white; } /* Gradients work perfectly */ .cover { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } ``` ### Layout Patterns Use flexbox and grid for layouts: ```css /* Two-column layout */ .two-column { display: flex; gap: 20pt; } .column { flex: 1; } /* Grid layout */ .metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20pt; } ``` ## Converting HTML to PDF Use the provided `html2pdf.js` script: ```bash node scripts/html2pdf.js input.html output.pdf ``` ### Options ```bash # Custom page format node scripts/html2pdf.js input.html output.pdf --format a4 # Landscape orientation node scripts/html2pdf.js input.html output.pdf --landscape # Custom size node scripts/html2pdf.js input.html output.pdf --width 8.5in --height 11in # Custom margins node scripts/html2pdf.js input.html output.pdf --margin-top 1in --margin-bottom 0.5in # No background printing node scripts/html2pdf.js input.html output.pdf --no-background # Custom scale node scripts/html2pdf.js input.html output.pdf --scale 0.9 ``` Available page formats: `letter`, `legal`, `a3`, `a4`, `a5`, `tabloid` ## Design Patterns For comprehensive CSS patterns and best practices, see [references/design-patterns.md](references/design-patterns.md) which includes: - Typography hierarchies - Color palette examples - Layout patterns (two-column, grid, cards) - Print-specific CSS rules - Common components (tables, quotes, headers, footers) - Page break management - Best practices for PDF design ## Templates Example templates are available in `assets/`: - `template-report.html` - Professional business report with cover page, tables, and sections To use a template: 1. Copy the template file 2. Modify the content and styling 3. Convert to PDF using the script ## Common Patterns ### Cover Page ```html

Document Title

Subtitle or Description

Date and Author Info

``` ```css .cover-page { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; page-break-after: always; } ``` ### Tables ```html
Header 1 Header 2
Data 1 Data 2
``` ```css table { width: 100%; border-collapse: collapse; page-break-inside: avoid; } thead { background: var(--color-primary); color: white; } td, th { padding: 10pt 12pt; border-bottom: 1pt solid #e2e8f0; } ``` ### Info Boxes ```html
Important: Key information here.
``` ```css .info-box { background: #ebf8ff; border-left: 4pt solid #3182ce; padding: 12pt 16pt; margin: 12pt 0; page-break-inside: avoid; } ``` ## Best Practices 1. **Use semantic HTML**: `

`, `

`, ``, `
`, etc. 2. **Use pt units for fonts**: More consistent for print 3. **Use in/mm for margins**: Physical units work best 4. **Control page breaks**: Use `page-break-*` properties liberally 5. **Test widow/orphan settings**: Prevent awkward line breaks 6. **Use CSS variables**: Maintain consistent colors and sizes 7. **Avoid external dependencies**: Embed all CSS inline 8. **Test the output**: Always generate and review the PDF ## Workflow Example Complete example of creating a beautiful report: ```bash # 1. Create the HTML file cat > report.html << 'EOF'

My Beautiful Report

This is a professionally designed PDF document created from HTML.

Key Finding: HTML to PDF conversion provides excellent design flexibility.
EOF # 2. Convert to PDF node scripts/html2pdf.js report.html output.pdf # 3. Open and verify echo "PDF created: output.pdf" ``` ## Troubleshooting **Content cut off**: Increase page margins or reduce content size **Awkward page breaks**: Add `page-break-inside: avoid` to elements that should stay together **Fonts not appearing**: Use web-safe fonts or ensure custom fonts are properly referenced **Background not printing**: Remove `--no-background` flag from conversion command **Layout issues**: Check flexbox/grid browser compatibility, simplify if needed