Как подготовить веб-статью к печати: CSS, поля и разрывы страниц

Веб-статью можно подготовить к печати отдельными стилями CSS: убрать навигацию и кнопки, оставить основной текст, задать поля листа и управлять разрывами страниц. Это помогает читателю получить чистую бумажную копию или PDF без лишних экранных элементов. Ниже — практический порядок настройки и проверки, который не меняет обычный вид страницы.

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

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

CSS различает экран и печать через тип медиа print. Правила внутри @media print применяются при печати или просмотре будущего PDF; @page задаёт размер, ориентацию и поля страниц. Эти средства описаны в документации MDN: печать в CSS и правило @page.

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

Важно проверить структуру, а не только классы оформления. Если блок автора или подпись к рисунку находится внутри контейнера, который целиком скрывается как «карточка», информация пропадёт вместе с ним. Начинайте с перечня семантических частей и проверяйте область действия селектора в DOM. Узкий селектор вроде .site-header надёжнее, чем универсальное правило для всех header: внутри статьи тоже могут быть заголовки секций.

Печатные стили можно добавить в общую таблицу или подключить отдельным файлом с атрибутом media="print". Для небольшого блога проще начать с одного блока в конце основной таблицы: так легче заметить конфликтующие правила. Для сайта с несколькими шаблонами отдельный print.css упрощает поддержку, но нужно убедиться, что он действительно загружается и не зависит от отключённых экранных файлов.

Внутри печатного блока сначала задайте правила видимости, затем поток и типографику основного материала. Не полагайтесь на случайные экранные стили: фиксированная ширина контейнера, высота вьюпорта, sticky-позиционирование, сетка из двух колонок и overflow могут мешать разбиению на страницы. Переопределите только свойства, которые создают проблему; общее сбрасывание всех стилей часто убирает полезные отступы, контраст и различия уровней заголовков.

Базовая заготовка может выглядеть так:

@media print {
  .site-header, .site-nav, .share-actions, .newsletter, .site-footer {
    display: none !important;
  }
  main {
    width: auto;
    max-width: none;
    margin: 0;
  }
}

Замените классы на реальные имена компонентов своего сайта. Не скрывайте весь footer автоматически: он может содержать библиографию или полезные сведения об авторе.

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

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

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

Пагинация — совместная работа браузера и CSS. Свойства break-before, break-after и break-inside задают предпочтения перед элементом, после него и внутри него. Браузер учитывает эти пожелания вместе с доступным местом, поэтому break-inside: avoid не означает, что любой объект будет удержан целиком: если он выше страницы, разрыв всё равно понадобится. Современные свойства описаны в руководстве MDN по фрагментации CSS.

Самое полезное правило для статьи — не оставлять заголовок без следующего содержимого. Примените break-after: avoid к H2 и H3 или break-before: avoid к первому абзацу после них, затем проверьте реальный браузер. Для короткой подписи с небольшим изображением можно попросить браузер не разрывать figure внутри страницы. Не ставьте запрет разрыва на длинный раздел целиком: браузеру придётся переместить весь раздел на новый лист, оставляя большие пустые участки.

Примерный набор ограничений:

@media print {
  h1, h2, h3 { break-after: avoid; }
  figure, blockquote, pre, table { break-inside: avoid; }
  img { max-width: 100%; height: auto; }
}

Селекторы здесь иллюстративны. Таблица на несколько страниц должна иметь возможность продолжиться; запрет разрыва годится для компактных таблиц, а не для любого содержимого. При необходимости проверьте повтор заголовков таблицы и то, что длинные значения не выходят за край листа.

Не ставьте принудительный разрыв после каждого H2 только ради аккуратного начала разделов. Такой приём превращает короткую статью в пачку полупустых листов. Принудительный break-before: page уместен, когда смысл требует новой страницы — например, отдельное приложение или форма для заполнения. Для обычных разделов предпочтительнее не заставлять браузер разрывать поток, а избежать одного-двух особенно неудачных разрывов.

На бумаге ссылки перестают быть кликабельными. Если читателю необходимо перейти к источнику после печати, оставьте смысловой текст ссылки и подумайте, нужна ли печатная версия URL. Выводить каждую ссылку целиком через CSS часто неудачно: длинные адреса перегружают абзац, дублируют ссылки на общие страницы и раскрывают параметры отслеживания. Для критичных ссылок лучше дать редакторское решение: сноску, короткий список источников или URL только для внешних ссылок, которые действительно нужно открыть.

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

Длинный URL, код или непрерывный идентификатор может растянуть страницу за печатную область. Разрешайте перенос там, где он не меняет смысл: обычные слова и адреса можно переносить, а код лучше сохранять читаемым через горизонтальное масштабирование или отдельный переносимый вариант. Если команда использует собственный шрифт, проверьте, что нужные начертания успевают загрузиться перед формированием PDF; сохраняйте запасной стек, чтобы подмена не разрушила ширину важных строк.

Предпросмотр — обязательная часть настройки, потому что браузер применяет свои ограничения и пользователь может менять цвет, поля и масштаб. Проверяйте не один тестовый пример, а разные типы контента: статью с длинным заголовком, таблицей, цитатой, кодом, сносками и высоким изображением. Если сайт формирует PDF сервером, проверка только в браузере недостаточна: движок генерации и его версия могут иначе интерпретировать CSS пагинации.

Не обязательно. Для небольшого проекта достаточно блока @media print в основной таблице. Отдельный print.css удобен, если у сайта много шаблонов и печатные правила нужно поддерживать независимо; подключайте его с media="print" и проверьте, что браузер действительно получает файл.

Можно указать размер листа в @page, но фактический результат зависит также от диалога печати, принтера и предпочтений читателя. Лучше задавать разумную отправную точку и проверять, что текст остаётся читаемым при другом масштабе и доступной ширине.

Задайте заголовку break-after: avoid или первому следующему блоку break-before: avoid внутри @media print. Затем проверьте несколько страниц: браузер трактует значения как ограничения пагинации, а не как абсолютную гарантию при любом размере содержимого.

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

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

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

Это зависит от способа создания PDF и от того, успел ли браузер загрузить веб-шрифт. Проверьте предпросмотр после завершения загрузки и оставьте подходящий системный запасной шрифт. Если сайт создаёт PDF сервером, тестируйте именно этот генератор и версию его движка.

Хорошая печатная версия сохраняет содержание веб-статьи и убирает помехи экранного интерфейса. Начните с решения, какие части нужны на бумаге, задайте отдельные правила для print, аккуратно настройте поля и разрывы, затем проверьте несколько страниц в PDF-предпросмотре. Если статья использует авторский рукописный шрифт, Fontgenerator поможет создать его для акцентов и проверить начертание в будущих материалах.

Источники по CSS: MDN — Printing; MDN — @page; MDN — CSS fragmentation.