editorial-print-and-pdf-design

name	editorial-print-and-pdf-design
description	Use when adapting digital content for print or PDF. Print has different typographic conventions and color realities.

Editorial Print and PDF Design

Print = different game from web. Lower resolution, no animations, CMYK color, page numbers, footnotes physical not popover.

Print considerations

1. Resolution: 300 DPI minimum for print
2. Color: CMYK (not RGB) — colors may shift
3. Bleeds: 3-5mm extra around page edge for trim
4. Page numbers: physical, not anchored to viewport
5. Footnotes: actual page bottom, not popover
6. Fonts: embedded in PDF (or printed properly)
7. Page size: Letter (US), A4 (international)

CSS for print

@media print {
  body {
    font-size: 11pt;
    line-height: 1.4;
    color: #000;
    background: white;
  }
  a[href]::after {
    content: ' (' attr(href) ')';
  }
  .no-print { display: none; }
  .page-break { page-break-after: always; }
  @page {
    margin: 1in;
  }
}

PDF generation

1. Browser native: Cmd-P / Ctrl-P → 'Save as PDF'
2. JavaScript: jsPDF library (programmatic)
3. Server-side: Puppeteer (headless Chrome)
4. CSS Paged Media (Prince, WeasyPrint)
5. Native browser print to PDF (highest quality, free)

For CardPrepAI: use Puppeteer for downloadable reports (PSA report, custom grading PDF).

Where this fits in the X3 empire

Print + PDF strategy for CardPrepAI reports and certifications.