Kaip optimizuoti tinklalapius spausdinimui?

Optimizuoti puslapius spausdinimui naudojami CSS medijos užklausos su tipu print.

1. Paslėpti nereikalingus elementus: Paslėpiami elementai, kurie neturi būti rodomi spausdinant (navigacija, poraštės, reklaminiai blokai, mygtukai).

   /* Paslėpti spausdinant */
   @media print {
     nav, footer, aside, .ad-block, button {
       display: none;
     }
   }
   

2. Rodyti paslėptą turinį: Jei yra turinys, paslėptas ekrane, bet reikalingas spausdinimui (pvz., nuorodų pilnas URL), jį galima parodyti.

   @media print {
     a[href]:after {
       content: " (" attr(href) ")"; /* Prideda URL po nuorodos */
     }
   }
   

3. Stilių atstatymas: Specialiųjų stilių atstatymas ekrano: foniniai vaizdai/spalvos, šešėliai, tarpai, šriftų dydžiai.

   @media print {
     body {
       background: none !important; /* Pašalina foninį vaizdą/spalvą */
       color: #000; /* Juodas tekstas geresniam skaitomumui */
     }
     * {
       box-shadow: none !important; /* Pašalina šešėlius */
       text-shadow: none !important; /* Pašalina teksto šešėlius */
     }
     p, h1, h2, h3, h4, h5, h6 {
       orphans: 3; /* Užkerta kelią viengungioms eilutėms pradžioje/pabaigoje */
       widows: 3; /* Užkerta kelią viengungioms eilutėms pradžioje/pabaigoje */
     }
   }
   

4. Puslapių pertraukimo valdymas: Naudojant page-break-before, page-break-after, page-break-inside savybes, kontroliuoti puslapių pertraukas.

   @media print {
     article h2 {
       page-break-before: always; /* Pradeda naują skyrių naujame puslapyje */
     }
     ul, ol {
       page-break-inside: avoid; /* Vengti sąrašo pertraukimo viduje */
     }
   }
   

5. Vaizdų ir lentelių optimizavimas: Sumažinti vaizdų dydį, užtikrinti teisingą lentelių rodymą.

   @media print {
     img {
       max-width: 100% !important; /* Užtikrina, kad vaizdas neperžengs puslapio */
     }
     table {
       width: 100% !important; /* Lentelė viso puslapio plotyje */
       border-collapse: collapse; /* Pašalina tarpų tarp langelių */
     }
     th, td {
        border: 1px solid #ccc; /* Prideda ribas langeliams */
     }
   }
   

6. Specialūs stiliai spausdinimui: Galite sukurti atskirą CSS failą spausdinimui ir jį įtraukti su medijos užklausa.

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

7. Testavimas: Būtina išbandyti rezultatą naudodami "Spausdinimo peržiūra" funkciją naršyklėje.