Барак үчүн баракчаларды кантип оптималдаштыра аласыз…

Басып чыгаруу үчүн барактарды оптималдаштыруу үчүн CSS'те @media print колдонуп жатам. Анын ичинде, басып чыгарууда керексиз элементтерди (навигация, аягындар, бүйүр панелдер) жашырам, окууга ыңгайлаштыруу үчүн стильдерди өзгөртөм (шрифттин өлчөмү, аралыктар), фон сүрөттөрүн жана көлөкөлөрүн алып салам. Ошондой эле, барак бөлүнүштөрүн break-before, break-after аркылуу кошуп, @page аркылуу багытты көзөмөлдөйм. Тез арада жашырылуучу элементтер үчүн .no-print сыяктуу атайын класстарды колдонсо болот.

Мисалдар:

/* Басып чыгарууда керексиз элементтерди жашыруу */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Окууга ыңгайлаштыруу үчүн көрүнүштү жакшыртуу */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Кара текст жакшы контраст үчүн */
  }
  a {
    color: #000; /* шилтемелердин көк түсүн алып салуу */
    text-decoration: none;
  }
  /* шилтемелердин URL'дерин тексттин артында кошуу */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Фон сүрөттөрүн жашыруу */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Барак бөлүнүштөрүн көзөмөлдөө */
@media print {
  h2 {
    break-before: page; /* Ар бир h2 алдында жаңы барак баштоо */
  }
}

/* Барактык багытты аныктоо */
@page {
  size: A4 portrait; /* же landscape */
  margin: 1cm; /* Марздар */
}

Көбүрөөк ыңгайлаштыруу же маалыматтарды кошуу (мисалы, барак номери, башталыш жана аягында) @page директивасын колдонсо болот. Айрым өзгөчө стильдер (мисалы, position: fixed) басып чыгарууда күтүүсүз жүрүм-турум көрсөтүшү мүмкүн жана @media print үчүн өзүнчө эрежелер талап кылынат.

Натыйжаны ар кандай браузерлерде текшерүү маанилүү.

Барак үчүн баракчаларды кантип оптималдаштыра аласыз?