Sahifalarni chop etish uchun qanday optimallashtirish…

Sahifalarni bosma uchun optimallashtirish uchun CSS'da @media print dan foydalanaman. Unda, bosma vaqtida keraksiz elementlarni (navigatsiya, footerlar, yon panel) yashiraman, o'qish uchun stilni o'zgartiraman (font o'lchami, bo'sh joylar), fon rasmlari va soyalardan voz kechar ekanman. Shuningdek, break-before, break-after yordamida sahifa bo'linmalarini qo'shaman va @page yordamida orientatsiyani nazorat qilaman. Tezkor elementlarni yashirish uchun .no-print kabi maxsus sinflardan foydalanish mumkin.

Quyidagi misollar:

/* Bosma uchun keraksiz elementlarni yashirish */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* O'qish uchun ko'rinishni yaxshilash */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Yaxshi kontrast uchun qora matn */
  }
  a {
    color: #000; /* Linklarning moviy rangini olib tashlash */
    text-decoration: none;
  }
  /* Link URL'larini matn ortida qo'shish */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Fon rasmlarini yashirish */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Sahifa bo'linmalarini boshqarish */
@media print {
  h2 {
    break-before: page; /* Har bir h2dan oldin yangi sahifa boshlash */
  }
}

/* Sahifa orientatsiyasini belgilash */
@page {
  size: A4 portrait; /* yoki landscape */
  margin: 1cm; /* Chegara bo'shlig'i */
}

Kengaytirilgan sozlashlar yoki ma'lumotlar (masalan, sahifa raqamlari, sarlavha va footerlar) uchun @page direktivasidan foydalanish mumkin. Shuningdek, position: fixed kabi ba'zi maxsus uslublar bosma vaqtida kutilmagan tarzda ishlashlari mumkin va @media print uchun alohida qoidalar talab qilinadi.

Bosma natijasini turli brauzerlarda sinab ko'rish muhim.

Sahifalarni chop etish uchun qanday optimallashtirish mumkin?