> ## Documentation Index
> Fetch the complete documentation index at: https://docs.peedief.com/llms.txt
> Use this file to discover all available pages before exploring further.

# PDF Options & Customization

> Advanced PDF formatting, page settings, and CSS best practices

# PDF Options & Customization

## Page Format Options

### Standard Formats

When creating templates in your Peedief dashboard, you can choose from common paper sizes:

* **A4** (210mm × 297mm) - Most common worldwide, ideal for documents
* **A3** (297mm × 420mm) - Larger format perfect for presentations and charts
* **Letter** (8.5" × 11") - US standard format for business documents

### Custom Dimensions

You can also define exact page sizes for specialized use cases using the template editor. Various units are supported: `px`, `in`, `cm`, `mm`, `pt`.

## Page Orientation

When creating templates, you can control how your content is displayed:

### Portrait (Default)

Taller than wide - perfect for documents, letters, and reports.

### Landscape

Wider than tall - ideal for charts, presentations, and wide tables.

Select the orientation in your template editor based on your content needs.

## Margins

When creating templates, you can control the white space around your content by setting margins in the template editor.

### Margin Guidelines

<CardGroup cols={3}>
  <Card title="Minimal" icon="compress">
    5-10mm for edge-to-edge content and maximum space utilization
  </Card>

  <Card title="Standard" icon="align-center">
    15-20mm for regular documents with balanced spacing
  </Card>

  <Card title="Professional" icon="file-contract">
    25-30mm for formal documents requiring generous margins
  </Card>
</CardGroup>

## CSS Best Practices for PDF

### Recommended CSS

```css theme={null}
/* Optimal typography for PDFs */
body {
  font-family: Arial, sans-serif;
  line-height: 1.4;
  color: #333;
  font-size: 12pt;
}

/* Prevent awkward page breaks */
h1, h2, h3 {
  page-break-after: avoid;
  margin-top: 24pt;
  margin-bottom: 12pt;
}

/* Keep tables together */
table {
  page-break-inside: avoid;
  border-collapse: collapse;
  width: 100%;
}

/* Force page breaks where needed */
.page-break {
  page-break-before: always;
}

/* Hide elements in print */
@media print {
  .no-print {
    display: none;
  }
  
  .print-only {
    display: block;
  }
}
```

### Page Break Control

Control how content breaks across pages:

```css theme={null}
/* Prevent breaking inside elements */
.keep-together {
  page-break-inside: avoid;
}

/* Force breaks before elements */
.new-page {
  page-break-before: always;
}

/* Avoid breaks after headings */
h1, h2, h3, h4, h5, h6 {
  page-break-after: avoid;
}
```

### Table Optimization

Make tables work well in PDFs:

```css theme={null}
table {
  width: 100%;
  border-collapse: collapse;
  page-break-inside: auto;
}

tr {
  page-break-inside: avoid;
  page-break-after: auto;
}

thead {
  display: table-header-group;
  page-break-after: avoid;
}

tbody {
  display: table-row-group;
}
```

## Advanced Formatting

### Headers and Footers

Use CSS `@page` rules for headers and footers:

```css theme={null}
@page {
  margin-top: 2in;
  margin-bottom: 2in;
  
  @top-center {
    content: "Document Title";
    font-family: Arial;
    font-size: 10pt;
    color: #666;
  }
  
  @bottom-center {
    content: "Page " counter(page) " of " counter(pages);
    font-family: Arial;
    font-size: 10pt;
  }
  
  @bottom-right {
    content: "Generated " date();
  }
}
```

### Custom Fonts

Embed fonts for consistent typography:

```css theme={null}
@font-face {
  font-family: 'CustomFont';
  src: url('data:font/woff2;base64,d09G...');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'CustomFont', Arial, sans-serif;
}
```

<Warning>
  Use web-safe fonts as fallbacks. Custom fonts should be embedded as base64 data URLs for reliability.
</Warning>

## What to Avoid

### CSS Properties That Don't Work Well

Avoid these CSS features in PDFs:

* `position: fixed` - Use `position: absolute` instead
* Complex animations and transitions
* Viewport units (`vw`, `vh`) - Use fixed units instead
* `box-shadow` with blur - May not render correctly
* Complex CSS Grid layouts - Use Flexbox or tables

### HTML Elements to Avoid

* `<video>` and `<audio>` elements
* Interactive forms (unless for printing forms)
* JavaScript-dependent content
* External iframes

## Optimization Tips

### Performance

<CardGroup cols={2}>
  <Card title="Optimize Images" icon="image">
    Use compressed images and appropriate formats (PNG for graphics, JPEG for photos)
  </Card>

  <Card title="Minimize HTML" icon="code">
    Remove unnecessary whitespace and comments from HTML before sending
  </Card>

  <Card title="Limit File Size" icon="file-zipper">
    Keep HTML content under 2MB for fastest processing
  </Card>

  <Card title="Use Web Fonts" icon="font">
    Stick to system fonts or embed fonts as base64 data URLs
  </Card>
</CardGroup>

### Quality

```css theme={null}
/* High-quality image rendering */
img {
  max-width: 100%;
  height: auto;
  image-rendering: optimizeQuality;
}

/* For high-DPI displays */
@media (-webkit-min-device-pixel-ratio: 2) {
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}
```

## Testing Your PDFs

### Preview Recommendations

<Steps>
  <Step title="Test in Browser">
    Use browser print preview to catch major layout issues
  </Step>

  <Step title="Generate Test PDF">
    Create a test PDF with your actual content
  </Step>

  <Step title="Check All Pages">
    Review every page for layout problems
  </Step>

  <Step title="Test Different Sizes">
    Try different page formats if needed
  </Step>

  <Step title="Validate Links">
    Ensure internal links work properly
  </Step>
</Steps>

### Common Issues to Check

* **Text cutoff** at page edges
* **Images** not displaying or too large
* **Tables** breaking awkwardly across pages
* **Headers/footers** positioning correctly
* **Page breaks** occurring in logical places

<Card title="Pro Tip">
  Create templates for common document types (invoices, reports, letters) with tested CSS to ensure consistent results.
</Card>