Проблема: екран і друк — різні світи
Сторінка виглядає чудово на моніторі, але при виведенні на друк перетворюється на кашу з обрізаних банерів, 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 — отримайте ідеальний друк без зайвого клопоту. Гарантія результату.