Kaip galite optimizuoti puslapius spausdinimui…

Optimizuodamas puslapius spausdinimui, naudoju CSS @media print. Jame slepiu nereikalingus elementus spausdinimui (navigaciją, porašus, šoninius skydus), keičiu stilių geresniam skaitomumui (šrifto dydis, tarpai), šalinau foninius vaizdus ir šešėlius. Taip pat pridedu puslapio pertraukas naudojant break-before, break-after ir valdyti orientaciją per @page. Galiu naudoti specialius klases, pvz., .no-print, greitam elementų paslėpimui.

Štai pavyzdžiai:

/* Elementų paslėpimas, kurie nereikalingi spausdinimui */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Išvaizdos keitimas geresniam skaitomumui */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Juodas tekstas geresniam kontrastui */
  }
  a {
    color: #000; /* Nuorodų mėlynos spalvos išjungimas */
    text-decoration: none;
  }
  /* URL pridėjimas po teksto */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Foninių vaizdų paslėpimas */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Puslapio pertraukų valdymas */
@media print {
  h2 {
    break-before: page; /* Pradėti naują puslapį prieš kiekvieną h2 */
  }
}

/* Puslapio orientacijos nustatymas */
@page {
  size: A4 portrait; /* arba landscape */
  margin: 1cm; /* kraštinės */
}

Daugiau sudėtingų pritaikymų ar papildomos informacijos (pvz., puslapio numeriai, antraštės) galima naudoti @page direktyvą. Taip pat reikėtų atsižvelgti, kad kai kurie specifiniai stiliai (pvz., position: fixed) gali elgtis nenuspėjamai spausdinant ir reikalauti papildomų taisyklių @media print kontekste. Svarbu išbandyti spausdinimo rezultatą skirtinguose naršyklėse.

Kaip galite optimizuoti puslapius spausdinimui?