Jak můžete optimalizovat stránky pro tisk?

Pro optimalizaci stránky pro tisk používám v CSS @media print. V něm skrývám prvky, které při tisku nejsou potřeba (navigace, patičky, boční panely), měním styly pro lepší čitelnost (velikost písma, mezery), odstraňuji pozadí obrázky a stíny. Také přidávám přerušení stránek pomocí break-before, break-after a řídím orientaci pomocí @page. Rychle skryté prvky lze označit například třídou .no-print.

Zde jsou příklady:

/* Skrytí prvků, které nejsou potřeba při tisku */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Změna vzhledu pro lepší čitelnost */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Černý text pro lepší kontrast */
  }
  a {
    color: #000; /* Odstranění modré barvy odkazů */
    text-decoration: none;
  }
  /* Přidání URL odkazů za text */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Skrytí obrázků na pozadí */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Řízení přerušení stránek */
@media print {
  h2 {
    break-before: page; /* Začínat novou stránku před každým h2 */
  }
}

/* Nastavení orientace stránky */
@page {
  size: A4 portrait; /* nebo landscape */
  margin: 1cm; /* Okraje stránky */
}

Pro složitější přizpůsobení nebo přidání informací (například čísla stránek, záhlaví a zápatí) lze použít direktivu @page. Některé specifické styly (například position: fixed) se při tisku mohou chovat nepředvídatelně a vyžadují samostatná pravidla pro @media print.

Je důležité testovat výsledek tisku v různých prohlížečích.