Sayfaları yazdırmak için nasıl optimize…

Yazdırmak için sayfaları optimize etmek amacıyla CSS'de @media print kullanıyorum. Bu blokta, yazdırırken gerek olmayan öğeleri (navigasyon, altbilgiler, yan paneller) gizlerim, okunabilirliği artırmak için stilleri değiştiririm (yazı tipi boyutu, boşluklar), arka plan resimlerini ve gölgeleri kaldırırım. Ayrıca, break-before, break-after kullanarak sayfa bölünmelerini ekler ve @page ile yönlendirmeyi kontrol ederim. Hızlıca öğeleri gizlemek için .no-print gibi özel sınıflar kullanabilirim.

İşte bazı örnekler:

/* Yazdırırken gerek olmayan öğeleri gizleme */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Okunabilirliği artırmak için görünümü değiştirme */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Daha iyi kontrast için siyah metin */
  }
  a {
    color: #000; /* Bağlantıların mavi rengini kaldır */
    text-decoration: none;
  }
  /* Bağlantı URL'lerini metin sonuna ekleme */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Arka plan resimlerini gizleme */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Sayfa bölünmelerini kontrol etme */
@media print {
  h2 {
    break-before: page; /* Her h2 öncesinde yeni sayfa başlat */
  }
}

/* Sayfa yönlendirmesini belirleme */
@page {
  size: A4 portrait; /* veya landscape */
  margin: 1cm; /* Kenar boşlukları */
}

Daha gelişmiş özelleştirmeler veya sayfa numaraları, üstbilgi ve altbilgi gibi bilgiler eklemek için @page direktifi kullanılabilir. Ayrıca, position: fixed gibi bazı özel stiller yazdırılırken beklenmedik davranışlar gösterebilir ve @media print için ayrı kurallar gerekebilir.

Yazdırma sonucunu farklı tarayıcılarda test etmek önemlidir.

Sayfaları yazdırmak için nasıl optimize edebilirsiniz?