Kuidas saate optimeerida lehti trükkimiseks?

Paberlehtide optimeerimiseks kasutan CSS-is @media print. Selles peidan ma ei-vajalikke elemente (navigeerimine, jalus, külgpaneelid), muudan stiile parema loetavuse saavutamiseks (kirjatüübi suurus, vahed), eemaldan taustapildid ja varjud. Samuti lisan lehekülje jaotuse kasutades break-before, break-after ning juhin orientatsiooni @page kaudu. Võin kasutada spetsiaalseid klasse, näiteks .no-print, elementide kiireks peitmiseks.

Siin on näited:

/* Elementide peitmine, mis ei ole vajalikud trükkimiseks */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Väljanägemise muutmine parema loetavuse jaoks */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Must tekst parema kontrastsuse jaoks */
  }
  a {
    color: #000; /* Linkide sinise värvi eemaldamine */
    text-decoration: none;
  }
  /* URL-ide lisamine teksti järel */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Taustapiltide peitmine */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Lehekülje jaotuse juhtimine */
@media print {
  h2 {
    break-before: page; /* Uue lehekülje alustamine enne iga h2 */
  }
}

/* Lehekülje orientatsiooni määramine */
@page {
  size: A4 portrait; /* või landscape */
  margin: 1cm; /* ääred */
}

Süvendatud kohanduste või lisainfo (näiteks leheküljenumbrid, päised) saab teha @page direktiiviga. Tuleb arvestada, et mõned spetsiifilised stiilid (näiteks position: fixed) võivad trükkimisel käituda ettearvamatult ning vajada eraldi reegleid @media print-is. Oluline on testida trükise tulemust erinevates brauserites.