Разработчик починил печать своего блога десятком строк CSS, а HN спорил о бумаге

Бреннен Пут напечатал свой сайт и увидел слишком крупный текст, уродливый заголовок и синие ссылки, которые стали серыми.

Вкратце

Его блок @media print прячет заголовок, показывает имя автора только на бумаге, ставит основной текст 12 пунктов и делает ссылки чёрными.

Большинство комментаторов сказали, что никогда ничего не печатают. Двое поделились проблемами, которые остались: пропадающие фоны и размеры шрифта.

Исправления

Печатная версия страницы блога
Печатная версия страницы блога

В посте для шапки используется класс .noPrint, для авторской строки .onlyPrint, основной текст 12 пунктов, заголовки 13–16 пунктов, рамка и мельче шрифт в блоках кода (это по-прежнему самое сложное), а чёрные ссылки задаются через !important.

Что всё равно ломается

«Я не так уж за то, чтобы менять размер шрифта по умолчанию или шрифты в печатной версии.» — Beej, автор Beej's Guides и преподаватель информатики

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

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

Получайте такие разборы каждый день

Главные истории Hacker News — на email, в Telegram или RSS.

Это последняя новость выпуска 27 октября 2026.

Перейти в архив выпусков