Jak można zoptymalizować strony do druku?

Aby zoptymalizować strony do druku, używam @media print w CSS. W nim ukrywam elementy niepotrzebne podczas drukowania (nawigację, stopki, panele boczne), zmieniam style dla poprawy czytelności (rozmiar czcionki, odstępy), usuwam tła i cienie. Dodaję również podziały stron za pomocą break-before, break-after i kontroluję orientację za pomocą @page. Mogę używać specjalnych klas, np. .no-print, do szybkiego ukrywania elementów.

Oto przykłady:

/* Ukrywanie elementów niepotrzebnych podczas druku */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Zmiana wyglądu dla poprawy czytelności */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Czarny tekst dla lepszego kontrastu */
  }
  a {
    color: #000; /* Usunięcie niebieskiego koloru linków */
    text-decoration: none;
  }
  /* Dodanie URL linków po tekście */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Ukrywanie obrazów tła */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Kontrola podziału stron */
@media print {
  h2 {
    break-before: page; /* Rozpoczęcie nowej strony przed każdym h2 */
  }
}

/* Ustawianie orientacji strony */
@page {
  size: A4 portrait; /* lub landscape */
  margin: 1cm; /* Marginesy */
}

Dla bardziej zaawansowanej personalizacji lub dodania informacji (np. numerów stron, nagłówków, stopek) można użyć dyrektywy @page. Należy również pamiętać, że niektóre style (np. position: fixed) mogą zachowywać się nieprzewidywalnie podczas drukowania i wymagać osobnych reguł dla @media print.

Ważne jest testowanie efektów druku w różnych przeglądarkach.