Как можете да оптимизирате страниците за печат…

За оптимизация на страниците за печат използвам @media print в CSS. В него скривам елементи, които не са необходими при печатане (навигация, футъри, странични панели), променям стиловете за по-добра четливост (размер на шрифта, интервали), премахвам фонови изображения и сенки. Също така добавям прекъсвания на страниците с 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.

Важно е да тествате резултата при различни браузъри.

Как можете да оптимизирате страниците за печат?