Чиним кривую печать: свой стиль @media print для любого сайта

16 мая 2026 · автор JustZix Team

Ты жмёшь Ctrl+P на длинной статье — и предпросмотр это катастрофа: панель навигации съедает первую страницу, боковая колонка наезжает на текст, баннер cookie парит над третьим абзацем, а сплошной тёмный фон вот-вот опустошит картридж принтера. Сайт просто никогда не написал стиль печати. Так напиши его сам — он живёт в CSS-правиле JustZix и снова делает «Сохранить как PDF» пригодным к использованию.

Почему большинство сайтов печатаются плохо

Печать — самая игнорируемая часть веб-разработки. Дизайнеры тестируют на экранах; QA тестирует на экранах; предпросмотр печати никто не открывает. В результате у огромной доли веба либо вообще нет блока @media print, либо есть написанный годы назад, который больше не соответствует вёрстке. Браузер тогда печатает экранную вёрстку как есть — с фиксированными шапками, многоколоночными сетками, тёмными темами и всем прочим.

Решение — CSS-правило, которое применяется только когда страница печатается. Всё внутри @media print { ... } невидимо на экране и срабатывает только для бумаги и экспорта в PDF. Это значит, что можно действовать агрессивно: прятать целые области, перекрашивать всё, насильно делать одну колонку — ничто из этого не затрагивает обычный просмотр.

Шаг 1 — прячем всё, что не контент

Навигация, боковые колонки, подвалы, виджеты шеринга, баннеры cookie, липкие коробки «подпишись»: ничему из этого не место на бумаге. Начни со скрытия очевидного обрамления.

@media print {
  header, nav, aside, footer,
  .sidebar, .site-header, .site-footer,
  .cookie-banner, .newsletter, .share-bar,
  .ad, [class*="advert" i], [id*="cookie" i],
  [role="banner"], [role="navigation"],
  [aria-label*="cookie" i] {
    display: none !important;
  }
}

Если страница всё ещё печатает мусор, открой предпросмотр печати, найди мешающий блок в DevTools и добавь его селектор в список. Это нужно сделать лишь раз на сайт — правило сохраняется.

Шаг 2 — раскрываем обрезанный контент

Многие сайты ограничивают текст несколькими строками, прячут переполнение или помещают статью в прокручиваемый блок фиксированной высоты. На экране это нормально; на бумаге это отрезает твой контент. Отмени ограничение.

@media print {
  /* Kill height limits and scroll boxes */
  main, article, .content, .post-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Undo line-clamp truncation */
  * {
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
  }

  /* Force the article full width, drop the grid */
  body, main, article {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
}

Сплошное overflow: visible на * выглядит грубовато, но внутри @media print это ровно то, что нужно — на распечатке ничто не должно быть обрезано.

Шаг 3 — управляем разрывами страниц

Самое большое улучшение распечатки — не давать вещам разрываться между страницами посреди элемента. Блок кода, разделённый на два листа, заголовок, застрявший внизу страницы, строка таблицы, разорванная пополам, — всё это чинится свойствами фрагментации.

@media print {
  /* Never split these across a page */
  pre, blockquote, table, figure, img,
  li, .card {
    break-inside: avoid;
  }

  /* Keep a heading with the text that follows it */
  h1, h2, h3, h4 {
    break-after: avoid;
  }

  /* Start each top-level section on a fresh page */
  .chapter, section.page {
    break-before: page;
  }
}

Современные свойства — break-inside, break-before и break-after. Старые имена page-break-* ещё работают, и Chrome сопоставляет их автоматически, но для новых правил пиши новые.

Шаг 4 — показываем URL ссылок после якорей

Печатная ссылка бесполезна — читатель не может кликнуть на «нажми здесь». Печатай реальный URL рядом с ней с помощью трюка с генерируемым контентом.

@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }

  /* Don't print URLs for in-page anchors or javascript: links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
}

Это вытягивает атрибут href в видимый текст. Пропусти его для якорных ссылок и ссылок-картинок, если становится шумно — распечатка, забитая длинными трекинговыми URL, это свой вид беспорядка.

Шаг 5 — задаём поля через @page

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

@media print {
  @page {
    margin: 18mm 16mm;
    size: A4;
  }

  /* Tighter margin on the first page if you have a title block */
  @page :first {
    margin-top: 12mm;
  }
}

Шаг 6 — насильно ставим светлый фон, чтобы сэкономить чернила

Сайты с тёмной темой печатаются стеной тонера. По умолчанию Chrome убирает фоновые цвета при печати (если не отмечено «Фоновая графика»), но текст часто остаётся светло-серым в расчёте на тёмный фон. Насильно поставь чистый чёрный на белом.

@media print {
  html, body, * {
    background: #fff !important;
    background-image: none !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Keep images and real photos intact */
  img, svg, video { filter: none !important; }

  /* Slightly soften secondary text so it still reads as secondary */
  .muted, .meta, time, small { color: #444 !important; }
}

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

Собираем всё в JustZix

Создай правило, ограниченное сайтом, с которого ты часто печатаешь, — например https://docs.example.com/*.
Вставь все шесть блоков в панель CSS, обёрнутые в один @media print (или держи отдельными блоками — оба варианта работают).
Открой страницу, жми Ctrl+P и смотри предпросмотр. Итерируй: всё, что всё ещё не так, получает добавленный селектор.
Синхронизируй свой ключ, чтобы та же чистая настройка печати следовала за тобой на каждое устройство.

Поскольку всё это сидит внутри @media print, правило можно оставить активным навсегда. Оно спит при обычном просмотре и просыпается только когда ты печатаешь или экспортируешь PDF.

Ловушки, о которых стоит знать

Переключатель фоновой графики — в диалоге печати Chrome есть галочка «Фоновая графика», которая переопределяет часть твоих выборов цвета. Твои правила с !important всё равно побеждают для переднего плана, но протестируй оба состояния.
Фиксированные/липкие элементы повторяются на каждой печатной странице в некоторых браузерах. Если шапка продолжает вылезать, поставь ей position: static !important внутри блока печати.
Сгенерированные URL могут плохо переноситься — поэтому мы добавляем word-break: break-all; без него длинный URL уводит вёрстку вбок.
Не прячь слишком много — подписи, кредиты иллюстраций и имена авторов — это контент, а не обрамление. Будь конкретен со списком скрытия.

Смотри также

Оверлей для отладки адаптива — найди проблемы вёрстки до того, как они дойдут до распечатки.
Скопируй страницу как чистый Markdown — другой способ вытащить контент с беспорядочной страницы.

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

css printing

Оцени эту статью

Оценок пока нет — оцени первым.