Реалізація друку сторінок сайту (Print CSS)

Проблема: екран і друк — різні світи

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

Ось покрокова інструкція з налаштування друку для сайту з таблицями та мультимедіа:

1. Приховати непотрібні елементи інтерфейсу: header, footer, nav, sidebar, банери, cookie-повідомлення, чат-віджети.
2. Налаштувати типографіку для паперу: serif-шрифт, розмір 12pt, міжрядковий інтервал 1.5, відображення URL посилань.
3. Керувати розривами сторінок: примусовий розрив перед розділами, уникати розривів всередині таблиць і списків.
4. Налаштувати таблиці: повторювати заголовок на кожній сторінці, заборонити розрив рядків, стилізувати межі та фони.
5. Додати колонтитули та нумерацію сторінок через CSS @page.
6. Протестувати в браузерах та на фізичному принтері.

Базова структура та скидання стилів

Насамперед ховаємо все, що не потрібно на папері: 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');
  });
});
"}

Типові проблеми друку та їх вирішення

Для кожної проблеми ми підбираємо індивідуальне рішення. Наприклад, якщо фонові кольори не друкуються, використовуємо print-color-adjust: exact та перевіряємо налаштування принтера. Якщо таблиці розриваються, додаємо page-break-inside: avoid на рядки. Обробка таких нюансів потребує досвіду — наш інженер допомагає уникнути 90% типових помилок.

Що входить у роботу

• Аудит поточних стилів та виявлення елементів, що заважають друку
• Розробка print CSS: скидання, типографіка, розриви, таблиці, фони
• Налаштування колонтитулів, нумерації сторінок та розміру паперу
• JavaScript: кнопка друку (вся сторінка або вибрана область) та обробники before/after print
• Тестування в Chrome, Firefox, Edge, Safari; перевірка на реальному принтері за потреби
• Інтеграція у ваш проєкт (WordPress, Laravel, React та ін.)
• Документація та коментарі в коді

Орієнтовні терміни

Вартість розраховується індивідуально залежно від обсягу та складності. Отримайте консультацію — ми оцінимо ваш проєкт і запропонуємо оптимальне рішення.

Чек-лист перед здачею

• [ ] Навігація, банери, віджети приховані
• [ ] URL посилань відображаються (крім якорів та javascript:)
• [ ] Таблиці не розриваються посередині рядка
• [ ] Зображення не виходять за поля сторінки
• [ ] Немає пустих перших сторінок
• [ ] Шрифт читабельний (не менше 10pt)
• [ ] Колонтитули та нумерація сторінок працюють
• [ ] Фонові кольори брендованих блоків коректно друкуються

Зв'яжіться з нами, щоб обговорити ваш проєкт. Замовте реалізацію print CSS — отримайте ідеальний друк без зайвого клопоту. Гарантія результату.