Jak optimalizovat webové stránky pro tisk?

Pro optimalizaci stránek pro tisk se používají CSS mediální dotazy s typem print.

1. Skrytí nepotřebných prvků: Skryjí se prvky, které se nemají zobrazovat při tisku (navigace, patičky, reklamní bloky, tlačítka).

   /* Skrytí při tisku */
   @media print {
     nav, footer, aside, .ad-block, button {
       display: none;
     }
   }
   

2. Zobrazit skrytý obsah: Pokud je obsah skrytý na obrazovce, ale potřebný pro tisk (například úplná URL odkazů), lze jej zobrazit.

   @media print {
     a[href]:after {
       content: " (" attr(href) ")"; /* Přidá URL za odkaz */
     }
   }
   

3. Reset stylů: Reset stylů specifických pro obrazovku: pozadí obrázky/barvy, stíny, odsazení, velikosti písma.

   @media print {
     body {
       background: none !important; /* Odstraní pozadí obrázek/barvu */
       color: #000; /* Černý text pro lepší čitelnost */
     }
     * {
       box-shadow: none !important; /* Odstraní stíny */
       text-shadow: none !important; /* Odstraní stíny textu */
     }
     p, h1, h2, h3, h4, h5, h6 {
       orphans: 3; /* Zabrání osamělým řádkům na začátku/konci stránky */
       widows: 3; /* Zabrání osamělým řádkům v začátku/konci odstavce */
     }
   }
   

4. Řízení přerušení stránek: Použití vlastností page-break-before, page-break-after, page-break-inside pro kontrolu přerušení stránek.

   @media print {
     article h2 {
       page-break-before: always; /* Začne novou sekci na nové stránce */
     }
     ul, ol {
       page-break-inside: avoid; /* Zabrání přerušení seznamu uvnitř */
     }
   }
   

5. Optimalizace obrázků a tabulek: Zmenšení velikosti obrázků, zajištění správného zobrazení tabulek.

   @media print {
     img {
       max-width: 100% !important; /* Zajistí, že obrázek nepřesáhne stránku */
     }
     table {
       width: 100% !important; /* Tabulka na celou šířku stránky */
       border-collapse: collapse; /* Odstraní mezery mezi buňkami */
     }
     th, td {
        border: 1px solid #ccc; /* Přidá okraje buňkám */
     }
   }
   

6. Speciální styly pro tisk: Můžete vytvořit samostatný CSS soubor pro tisk a připojit jej s mediálním dotazem.

   <link rel="stylesheet" href="styles.css" media="screen">
   <link rel="stylesheet" href="print.css" media="print">
   

7. Testování: Nezapomeňte otestovat výsledek pomocí funkce "Náhled tisku" v prohlížeči.