Как подготовить страницу сайта к печати через CSS

Печатный CSS сохраняет содержание страницы и убирает лишние элементы интерфейса. Настройте @media print, проверьте разрывы и просмотрите все листы результата.

Что должно получиться

Распечатанная инструкция читается без меню, всплывающих панелей и пустых колонок. Заголовки относятся к своему тексту, изображения помещаются на листе, а таблица не теряет правые столбцы. Человеку не приходится возвращаться к экрану, чтобы понять, какой кусок содержания исчез.

Из чего это складывается

Сначала состав, затем оформление

Определите, что человек должен получить на бумаге. Для статьи нужны заголовок, основной текст, иллюстрации и полезные примечания. Для результата расчёта важны исходные данные, единицы и итог. Не удаляйте целый контейнер только потому, что в нём рядом с нужным текстом находится экранная кнопка.

У печатной копии нет интерактивного раскрытия и наведения. Пояснение, видимое только во всплывающей подсказке, может пропасть. Проверьте такие элементы отдельно и включите необходимые сведения в доступное печатное представление.

Как это сделать по шагам

1. Выберите короткую и длинную страницу одного типа. Зафиксируйте обязательные элементы печатной копии и сохраните исходный экранный вид для сравнения.
2. Добавьте правила @media print в подключённые стили. Убедитесь, что они действительно применяются при подготовке печатного документа.
3. Скройте только элементы, нужные для работы на экране: меню, панели действий и декоративные блоки. Проверьте, что вместе с ними не исчезли важные сведения.
4. Настройте основную колонку, изображения и читаемые цвета. Уберите ограничения, которые обрезают содержание или создают прокручиваемую область.
5. Проверьте разбиение на листы. Скорректируйте поведение заголовков, небольших связанных блоков и широких таблиц.
6. Просмотрите весь результат в нескольких размерах листа или ориентациях, которые нужны вашей задаче. Сохраните тестовый PDF и прочитайте его отдельно от страницы сайта.
7. После закрытия подготовки к печати проверьте экранный интерфейс. Если использовались сценарии подготовки, убедитесь, что они восстановили прежнее состояние.

Небольшой пример правил

В учебном примере site-nav обозначает навигацию, screen-actions — экранные действия, article — основной материал. Базовые правила: @media print { .site-nav, .screen-actions { display: none; } .article { max-width: none; color: #000; background: #fff; } .article img { max-width: 100%; height: auto; } }

Эти классы служат примером: сопоставьте их с собственной разметкой.

Поля и границы листа

Правило @page позволяет задавать параметры печатной страницы, в том числе поля, размер и ориентацию. Например, @page { margin: 15mm; } задаёт поля в учебном варианте. Это не универсальный размер для любого документа: проверьте реальный результат с нужным форматом бумаги и способом вывода.

Часть поведения зависит от браузера и настроек печати. Служебные колонтитулы, масштаб и возможности конкретного устройства могут влиять на результат. Не обещайте одинаковое расположение каждого элемента во всех средах только по одному предварительному просмотру.

Разрывы и длинные блоки

Небольшой связанный блок можно попробовать сохранить целиком через break-inside: avoid. Но блок, который сам выше листа, невозможно вместить в него этим правилом. Не запрещайте разрыв у всей длинной статьи или большой таблицы: это может дать пустые области и неудобное размещение.

Проверьте заголовки у нижней границы листа. Если заголовок отрывается от первого абзаца, настройте поведение разрыва для соответствующей группы и повторите просмотр.

Частые ошибки

Оставлять экранную прокрутку внутри документа

Контейнер с фиксированной высотой и overflow может показать на бумаге только часть текста. Уберите такое ограничение для печатного вида и проверьте конец содержимого. То же относится к длинной таблице, которая на экране прокручивается по горизонтали.

Сохранять смысл только цветом

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

Забывать о данных, которых ещё нет на странице

Печатные стили не получают автоматически содержимое всех карточек бесконечного списка. Отложенные данные, свёрнутые разделы и виртуализированные области требуют отдельного решения. Сначала определите состав документа, затем подготовьте необходимые данные и только после этого оценивайте оформление.

Если для подготовки используются события beforeprint и afterprint, проверьте и отмену печати. Само событие завершения работы с печатью не подтверждает, что человек действительно получил бумажную копию. Не используйте его как доказательство успешного вывода.

Как проверить

• В печатном документе есть все обязательные сведения.
• Скрытие меню не удалило часть основного материала.
• Текст читается без фоновых изображений и цветных заливок.
• Крупные снимки помещаются, а важные детали различимы.
• У таблиц не пропали столбцы и подписи.
• На последнем листе материал действительно заканчивается, а не обрезается.
• Нет пустых листов, появившихся из-за запрета разрыва слишком большого блока.
• После отмены или завершения подготовки экранная страница работает как раньше.

Для проверки отдельных частей пригодятся оформление таблиц, раскрывающиеся блоки и проверка применения CSS. Доработку печатного вида можно обсудить в разделе «Разработка».

Вопросы и ответы

Нужна ли отдельная копия страницы для печати?

Не всегда. Часто достаточно печатных правил для существующей разметки. Отдельное представление полезно, если состав документа существенно отличается от экранного.

Почему пропал текст из прокручиваемого блока?

Проверьте фиксированную высоту и overflow. В печатном варианте содержимому обычно нужно дать место в общем потоке документа.

Можно ли запретить разрывы во всей статье?

Такой запрет не поместит длинный материал на один лист. Применяйте ограничения к небольшим связанным фрагментам и проверяйте результат.

Предварительный просмотр гарантирует одинаковую печать везде?

Нет. Браузер, настройки, формат листа и устройство могут различаться. Проверяйте целевую среду и сохраняйте контрольный результат.

Печатный CSS загрузит недостающие данные списка?

Нет. Состав документа нужно подготовить отдельно. Стили меняют отображение имеющегося содержимого.

Можно ли считать afterprint подтверждением бумажной копии?

Нет. Человек мог отменить действие или сохранить PDF. Используйте событие для восстановления интерфейса, а не для заявления о фактической печати.