Ako môžete optimalizovať stránky pre tlač?

Na optimalizáciu strán pre tlač používam v CSS @media print. V ňom skrývam prvky, ktoré nie sú pri tlači potrebné (navigácia, päty, bočné panely), mením štýly pre lepšiu čitateľnosť (veľkosť písma, medzery), odstraňujem pozadie obrázkov a tiene. Taktiež pridávam prerušovania strán pomocou break-before, break-after a riadim orientáciu pomocou @page. Rýchlo skryté prvky môžu byť označené napríklad triedou .no-print.

Tu sú niektoré príklady:

/* Skryť prvky, ktoré nie sú potrebné pri tlači */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Zlepšiť vzhľad pre lepšiu čitateľnosť */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Čierny text pre lepší kontrast */
  }
  a {
    color: #000; /* Odstrániť modrú farbu odkazov */
    text-decoration: none;
  }
  /* Pridať URL odkazov za text */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Skryť obrázky na pozadí */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Kontrola prerušení strán */
@media print {
  h2 {
    break-before: page; /* Začať novú stránku pred každým h2 */
  }
}

/* Nastavenie orientácie stránky */
@page {
  size: A4 portrait; /* alebo landscape */
  margin: 1cm; /* Okraje */
}

Pre pokročilejšie prispôsobenie alebo pridanie informácií (napríklad čísla strán, hlavičky a päty) je možné použiť direktívu @page. Niektoré špecifické štýly (napríklad position: fixed) sa môžu pri tlači správať nepredvídateľne a vyžadujú samostatné pravidlá pre @media print.

Je dôležité testovať výsledok tlače v rôznych prehliadačoch.