Hogyan optimalizálhatja az oldalakat nyomtatáshoz?

A nyomtatásra optimalizált oldalakhoz CSS-ben az @media print-et használom. Ebben elrejtem azokat az elemeket, amelyek nem szükségesek nyomtatáskor ( navigáció, láblécek, oldalsó panelek), megváltoztatom a stílusokat az olvashatóság javítása érdekében (betűméret, térközök), eltávolítom a háttérképeket és árnyékokat. Emellett oldalelválasztásokat adok hozzá break-before, break-after segítségével, és az orientációt az @page-el szabályozom. Gyorsan elrejthető elemekhez például .no-print osztályokat használhatok.

Íme néhány példa:

/* Azok az elemek, amelyek nem szükségesek nyomtatáskor, elrejtése */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* A kinézet javítása az olvashatóság érdekében */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Fekete szöveg a jobb kontrasztért */
  }
  a {
    color: #000; /* A linkek kék színének eltávolítása */
    text-decoration: none;
  }
  /* A link URL-jének hozzáadása a szöveg után */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Háttérképek elrejtése */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Oldalelválasztások kezelése */
@media print {
  h2 {
    break-before: page; /* Új oldal kezdése minden h2 előtt */
  }
}

/* Az oldal méret és tájolás beállítása */
@page {
  size: A4 portrait; /* vagy landscape */
  margin: 1cm; /* Margók beállítása */
}

Speciálisabb testreszabásokhoz vagy információk (oldalszámok, fejléc, lábléc) hozzáadásához az @page direktívát lehet használni. Fontos megjegyezni, hogy néhány stílus (pl. position: fixed) nyomtatáskor kiszámíthatatlanul viselkedhet, és külön szabályokat igényelhet az @media print-ben.

A nyomtatási eredményt érdemes több böngészőben tesztelni.