Cum puteți optimiza paginile pentru imprimare…

Pentru a optimiza paginile pentru imprimare, folosesc @media print în CSS. În acesta, ascund elementele care nu sunt necesare la imprimare (navigație, subsoluri, panouri laterale), schimb stilurile pentru o mai bună lizibilitate (dimensiunea fontului, spațierea), elimin imaginile de fundal și umbrele. De asemenea, adaug întreruperi de pagină folosind break-before, break-after și controlez orientarea cu @page. Pot folosi clase speciale, precum .no-print, pentru ascunderea rapidă a elementelor.

Iată câteva exemple:

/* Ascunde elementele inutile la imprimare */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Îmbunătățește aspectul pentru o mai bună lizibilitate */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Text negru pentru contrast mai bun */
  }
  a {
    color: #000; /* Elimină culoarea albastră a linkurilor */
    text-decoration: none;
  }
  /* Adaugă URL-urile linkurilor după text */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Ascunde imaginile de fundal */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Controlează întreruperile de pagină */
@media print {
  h2 {
    break-before: page; /* Începe o pagină nouă înainte de fiecare h2 */
  }
}

/* Setează orientarea paginii */
@page {
  size: A4 portrait; /* sau landscape */
  margin: 1cm; /* Margini */
}

Pentru personalizări mai avansate sau adăugarea de informații (cum ar fi numerotarea paginilor, anteturi și subsoluri), se poate folosi directiva @page. De asemenea, unele stiluri specifice (cum ar fi position: fixed) pot avea comportament imprevizibil la imprimare și necesită reguli separate pentru @media print.

Este important să testați rezultatul imprimării în diferite browsere.

Cum puteți optimiza paginile pentru imprimare?