Стили для печати: как сделать веб-страницу пригодной для печати и для PDF

Цель

Страница, которая при печати или сохранении в PDF содержит контент и ничего кроме него: с читаемым шрифтом, целыми таблицами, видимыми адресами ссылок и разрывами страниц в разумных местах.

Предварительные условия

Семантическая разметка (правила для печати будут обращаться к nav, header, footer, aside, main), предварительный просмотр печати в браузере для тестирования и понимание механизмов, описанных в руководстве MDN по печати: @media print для правил, действующих только при печати; at-правило @page для размеров страницы, ориентации и полей; события beforeprint/afterprint для подготовки документа вокруг запроса на печать; и window.print() для вызова диалога печати.

Шаги

1. Добавьте блок @media print в конец таблицы стилей (специфичность селекторов по-прежнему действует). Скройте служебные элементы интерфейса: nav, header, footer, aside, .toolbar, button { display: none }; уберите фиксированное и «липкое» позиционирование, иначе оно будет повторяться на каждой странице.
2. Сбросьте оформление страницы: белый фон, чёрный текст, шрифт с засечками либо основной шрифт текста, но в размере, подобранном под бумагу, и max-width: none для колонки контента, чтобы она использовала всю ширину страницы.
3. Раскройте то, что скрыто на экране: откройте элементы details, покажите все панели вкладок и содержимое аккордеонов, печатайте усечённый текст полностью. Там, где CSS не дотягивается (например, виртуализированные списки, рендерящие только видимые строки), используйте событие beforeprint.
4. Покажите адреса ссылок: a[href^="http"]::after { content: " (" attr(href) ")" }, исключая внутренние якоря и ссылки, текст которых уже совпадает с URL. Если это важно, аналогично покажите атрибуты title у abbr.
5. Управляйте разрывами: break-inside: avoid для таблиц, иллюстраций, блоков кода и групп-карточек; break-after: avoid для заголовков, чтобы они не оставались «сиротами» внизу страницы; break-before: page перед крупными разделами, где это уместно; оставьте у thead значение по умолчанию display: table-header-group (не переопределяйте его), потому что движки печати могут повторять строки заголовка таблицы на каждой странице, на которую она переходит.
6. Задайте @page { size: A4; margin: 2cm } (или letter) и рассмотрите @page :first для отдельных полей первой страницы.
7. Цвет: браузеры обычно убирают фоновые цвета и изображения при печати; там, где фон несёт смысловую нагрузку (статусные метки, подсветка синтаксиса), задайте print-color-adjust: exact именно для этого элемента, а для остального используйте вместо цвета рамку или текстовую подпись.
8. Проверьте предварительный просмотр печати в двух браузерах, в книжной и альбомной ориентации, и один раз в режиме «сохранить как PDF»; проверьте число страниц и убедитесь, что слишком широкий селектор не скрыл ничего важного.

Ожидаемый результат

Печать даёт компактный документ со всем содержимым, без навигации, с читаемыми кодом и таблицами и с URL-адресами, которые читатель может набрать прямо с бумаги.

Ограничения и основание проверки

Поведение соответствует указанной документации MDN; поддержка разрывов страниц и возможностей @page различается между движками, а headless-генераторы PDF имеют собственные значения по умолчанию. Интерактивному контенту (картам, графикам, отрисованным на canvas) нужно отдельно подготовленное статическое изображение на замену.

Скрывайте служебный интерфейс сайта, а не любой header

header, footer и aside относятся к ближайшей секции, поэтому голое правило header { display: none } заодно уберёт блок заголовка статьи, подвал раздела с примечаниями и атрибуцию цитаты. Вместо этого выбирайте служебный интерфейс уровня страницы по позиции или по классу:

@media print {
  body > header, body > footer, body > nav,
  .site-sidebar, .toolbar { display: none; }
  article header, article footer { display: block; }
}

Оставляйте кнопки, которые отображают состояние (нажатый переключатель, выбранную вкладку), и скрывайте только те элементы управления, у которых нет смысла на бумаге. После этого выполните шаг 8, перевернув вопрос: перечислите, что должно быть в распечатанной версии, и убедитесь, что каждый пункт присутствует, вместо того чтобы искать, чего не хватает.