Pdf Generation

# PDF Generation Skill

**Purpose:** Generate professional PDFs from HTML/CSS without whitespace gaps or layout issues.

## The Problem

When generating PDFs from HTML, `page-break-inside: avoid` causes **orphan whitespace** — content that can't fit on the current page gets pushed entirely to the next page, leaving huge gaps.

## The Solution

### 1. Use Flow-Based Layout (NOT Fixed Page Containers)

**❌ WRONG:**
```html
<div class="page" style="min-height: 297mm;">
  <!-- Content -->
</div>
```

**✅ RIGHT:**
```html
<body>
  <!-- Content flows naturally -->
</body>
```

Use `@page` CSS rules instead of fixed page containers:
```css
@page {
    size: A4;
    margin: 18mm 15mm;
}
```

### 2. Protect ONLY Small Elements

Only use `break-inside: avoid` on elements that:
- Are **small** (cards, single rows, short boxes)
- Would look **broken** if split

**✅ Protect:**
- Individual table rows (`tr`)
- Cards (< 100px tall)
- Timeline items
- Step items
- Highlight boxes

**❌ Do NOT Protect:**
- Entire tables
- Large containers
- Entire sections
- Multi-column layouts
- Quote boxes at document end

### 3. Use Modern + Legacy Properties

```css
.small-element {
    break-inside: avoid;        /* Modern spec */
    page-break-inside: avoid;   /* Legacy support */
}
```

### 4. Keep Headers With Content

```css
h2, h3, h4, .section-header {
    break-after: avoid;
    page-break-after: avoid;
}
```

### 5. Prevent Orphan Lines

```css
body {
    orphans: 3;  /* Min lines at bottom of page */
    widows: 3;   /* Min lines at top of page */
}
```

### 6. Allow Tables to Break (But Keep Rows Together)

```css
table {
    /* NO break-inside: avoid */
}

tr {
    break-inside: avoid;
    page-break-inside: avoid;
}
```

## Template

```css
@page {
    size: A4;
    margin: 18mm 15mm;
}

body {
    font-size: 10pt;
    line-height: 1.5;
    orphans: 3;
    widows: 3;
}

/* Headers stay with content */
h2, h3, h4 {
    break-after: avoid;
    page-break-after: avoid;
}

/* Small...