PixelPilot: Instructions file for GitHub Copilot

UI/UX Print & PDF Export

Complete guide for print-optimized pages and PDF generation. Token-aware styling that respects design language.

---

OVERVIEW

This skill covers:

1. @media print CSS for browser print
2. Print button components
3. jsPDF + html2canvas for programmatic PDF
4. Page breaks and repeating headers
5. Print-specific accessibility

---

@MEDIA PRINT FUNDAMENTALS

Base Print Styles

@media print {
  /* Hide non-essential elements */
  .no-print,
  .sidebar,
  .navigation,
  .footer,
  .toast,
  .modal,
  [role="navigation"],
  [role="banner"],
  button:not(.print-include) {
    display: none !important;
  }
  
  /* Reset backgrounds for ink saving */
  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
    line-height: 1.5;
  }
  
  /* Expand links with URLs */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  
  /* Don't show URL for internal/JS links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: none;
  }
  
  /* Page break utilities */
  .page-break {
    page-break-before: always;
  }
  
  .no-break {
    page-break-inside: avoid;
  }
  
  .keep-together {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Ensure images don't overflow */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
  
  /* Tables */
  table {
    border-collapse: collapse;
  }
  
  th, td {
    border: 1px solid #000;
    padding: 8px;
  }
  
  thead {
    display: table-header-group; /* Repeat on each page */
  }
  
  tr {
    page-break-inside: avoid;
  }
}

Design Language Print Variations

/* Luxury - Elegant serif print */
[data-theme="light"][data-language="luxury"] {
  @media print {
    body {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 11pt;
      letter-spacing: 0.02em;
    }
    
    h1, h2, h3 {
      font-weight: 400;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
  }
}

/* Technical - Monospace print */
[data-language="technical"] {
  @media print {
    body {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10pt;
    }
    
    code, pre {
      background: #f5f5f5 !important;
      border: 1px solid #ddd;
    }
  }
}