Зачем веб-сайты должны быть пригодны для печати

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

К счастью, печать веб-страниц был давно приоритетом веб-дизайна. Любую страницу можно распечатать, нажав CTRL+P и надеясь, что драйвер принтера сегодня захочет сотрудничать. Разработчик протестировал это на своём сайте, предполагая, что всё получится хорошо без дополнительных усилий.

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

Как сделать сайт пригодным для печати

Веб-сообщество давно занимается вопросом печати HTML-страниц. CSS предлагает селекторы для стилизации именно печатного контента. Вот фрагмент CSS, используемый на странице:

.onlyPrint {
  display: none;
}

@media print {
  .noPrint {
    display: none;
  }

  .onlyPrint {
    display: inline;
  }

  p,
  ol {
    font-size: 12pt;
  }

  h3, h4 {
    font-size: 13pt;
  }

  h2 {
    font-size: 14pt;
  }

  h1 {
    font-size: 16pt;
  }

  .giallo {
    border: 3px solid black;
  }

  .giallo-l {
    font-size: 11pt;
  }

  a {
    color: black !important;
  }
}

Результат работы этого кода можно увидеть, нажав CTRL+P или кнопку печати на странице. Вот что делает этот фрагмент:

  1. onlyPrint — класс для элементов, которые должны появляться только в печатной версии. Например, небольшое указание авторства под заголовком.
  2. noPrint — удаляет элементы из печатной версии. Обычно применяется к шапке сайта, которая выглядит ужасно на бумаге.
  3. Изменение размера шрифта критически важно. Переменный масштаб текста, который выглядит хорошо на экране, ужасен на печати. 12pt — общепринятый размер, хорошо работает. Заголовки имеют смысл сделать чуть крупнее.
  4. Класс giallo для блоков кода. Даже после оптимизации они остаются самой неприятной частью — блоки кода не хотят разбиваться между страницами.
  5. Синие ссылки хорошо смотрятся на сайте, но в чёрно-белом виде выглядят ужасно. Приведение их к одному цвету с остальным текстом — простое и эффективное решение.

Почему стоит это делать

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

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

Добавление от 2026-10-26: друг сообщил, что статья оказалась на главной странице HN и lobste.rs. Приятно! Несмотря на выявленные недостатки CSS, надеюсь, что материал натолкнёт людей на раздумья об этом формате. Спасибо всем, кто прочитал!