Ինչպես օպտիմալացնել վեբ էջերը տպագրության համար?

Ինքնավար էջերի օպտիմալացման համար օգտագործվում են CSS մեդիա հարցումներ print տիպով:

1. Անհրաժեշտ չհայտնվող տարրերի թաքցնում: Թաքնվում են տարրեր, որոնք չպետք է տպագրվեն (նավիգացիա, ֆուտեր, գովազդային բլոկներ, կոճակներ):

   /* Թաքցնել տպագրության ժամանակ */
   @media print {
     nav, footer, aside, .ad-block, button {
       display: none;
     }
   }
   

2. Թաքնված բովանդակության ցուցադրում: Եթե կա բովանդակություն, որը թաքնված է էկրանին, բայց անհրաժեշտ է տպագրության համար (օրինակ, հղումների ամբողջական URL), այն կարելի է ցուցադրել:

   @media print {
     a[href]:after {
       content: " (" attr(href) ")"; /* Ավելացնում է URL հղումից հետո */
     }
   }
   

3. Ստիլների վերականգնում: Էկրանին հատուկ ստիլների վերականգնում՝ ֆոնային պատկերներ/գույներ, ստվերներ, հեռավորություններ, տառատեսակների չափեր:

   @media print {
     body {
       background: none !important; /* Հեռացնում ֆոնային պատկերն ու գույնը */
       color: #000; /* Սև տեքստ՝ ավելի լավ ընթերցելիության համար */
     }
     * {
       box-shadow: none !important; /* Հեռացնում ստվերները */
       text-shadow: none !important; /* Հեռացնում տեքստի ստվերները */
     }
     p, h1, h2, h3, h4, h5, h6 {
       orphans: 3; /* Պահպանում է միայնակ տողերը էջի սկզբին/ավարտին */
       widows: 3; /* Պահպանում է միայնակ տողերը պարբերության սկզբին/ավարտին */
     }
   }
   

4. Էջերի ընդհատումների կառավարում: Օգտագործել page-break-before, page-break-after, page-break-inside հատկությունները՝ էջերի ընդհատումները վերահսկելու համար:

   @media print {
     article h2 {
       page-break-before: always; /* Սկսում է նոր բաժին նոր էջում */
     }
     ul, ol {
       page-break-inside: avoid; /* Պահպանում է ցանկի ընդհատումը ներսում */
     }
   }
   

5. Նկարների և աղյուսակների օպտիմալացում: Նվազեցնել նկարների չափը, ապահովել աղյուսակների ճիշտ ցուցադրում:

   @media print {
     img {
       max-width: 100% !important; /* Համոզվել, որ նկարը չի անցնի էջի սահմանը */
     }
     table {
       width: 100% !important; /* Աղյուսակը ամբողջ էջի լայնությամբ */
       border-collapse: collapse; /* Հեռացնում է բջիջների միջև տարածությունները */
     }
     th, td {
        border: 1px solid #ccc; /* Ավելացնում է սահմաններ բջիջներին */
     }
   }
   

6. Հատուկ տպագրական ստիլներ: Կարող եք ստեղծել առանձին CSS ֆայլ տպագրության համար և կապել այն մեդիա հարցումով:

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

7. Թեստավորում: Անհրաժեշտ է փորձարկել արդյունքը՝ օգտագործելով "Տպագրության նախադիտում" ֆունկցիան բրաուզերում։