Відвідувач знаходить корисну сторінку, друкує її для зустрічі й виявляє, що друга половина порівняння зникла. На екрані сайт виглядав переконливо. А на папері його закріплене меню перекриває заголовок, і темне тло заповнює сторінку. Друк — це окремий спосіб читання, а не просто знімок екрана, до якого під'єднали принтер.
Почніть із того, що читач має отримати
Опис послуги, добірка варіантів і редакційна стаття мають різні завдання. Перш ніж налаштовувати стилі, визначте, що має залишатися зрозумілим поза браузером: тема, основні подробиці, доречні зображення та спосіб повернутися до джерела. Друкована версія не повинна непомітно пропускати умову, яка змінює зміст пропозиції.
Немає потреби відтворювати кожну анімовану прикрасу чи елемент навігації. Прибравши їх, можна звільнити місце для самого матеріалу. Критерій тут редакційний: чи зрозуміє людина, яка ніколи не бачила сайт, про що цей документ?
Той самий вміст, інше оформлення
Стилі CSS для друку дають змогу адаптувати сторінку для паперу або PDF, не підтримуючи окрему копію її тексту. Для цього MDN описує тип носія print. Спільне джерело вмісту зменшує ймовірність того, що вебсторінку виправлять, а стара версія для друку залишиться незмінною.
Ми починаємо з простого макета з читабельним текстом, помірними полями й чіткими заголовками. Декоративне тло не має бути єдиним засобом відокремлення важливих розділів. Зміст має залишатися зрозумілим, навіть коли браузер не друкує тло або читач обирає чорно-білий друк.
Тримайте пов'язану інформацію разом, але дозволяйте довгому вмісту вільно переходити між сторінками
Зображення, відірване від пояснення, може стати неоднозначним. Заголовок таблиці без відповідних значень так само мало допомагає. Властивість CSS break-inside впливає на розриви всередині елемента, але правило не замінює перевірки результату. Великий блок усе одно має вміститися в доступний простір сторінки.
Перевіряйте і короткі, і довгі приклади. Не стискайте ціле порівняння до нечитабельно дрібного шрифту лише заради того, щоб не додавати ще один аркуш. Тут діє той самий принцип, що й для зручного порівняння на малому екрані: спершу зберігайте зв'язки між підписами та значеннями, а вже потім — конкретне візуальне розташування.
Залиште шлях до актуальної сторінки
На папері неможливо перейти за посиланням одним натисканням. Там, де це важливо, вказуйте читабельну адресу джерела замість незрозумілого «дізнатися більше». Доречний заголовок сторінки й короткий рядок із джерелом допоможуть читачеві згодом упізнати документ. Якщо інформація часто змінюється, поясніть її контекст, а не створюйте враження, що друкована копія залишатиметься актуальною вічно.
Не розкривайте автоматично кожну технічну URL-адресу, параметр відстеження чи особисту подробицю. Друковану версію часто передають комусь іншому. Свідомо обирайте, яку інформацію включати, особливо на сторінках із формами або даними, введеними відвідувачем.
Перевіряйте результат, а не лише таблицю стилів
Відкрийте попередній перегляд друку й перевірте перші, середні та останні сторінки. Шукайте обрізані стовпці, відірвані від тексту заголовки, завеликі логотипи, відсутні зображення та зайві порожні аркуші. Спробуйте ті формати паперу й налаштування браузера, які актуальні для вашої аудиторії. PDF, збережений в одному браузері, — корисний матеріал для перевірки, але не доказ однакового результату на всіх пристроях.
Це частина постійного догляду за сайтом: перевіряйте друковану версію знову, коли змінюється вміст або макет. Мета не в тому, щоб папір наслідував екран. Вона в тому, щоб та сама інформація залишалася корисною в інших умовах.