Come puoi ottimizzare le pagine per la stampa?

Per ottimizzare le pagine per la stampa, utilizzo @media print in CSS. Al suo interno nascondo gli elementi non necessari durante la stampa (navigazione, piè di pagina, pannelli laterali), modifico gli stili per migliorare la leggibilità (dimensione del carattere, spaziature), rimuovo le immagini di sfondo e le ombre. Aggiungo anche interruzioni di pagina con break-before, break-after e controllo l'orientamento con @page. Posso usare classi speciali come .no-print per nascondere rapidamente gli elementi.

Ecco alcuni esempi:

/* Nascondere gli elementi non necessari durante la stampa */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Migliorare l'aspetto per una maggiore leggibilità */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Testo nero per un migliore contrasto */
  }
  a {
    color: #000; /* Rimuovere il colore blu dei link */
    text-decoration: none;
  }
  /* Aggiungere URL dei link dopo il testo */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Nascondere le immagini di sfondo */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Gestire le interruzioni di pagina */
@media print {
  h2 {
    break-before: page; /* Iniziare una nuova pagina prima di ogni h2 */
  }
}

/* Definire l'orientamento della pagina */
@page {
  size: A4 portrait; /* O landscape */
  margin: 1cm; /* Impostare i margini */
}

Per personalizzazioni più avanzate o aggiunta di informazioni (come numeri di pagina, intestazioni e piè di pagina), si può usare la direttiva @page. Inoltre, alcuni stili specifici (come position: fixed) possono comportarsi in modo imprevedibile durante la stampa e richiedere regole separate per @media print.

È importante testare il risultato di stampa in diversi browser.