Вебсправочник
Основы веб-разработки

Стили печати: удобная бумажная версия статьи

Как убрать лишние элементы, сохранить содержание и проверить разрывы страниц.

Зачем это нужно

Учебную статью могут сохранить в PDF или распечатать. Экранный интерфейс с меню, тёмными блоками и фиксированными панелями не всегда подходит для бумаги. Отдельные правила печати помогают сохранить содержимое без визуального мусора.

Оставьте основной материал

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

Настройте цвета и ширину

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

Изучите разрывы

Короткие карточки и заголовки можно стараться не разрывать через break-inside и связанные свойства. Но большой блок всё равно должен помещаться на страницы; запрет разрыва не решает бесконечно длинное содержимое.

Важное ограничение

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

Контрольная проверка

  • Главный текст не обрезан.
  • Меню и кнопки не занимают лишнюю бумагу.
  • Примеры читаются без тёмной заливки.
  • Предпросмотр проверен на нескольких страницах.

Продолжить изучение: @media, многострочные примеры.

Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.