Ako optimalizovať webové stránky pre tlač?

Na optimalizáciu stránok pre tlač sa používajú mediálne dotazy CSS s typom print.

1. Skryť zbytočné prvky: Skryjú sa prvky, ktoré sa nemajú zobrazovať pri tlači (navigácia, päty, reklamné bloky, tlačidlá).

   /* Skrytie pri tlači */
   @media print {
     nav, footer, aside, .ad-block, button {
       display: none;
     }
   }
   

2. Zobraziť skrytý obsah: Ak je obsah skrytý na obrazovke, ale potrebný pre tlač (napríklad úplná URL odkazov), môže sa zobraziť.

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

3. Reset štýlov: Reset štýlov špecifických pre obrazovku: pozadie obrázky/farby, tiene, odsadenia, veľkosti písma.

   @media print {
     body {
       background: none !important; /* Odstráni pozadie obrázok/farbu */
       color: #000; /* Čierny text pre lepšiu čitateľnosť */
     }
     * {
       box-shadow: none !important; /* Odstráni tiene */
       text-shadow: none !important; /* Odstráni tiene textu */
     }
     p, h1, h2, h3, h4, h5, h6 {
       orphans: 3; /* Zabráni osamelým riadkom na začiatku/konci stránky */
       widows: 3; /* Zabráni osamelým riadkom na začiatku/konci odstavca */
     }
   }
   

4. Riadenie prerušení strán: Použitie vlastností page-break-before, page-break-after, page-break-inside na kontrolu prerušení strán.

   @media print {
     article h2 {
       page-break-before: always; /* Začne nový oddiel na novej stránke */
     }
     ul, ol {
       page-break-inside: avoid; /* Zabráni prerušeniu zoznamu vo vnútri */
     }
   }
   

5. Optimalizácia obrázkov a tabuliek: Zmenšenie veľkosti obrázkov, zabezpečenie správneho zobrazenia tabuliek.

   @media print {
     img {
       max-width: 100% !important; /* Zabezpečí, že obrázok nepresiahne stránku */
     }
     table {
       width: 100% !important; /* Tabuľka na celú šírku stránky */
       border-collapse: collapse; /* Odstráni medzery medzi bunkami */
     }
     th, td {
        border: 1px solid #ccc; /* Pridá okraje bunkám */
     }
   }
   

6. Špeciálne štýly pre tlač: Môžete vytvoriť samostatný CSS súbor pre tlač a pripojiť ho s mediálnym dotazom.

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

7. Testovanie: Nezabudnite otestovať výsledok pomocou funkcie "Náhľad tlače" v prehliadači.