Hoe kunt u pagina's voor afdrukken optimaliseren?

Om pagina's te optimaliseren voor printgebruik, gebruik ik @media print in CSS. Daar verberg ik elementen die niet nodig zijn bij het afdrukken (navigatie, voetteksten, zijpanelen), wijzig ik de stijlen voor betere leesbaarheid (lettergrootte, tussenruimtes), verwijder ik achtergrondafbeeldingen en schaduwen. Ik voeg ook paginabreaks toe met break-before, break-after en beheer de oriëntatie met @page. Ik kan speciale klassen gebruiken, zoals .no-print, om snel elementen te verbergen.

Hier enkele voorbeelden:

/* Verberg elementen die niet nodig zijn bij printen */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Verbeter het uiterlijk voor betere leesbaarheid */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Zwart tekst voor beter contrast */
  }
  a {
    color: #000; /* Verwijder de blauwe kleur van links */
    text-decoration: none;
  }
  /* Voeg URL's van links toe na de tekst */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Verberg achtergrondafbeeldingen */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Beheer paginabreaks */
@media print {
  h2 {
    break-before: page; /* Begin een nieuwe pagina voor elke h2 */
  }
}

/* Stel de oriëntatie van de pagina in */
@page {
  size: A4 portrait; /* Of landscape */
  margin: 1cm; /* Marges instellen */
}

Voor meer geavanceerde aanpassingen of het toevoegen van informatie (zoals paginanummers, kop- en voetteksten) kan de @page-directief worden gebruikt. Sommige stijlen (zoals position: fixed) kunnen zich onvoorspelbaar gedragen bij het printen en vereisen aparte regels voor @media print.

Het is belangrijk om het printresultaat in verschillende browsers te testen.