Kako možete optimizovati stranice za štampu?

Za optimizaciju stranica za štampu koristim @media print u CSS. U njemu skrivam elemente koji nisu potrebni pri štampanju (navigacija, podnožja, bočni paneli), menjam stilove radi bolje čitljivosti (veličina fonta, razmaci), uklanjam pozadinske slike i senke. Takođe dodajem prekide stranica pomoću break-before, break-after i kontrolišem orijentaciju pomoću @page. Mogu koristiti posebne klase, poput .no-print, za brzo skrivanje elemenata.

Evo nekoliko primera:

/* Skrivanje elemenata koji nisu potrebni pri štampanju */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Poboljšavanje izgleda radi bolje čitljivosti */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Crni tekst za bolji kontrast */
  }
  a {
    color: #000; /* Uklanjanje plave boje linkova */
    text-decoration: none;
  }
  /* Dodavanje URL-ova linkova nakon teksta */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Skrivanje pozadinskih slika */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Kontrola prekida stranica */
@media print {
  h2 {
    break-before: page; /* Početak nove stranice pre svakog h2 */
  }
}

/* Definisanje orijentacije stranice */
@page {
  size: A4 portrait; /* ili landscape */
  margin: 1cm; /* Margine */
}

Za složenije prilagođavanje ili dodavanje informacija (npr. brojeva stranica, zaglavlja i podnožja), može se koristiti direktiva @page. Takođe, neki specifični stilovi (kao što je position: fixed) mogu se ponašati nepredvidivo pri štampanju i zahtevaju posebne pravila za @media print.

Važno je testirati rezultat štampe u različitim pregledačima.