Print Styles

Ensure your content is readable and usable when users print pages from government websites.

Why Print Matters

Users print government pages to:

• Keep a record of their application
• Share information with others
• Complete forms offline
• Reference guidance while doing a task
• Create accessible alternative formats

Basic Print Styles

@media print {
  /* Reset backgrounds and use black text */
  body {
    background: white;
    color: black;
  }

  /* Hide navigation and interactive elements */
  header,
  footer,
  nav,
  .sidebar,
  .back-link,
  button,
  .btn,
  .skip-link {
    display: none !important;
  }

  /* Show URLs for links */
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 0.875em;
    color: #666;
  }

  /* Don't show URLs for internal links */
  a[href^="/"]:after,
  a[href^="#"]:after {
    content: "";
  }

  /* Ensure content uses full width */
  main,
  article {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

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

  p, li, blockquote {
    orphans: 3;
    widows: 3;
  }

  table, figure, img {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

Hide Interactive Elements

Elements that don't work on paper should be hidden:

• Navigation menus
• Buttons and form controls
• Search boxes
• Skip links
• Cookie banners
• Videos and audio players

Expand Collapsed Content

Content hidden in accordions or details elements should be visible in print:

@media print {
  details[open] summary ~ *,
  .accordion-content,
  .details-text {
    display: block !important;
  }

  details summary::marker,
  .accordion-icon {
    display: none;
  }
}

Tables

Ensure tables print correctly across pages:

@media print {
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid #000;
    padding: 0.5em;
  }

  thead {
    display: table-header-group;
  }

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

Images

Handle images appropriately for print:

@media print {
  img {
    max-width: 100%;
    page-break-inside: avoid;
  }

  /* Hide decorative images */
  img[alt=""],
  .decorative-image {
    display: none;
  }

  /* Ensure logos print clearly */
  .logo img {
    filter: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

Links

Show URLs for external links so users can access them later:

@media print {
  /* Show full URL for external links */
  a[href^="http"]:not([href*="gov.kaharagia.org"]):after {
    content: " [" attr(href) "]";
    font-size: 0.75em;
    word-break: break-all;
  }

  /* Hide URLs for email and phone */
  a[href^="mailto:"]:after,
  a[href^="tel:"]:after {
    content: "";
  }
}

Page Headers and Footers

Add useful information to printed pages:

@media print {
  @page {
    margin: 2cm;

    @top-center {
      content: "Principality of Kaharagia";
    }

    @bottom-left {
      content: "Page " counter(page) " of " counter(pages);
    }

    @bottom-right {
      content: "Printed on " date();
    }
  }
}

Testing Print Styles

To test print styles:

1. Open browser dev tools
2. Open the Rendering panel
3. Set "Emulate CSS media type" to "print"
4. Or use Ctrl/Cmd + P to open print preview

Print Button

Optionally provide a print button for pages users commonly print:

<button class="btn btn-secondary" onclick="window.print()">
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <polyline points="6 9 6 2 18 2 18 9"></polyline>
    <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
    <rect x="6" y="14" width="12" height="8"></rect>
  </svg>
  Print this page
</button>

PDF Alternative

For forms and documents, consider providing a downloadable PDF as an alternative to printing web pages.