Skip to main content

​
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

Minimal

5-10mm for edge-to-edge content and maximum space utilization

Standard

15-20mm for regular documents with balanced spacing

Professional

25-30mm for formal documents requiring generous margins

​
CSS Best Practices for PDF

/* 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: 
/* 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: 
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: 
@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: 
@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;
}
Use web-safe fonts as fallbacks. Custom fonts should be embedded as base64 data URLs for reliability.

​
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

Optimize Images

Use compressed images and appropriate formats (PNG for graphics, JPEG for photos)

Minimize HTML

Remove unnecessary whitespace and comments from HTML before sending

Limit File Size

Keep HTML content under 2MB for fastest processing

Use Web Fonts

Stick to system fonts or embed fonts as base64 data URLs

​
Quality

/* 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

1

Test in Browser

Use browser print preview to catch major layout issues
2

Generate Test PDF

Create a test PDF with your actual content
3

Check All Pages

Review every page for layout problems
4

Test Different Sizes

Try different page formats if needed
5

Validate Links

Ensure internal links work properly

​
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

Pro Tip

Create templates for common document types (invoices, reports, letters) with tested CSS to ensure consistent results.
⌘I