Проблема: экран и печать — разные миры
Страница выглядит отлично на мониторе, но при выводе на печать превращается в кашу из обрезанных баннеров, sticky-хедера, мелкого текста и нечитаемых ссылок. 70% пользователей сталкиваются с этой проблемой. Print CSS в 2 раза сокращает время на подготовку документов к печати и уменьшает расход бумаги на 30%. Мы решаем эту задачу с помощью грамотно настроенного print CSS — отдельного набора правил и минимального JavaScript. Наш опыт: более 50 успешных проектов, гарантия результата.
Почему print CSS — отдельная дисциплина?
Экранные стили не подходят для бумаги. Разные разрешения, цветовые модели (RGB vs CMYK), шрифты (sans-serif vs serif), необходимость скрывать интерактивные элементы. Исследования Nielsen Norman Group показывают, что 70% пользователей жалуются на проблемы при печати из браузера. Print CSS требует понимания механики разрыва страниц, повторяющихся заголовков таблиц, колонтитулов и корректной обработки фонов. Мы разбирали сложные случаи: от финансовых отчётов с десятками таблиц до промо-страниц с брендированными цветами.
Как настроить print CSS для сложных таблиц?
Вот пошаговая инструкция по настройке печати для сайта с таблицами и мультимедиа:
- Скрыть ненужные элементы интерфейса: header, footer, nav, sidebar, баннеры, cookie-уведомления, чат-виджеты.
- Настроить типографику для бумаги: serif-шрифт, размер 12pt, межстрочный интервал 1.5, отображение URL ссылок.
- Управлять разрывами страниц: принудительный разрыв перед главами, избегать разрывов внутри таблиц и списков.
- Настроить таблицы: повторять заголовок на каждой странице, запретить разрыв строк, стилизовать границы и фоны.
- Добавить колонтитулы и нумерацию страниц через CSS @page.
- Протестировать в браузерах и на физическом принтере.
Базовая структура и сброс стилей
Первым делом прячем всё, что не нужно на бумаге: header, footer, nav, sidebar, баннеры, cookie-уведомления, чат-виджеты. Контент растягиваем на 100% ширины, убираем тени и скругления.
@media print {
header, footer, nav, aside, .sidebar, .cookie-banner,
.chat-widget, .share-buttons, .advertisement,
.back-to-top, [data-noprint], .no-print {
display: none !important;
}
.container, .wrapper, main, article {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
* {
box-shadow: none !important;
text-shadow: none !important;
border-radius: 0 !important;
}
}
Типографика для бумаги
Для печати используем serif-шрифты (Georgia, Times New Roman) с базовым размером 12pt. Увеличиваем заголовки, настраиваем межстрочный интервал, добавляем orphans и widows для контроля вдових строк. Ссылки дополняем отображением URL. Для детального понимания смотрите документацию Media queries.
@media print {
body {
font-family: Georgia, 'Times New Roman', serif;
font-size: 12pt;
line-height: 1.5;
color: #000;
background: #fff;
}
h1 { font-size: 24pt; margin-bottom: 12pt; }
h2 { font-size: 18pt; margin-bottom: 8pt; }
h3 { font-size: 14pt; margin-bottom: 6pt; }
p, li {
font-size: 12pt;
orphans: 3;
widows: 3;
}
a[href]:after {
content: ' (' attr(href) ')';
font-size: 10pt;
color: #555;
}
a[href^='#']:after,
a[href^='javascript:']:after {
content: '';
}
img {
max-width: 100% !important;
page-break-inside: avoid;
}
}
Управление разрывами страниц и @page
Настраиваем принудительные разрывы перед главами, избегаем разрывов внутри таблиц и списков, контролируем отступы @page и добавляем колонтитулы.
@media print {
h1, h2, h3, h4, h5, h6 {
page-break-after: avoid;
break-after: avoid;
}
.no-break, table, figure, blockquote {
page-break-inside: avoid;
break-inside: avoid;
}
.page-break-before, section.chapter {
page-break-before: always;
break-before: page;
}
.page-break-after {
page-break-after: always;
break-after: page;
}
}
@page {
size: A4 portrait;
margin: 2cm 2.5cm 2cm 2.5cm;
}
@page :first { margin-top: 3cm; }
@page :left { margin-left: 3cm; }
@page :right { margin-right: 3cm; }
@page {
@top-right {
content: 'ООО «Компания» — конфиденциально';
font-size: 9pt;
color: #999;
}
@bottom-center {
content: 'Стр. ' counter(page) ' из ' counter(pages);
font-size: 9pt;
}
}
Таблицы: заголовки на каждой странице и стилизация
Чтобы большие таблицы не превращались в кашу, повторяем шапку на каждом листе, запрещаем разрыв строк и настраиваем принтер-френдли цвета.
@media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
tr { page-break-inside: avoid; }
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #999;
padding: 4pt 6pt;
text-align: left;
}
th {
background: #eee !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
Фоновые цвета и JavaScript: кнопка печати и события
Для брендированных блоков используем print-color-adjust: exact. Логотипы — через ::before с изображением, а не через background-image. Добавляем JS для кнопки печати выбранной области и обработчики beforeprint/afterprint для раскрытия аккордеонов и форсирования lazy-загрузки.
function printPage(selector?: string) {
if (selector) {
const content = document.querySelector(selector);
if (!content) return;
const printWindow = window.open('', '_blank');
if (!printWindow) return;
printWindow.document.write(`
<!DOCTYPE html>
<html>
<head>
<title>${document.title}</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body class="print-only">
${content.innerHTML}
</body>
</html>
`);
printWindow.document.close();
printWindow.focus();
printWindow.onload = () => {
printWindow.print();
printWindow.close();
};
return;
}
window.print();
}
document.querySelectorAll('[data-print-btn]').forEach(btn => {
const selector = btn.getAttribute('data-print-target');
btn.addEventListener('click', () => printPage(selector ?? undefined));
});
window.addEventListener('beforeprint', () => {
document.querySelectorAll('.accordion-content[hidden]').forEach(el => {
el.removeAttribute('hidden');
el.setAttribute('data-was-hidden', 'true');
});
document.querySelectorAll('img[loading="lazy"]').forEach(img => {
const image = img as HTMLImageElement;
if (image.dataset.src) image.src = image.dataset.src;
});
});
window.addEventListener('afterprint', () => {
document.querySelectorAll('[data-was-hidden]').forEach(el => {
el.setAttribute('hidden', '');
el.removeAttribute('data-was-hidden');
});
});
Типичные проблемы печати и их решения
| Проблема | Решение |
|---|---|
| Элементы интерфейса (меню, баннеры) выводятся на бумагу | Скрыть через display: none в print media query |
| Ссылки отображаются как обычный текст | Добавить a[href]:after { content: ' (' attr(href) ')'; } |
| Таблицы разрываются посередине строки | Установить tr { page-break-inside: avoid; } и thead { display: table-header-group; } |
| Фоновые цвета/изображения не печатаются | Использовать print-color-adjust: exact и логотипы через img или ::before |
| Слишком мелкий шрифт | Установить font-size: 12pt для body, не менее 10pt для мелких элементов |
Пустая первая страница из-за margin-top на body |
Использовать @page :first { margin-top: ...; } вместо margin на body |
Для каждой проблемы мы подбираем индивидуальное решение. Например, если фоновые цвета не печатаются, используем print-color-adjust: exact и проверяем настройки принтера. Если таблицы разрываются, добавляем page-break-inside: avoid на строки. Обработка таких нюансов требует опыта — наш инженер помогает избежать 90% типовых ошибок.
Что входит в работу
- Аудит текущих стилей и выявление элементов, мешающих печати
- Разработка print CSS: сброс, типографика, разрывы, таблицы, фоны
- Настройка колонтитулов, нумерации страниц и размера бумаги
- JavaScript: кнопка печати (вся страница или выбранная область) и обработчики before/after print
- Тестирование в Chrome, Firefox, Edge, Safari; проверка на реальном принтере при необходимости
- Интеграция в ваш проект (WordPress, Laravel, React и др.)
- Документация и комментарии в коде
Сроки и стоимость
| Этап | Ориентировочный срок |
|---|---|
| Базовая настройка print.css (лендинг/блог) | от 2 часов |
| Сложная страница (таблицы, условная видимость, брендированные цвета) | от 1 дня |
| Полный аудит и доработка существующего проекта | от 4 часов |
Стоимость рассчитывается индивидуально в зависимости от объёма и сложности. Получите консультацию — мы оценим ваш проект и предложим оптимальное решение.
Чек-лист перед сдачей
- [ ] Навигация, баннеры, виджеты скрыты
- [ ] URL ссылок отображаются (кроме якорей и javascript:)
- [ ] Таблицы не разрываются посередине строки
- [ ] Изображения не выходят за поля страницы
- [ ] Нет пустых первых страниц
- [ ] Шрифт читаем (не меньше 10pt)
- [ ] Колонтитулы и нумерация страниц работают
- [ ] Фоновые цвета брендированных блоков корректно печатаются
Свяжитесь с нами, чтобы обсудить ваш проект. Закажите реализацию print CSS — получите идеальную печать без лишних хлопот. Гарантия результата.