Посетитель находит полезную страницу, распечатывает её для встречи и обнаруживает, что вторая половина сравнения пропала. На экране сайт выглядел убедительно. Но на бумаге его закреплённое меню перекрывает заголовок, а тёмный фон заполняет страницу. Печать — это отдельная ситуация чтения, а не просто снимок экрана, к которому подключили принтер.
Начните с того, что нужно читателю
Описание услуги, подборка вариантов и редакционная статья решают разные задачи. Прежде чем настраивать стили, определите, что должно оставаться понятным вне браузера: тема, важные подробности, подходящие изображения и способ вернуться к источнику. Печатная версия не должна незаметно опускать условие, которое меняет смысл предложения.
Нет необходимости воспроизводить каждое анимированное украшение или элемент навигации. Убрав их, можно освободить место для самого материала. Критерий здесь редакционный: поймёт ли человек, который никогда не видел сайт, о чём этот документ?
То же содержание, другое оформление
Стили CSS для печати позволяют адаптировать страницу для бумаги или PDF, не поддерживая отдельную копию её текста. Для этой цели MDN описывает тип носителя print. Единый источник контента снижает вероятность того, что веб-страницу исправят, а старая версия для печати останется неизменной.
Мы начинаем с простого макета с читаемым текстом, умеренными полями и чёткими заголовками. Декоративный фон не должен быть единственным средством разделения важных разделов. Смысл должен оставаться понятным, даже когда браузер не печатает фон или читатель выбирает чёрно-белую печать.
Держите связанную информацию вместе, но позволяйте длинному содержимому свободно переходить между страницами
Изображение, оторванное от пояснения, может стать неоднозначным. Заголовок таблицы без соответствующих значений столь же бесполезен. Свойство CSS break-inside влияет на разрывы внутри элемента, но правило не заменяет проверки результата. Большой блок всё равно должен помещаться в доступное пространство страницы.
Проверяйте и короткие, и длинные примеры. Не втискивайте целое сравнение в нечитаемо мелкий шрифт только ради того, чтобы не добавлять ещё один лист. Здесь действует тот же принцип, что и для удобного сравнения на небольшом экране: прежде всего сохраняйте связи между подписями и значениями, а уже потом — конкретное визуальное расположение.
Оставьте путь к актуальной странице
На бумаге невозможно перейти по ссылке одним щелчком. Там, где это важно, указывайте читаемый адрес источника вместо непонятного «узнать больше». Подходящий заголовок страницы и короткая строка с источником помогут читателю позднее узнать документ. Если информация часто меняется, объясните её контекст, а не создавайте впечатление, что печатная копия навсегда останется актуальной.
Не раскрывайте автоматически каждый технический URL-адрес, параметр отслеживания или личную подробность. Печатную версию часто передают кому-то ещё. Осознанно выбирайте, какую информацию включать, особенно на страницах с формами или данными, введёнными посетителем.
Проверяйте результат, а не только таблицу стилей
Откройте предварительный просмотр печати и проверьте первые, средние и последние страницы. Ищите обрезанные столбцы, оторванные от текста заголовки, слишком крупные логотипы, отсутствующие изображения и лишние пустые листы. Попробуйте те форматы бумаги и настройки браузера, которые актуальны для вашей аудитории. PDF, сохранённый в одном браузере, — полезный материал для проверки, но не доказательство одинакового результата на всех устройствах.
Это часть постоянного ухода за сайтом: проверяйте печатную версию снова, когда меняется содержание или макет. Цель не в том, чтобы бумага подражала экрану. Она в том, чтобы та же информация оставалась полезной в других условиях.