Чӣ гуна метавонед саҳифаҳоро барои чоп оптимизатсия…

Барои оптимизатсияи саҳифаҳо барои чоп, ман дар 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 навишта шаванд.

Муҳим аст, ки натиҷаи чопро дар браузерҳои гуногун санҷед.

Чӣ гуна метавонед саҳифаҳоро барои чоп оптимизатсия кунед?