CSS-стилі для друку, про які я забув
Аарон Густафсон нещодавно відправив твіт Indiegogo, в якому було сказано, що при роздруківці їхніх сторінок з інформацією про замовлення виходить щось непристойне. І понеслооось.
Dear @Indiegogo, please таке, щоб побачити, як наші деталі сторінок print. It really sucks right now. pic.twitter.com/48BA485sjb
Мене цей твіт зачепив. Я раптом зрозумів, що вже й не згадаю, коли оптимізував веб-сторінки для друку або хоча б перевіряв, як вони виводяться на принтер.
Основна увага під час веб-розробки прикута до електронних версій сайтів. Сторінки доводиться перевіряти в багатьох браузерах, випробовувати на різних розмірах вікон ... Чи до принтерів тут. А може, я забув про стилі для друку, бо сам рідко роблю паперові копії сторінок. Хоч би як там було, я відчув, що ситуацію треба терміново виправляти.
Якщо зараз ви зрозуміли, що, як і я, не приділяли належної уваги стилям для друку, сподіваюся, моя розповідь послужить вам гарною службою і допоможе швидко освіжити пам'ять. А якщо ви взагалі ніколи не оптимізували веб-сторінки для принтерів, моя невелика колекція корисних CSS-прийомів дозволить вам таку оптимізацію розпочати.
1. Використання CSS-стилів для друку
Найкращий спосіб підключити до сторінки стилі для друку – це оголосити правило @media у вашому основному CSS-файлі.
Як варіант, можна винести стилі для друку до самостійного файлу і підключити його в HTML, але при такому підході знадобиться додатковий запит при завантаженні сторінки.
2. Тестування
Як оцінити вигляд веб-сторінки, підготовленої для друку? Будь-якому ясно, що виводити її на папір після кожної зміни стилю – не найкраще рішення. На щастя, можливостей браузерів цілком достатньодля "безпаперової" перевірки друкованих варіантів сторінок.
Для налагодження стилів друку у Firefox, відкрийтеПанель розробника, скориставшись комбінацією клавішShift + F2або виконавши команду менюРозробка → Панель розробки. Введіть у командному рядку, розташованому в нижній частині вікна, таке: media emulate print , завершивши введення натисканнямEnter. Активна вкладка буде діяти так, якби для неїmedia typeбуло бprint, доки ви не закриєте або не оновите сторінку.
Емуляція друку у Firefox
У Chrome також є така можливість. ВідкрийтеІнструменти розробника, для чого, у MacOS, можна скористатися комбінацією клавішCMD + Opt + I, уWindows – Ctrl + Shift + I, або виконайте команду менюДодаткові інструменти → Інструменти розробника. Після цього відкрийте панель рендерингу. Один із способів зробити це полягає в тому, щоб, натиснувши клавішуEsc, вивести панельConsole, а потім, через меню, відкрити панельRendering. У панелі візуалізації встановіть прапорецьEmulate CSS Mediaта виберітьPrint.
Емуляція друку в Chrome
Ще про тестування друкованих версій веб-сторінок можна прочитати на StackOverflow.
3. Абсолютні одиниці виміру
Абсолютні одиниці виміру не дуже підходять для екранних варіантів сторінок, але для друку вони – це те, що потрібно. У стилях друку абсолютно безпечно, більше того – рекомендовано використовувати абсолютні одиниці вимірювання, на зразок cm , mm , in , pt , або pc .
4. Властивості сторінок
Для управління властивостями сторінок, на зразок їх розмірів, орієнтації та полів, можна використовувати правило @page. Цевиявляється дуже доречним, скажімо, коли треба, щоб у всіх друкованих сторінок були однакові поля.
Правило @page – це частина стандарту Paged Media Module, який пропонує безліч чудових речей, на кшталт вибору першої сторінки для друку, налаштування порожніх сторінок, позиціонування елементів у кутах сторінки тощо. Його можна використовувати навіть для того, щоб готувати до друку книги.
5. Управління розривами сторінок
Так як друковані аркуші, на відміну від веб-сторінок, не нескінченні, вміст веб-сторінок рано чи пізно обривається на одному аркуші паперу і продовжується на наступному. Для керування розривами сторінок є п'ять властивостей.
▍Розрив сторінки перед елементом
Якщо потрібно, щоб елемент завжди знаходився на початку сторінки, можна поставити перед ним примусовий розрив сторінки за допомогою властивості page-break-before .
▍Розрив сторінки після елемента
Властивість page-break-after дозволяє встановити примусовий розрив сторінки після елемента. За допомогою цієї властивості можна заборонити розрив.
▍Розрив сторінки всередині елемента
Властивість page-break-inside виявиться дуже доречною, якщо потрібно уникнути поділу якогось елемента між двома сторінками.
▍ Верхні та нижні висячі рядки
Іноді примусовий розрив сторінок не потребує, але потрібно керувати висновком абзаців на кордонах сторінок.
Наприклад, якщо останній рядок абзацу на поточній сторінці не міститься, на наступній сторінці буде надруковано останні два рядки цього абзацу. Це відбувається через те, що властивість, яку це контролює ( widows , тобто - «верхні висячі рядки») за замовчуванням встановлено в значення 2. Це можна змінити.
Якщо виникла інша ситуація і лише однарядок абзацу міститься на поточній сторінці, весь абзац буде надруковано на наступній сторінці. Властивість, відповідальна за нижні висячі рядки ( orphans ), за умовчанням так само встановлено 2.
Зміст вищенаведеного коду полягає в тому, щоб абзац не переносився повністю на наступну сторінку, як мінімум три рядки повинні поміститися на поточній сторінці.
Для того, щоб краще розібратися в цьому, погляньте на приклад, підготовлений за допомогою CodePen. А ось – налагоджувальна версія того ж прикладу, її зручніше тестувати.
Треба відзначити, що не всі властивості та їх значення є універсальними, тому CSS-стилі для друку варто перевіряти в різних браузерах.
6. Скидання стилів
Готуючи веб-сторінку до друку, є сенс скинути деякі стилі, наприклад – background-color, box-shadow, color.
До речі, CSS-стилі для друку - один з небагатьох винятків, де директива !important - це абсолютно нормально ;)
7. Видалення непотрібного контенту
Посилання, у тому вигляді, в якому вони зазвичай присутні на веб-сторінках, під час друку абсолютно марні, якщо читачеві паперової версії документа не відомо, куди вони ведуть.
Звичайно, за такого підходу «розшифровано» буде багато зайвого. Наприклад, відносні посилання, абсолютні посилання на тому ж сайті, де розміщена сторінка, посилання з якорями і так далі. Для того, щоб не засмічувати друковану сторінку, краще використовувати приблизно таку конструкцію:
Виглядає це, звичайно, шалено. Тому поясню зміст цього правила звичайною мовою: «Відобразити значення атрибуту href біля кожного посилання, яке має такий атрибут, який починається з http, але не містить mywebsite.com».
9. Розшифрування скорочень
10.Примусовий друк фону
Зазвичай браузери, формуючи сторінку для друку, не виводять фонового кольору та фонових зображень, якщо їм це явно не вказати. Однак іноді все це друкувати треба. Тут нам допоможе нестандартизована властивість print-color-adjust, яка дозволяє перевизначити для деяких браузерів налаштування за замовчуванням.
11. Медіа-запити
Якщо ви пишете медіа-запити приблизно так, як показано нижче, враховуйте, що CSS-правила у подібних запитах не вплинуть на друковану версію сторінки.
Чому це так? Вся справа в тому, що CSS-правила застосовуються тільки в тому випадку, якщо значення min-width дорівнює 48em і якщо media-type - це screen. Якщо позбутися цього медіа-запиту від ключового слова screen , він виявиться обмеженим лише значенням min-width .
12. Роздрук карток
Поточні версії Firefox і Chrome можуть виводити на друк карти, але, наприклад, Safari цього не може. Як же бути під час друку карт? Один із універсальних варіантів – використовувати, замість динамічних, статичні карти.
14. Про друк неоптимізованих сторінок
Займаючись темою друку веб-сторінок, я виявив чудовий інструмент, який дозволяє зручно готувати до принтера неоптимізовані сторінки. За допомогою Printliminator можна вилучити зі сторінки непотрібні елементи, просто клацаючи по них. Ось демонстрація роботи з цим інструментом на YouTube, а ось сторінка проекту на Github.
15. Gutenberg
Якщо вам подобаються фреймворки, вам може сподобатися Gutenberg, який трохи спрощує підготовку веб-сторінок до друку.
16. Hartija
А ось ще один CSS-фреймворк для друку. Називається він Hartija, створив його Vladimir Carrer.
Оптимізувати веб-сторінки для друку не так вже й складно.Мабуть, найголовніше – не забувати про це. Сподіваюся, тепер сайтів, які дружать із принтерами, стане трохи більше.