Для оптимизации страниц для печати использую @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.

Важно протестировать результат печати в разных браузерах.

Как вы можете оптимизировать страницы для печати?