CSS-стилі для друку, про які я забув

image


Аарон Густафсон нещодавно відправив твит Indiegogo, в якому було сказано, що при роздрукуванні їх сторінок з інформацією про замовлення виходить щось зовсім непристойне. І понеслооось.

Dear @Indiegogo, please take a look at how your Order Details pages print. It really sucks right now. pic.twitter.com/48BA485sjb  Aaron Gustafson (@AaronGustafson) October 17, 2016

Мене цей твіт зачепив. Я раптом зрозумів, що вже й не згадаю, коли оптимізував веб-сторінки для друку або хоча б перевіряв те, як вони виводяться на принтер.

Основна увага в ході веб-розробки прикута до електронних версій сайтів. Сторінки доводиться перевіряти у безлічі браузерів, відчувати на різних розмірах вікон… До принтерів тут. А може, я забув про стилі для друку бо сам рідко роблю паперові копії сторінок. Як би там не було, я відчув, що ситуацію треба терміново виправляти.

Друкований варіант веб-сторінки має таке ж право на існування, як і електронний. І, якщо ми прагнемо до того, щоб зробити наші матеріали як можна доступніше, не варто нехтувати паперовими носіями інформації. Крім того, не слід робити припущень про користувачів та про їх поведінку. Люди все ще роздруковують веб-сторінки на принтерах. Просто уявіть собі статті, або пости в блогах, сторінки з рецептами, контактними відомостями, схемами проїзду або зі списками оголошень. Рано чи пізно хто-небудь неодмінно спробує роздрукувати щось з того, що ви розмістили в інтернеті.

Ось що каже з цього приводу Хейдон Пікерінг, автор книги «Inclusive Design Patterns»: «Я вже давно не користуюся домашніми принтерами. Справа тут в тому, що у мене виникає відчуття, ніби вони ламаються хвилин через десять після того, як запустиш друк. Але я – не все».

Якщо зараз ви зрозуміли, що, як і я, не приділяли належної уваги стилів для друку, сподіваюся, моя розповідь послужить вам добру службу і допоможе швидко освіжити пам'ять. А якщо ви взагалі ніколи не оптимізували веб-сторінки для принтерів, моя невеличка колекція корисних CSS-прийомів дозволить вам до такої оптимізації приступити.

1. Використання CSS-стилів для друку
Кращий спосіб підключити до сторінки стилі для друку – це оголосити правило
@media
у вашому основному CSS-файлі.

body {
font-size: 18px;
}
@media print {
/* тут будуть стилі для друку */
body {
font-size: 28px;
}
}

Як варіант, можна винести стилі для друку в самостійний файл і підключити його в HTML, але при такому підході знадобиться додатковий запит при завантаженні сторінки.

<media link="print" href="print.css" />

2. Тестування
Як оцінити зовнішній вигляд веб-сторінки, підготовленої для друку? Кожному ясно, що виводити її на папір після кожної зміни стилю – не найкраще рішення. На щастя, можливостей браузерів цілком достатньо для «безпаперовій» перевірки друкованих варіантів сторінок.

В залежності від браузера, можна експортувати сторінку в PDF, скористатися функцією попереднього перегляду або навіть налагоджувати сторінку прямо у веб-браузері.

Для налагодження стилів друку 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
.

section {
margin-bottom: 2cm;
}

4. Властивості сторінок
Для керування властивостями сторінок, начебто їх розмірів, орієнтації і полів, можна використовувати правило
@page
. Це виявляється дуже до речі, скажімо, коли треба, щоб у всіх друкованих сторінок були однакові поля.

@media print {
@page {
margin: 1cm;
}
}

Правило
@page
– це частина стандарту Paged Media Module, який пропонує безліч чудових речей, на зразок вибору першої сторінки для друку, налаштування порожніх сторінок, позиціонування елементів в кутах сторінки далі. Його можна використовувати навіть для того, щоб готувати до друку книги.

5. Управління розривами сторінок
Так як друковані аркуші, на відміну від веб-сторінок, не нескінченні, вміст веб-сторінок рано чи пізно обривається на одному аркуші паперу і продовжується на наступному. Для управління розривами сторінок є п'ять властивостей.

▍Розрив сторінки перед елементом
Якщо потрібно, щоб якийсь елемент завжди знаходився на початку сторінки, можна поставити перед ним примусовий розрив сторінки за допомогою властивості
<a href="https://developer.mozilla.org/en/docs/Web/CSS/page-break-before">page-break-before</a>
.

section {
page-break-before: always;
}

▍Розрив сторінки після елемента
Властивість
<a href="https://developer.mozilla.org/en/docs/Web/CSS/page-break-after">page-break-after</a>
дозволяє задати примусовий розрив сторінки після елемента. З допомогою цієї властивості можна і заборонити розрив.

h2 {
page-break-after: always;
}

▍Розрив сторінки всередині елемента
Властивість
<a href="https://developer.mozilla.org/en/docs/Web/CSS/page-break-inside">page-break-inside</a>
виявиться дуже до речі, якщо потрібно уникнути поділу якогось елемента між двома сторінками.

ul {
page-break-inside: avoid;
}

▍Верхні і нижні висячі рядки
Іноді в примусовому розриві сторінок немає потреби, але потрібно керувати виведенням абзаців на кордонах сторінок.

Наприклад, якщо останній рядок абзацу на сторінці, не поміщається, на наступній сторінці будуть надруковані останні два рядки цього абзацу. Це відбувається з-за того, що властивість, яке це контролює (
widows
, тобто – «верхні висячі рядки» за умовчанням встановлено значення 2. Це можна змінити.

p {
widows: 4;
}

Якщо виникла інша ситуація і лише один рядок абзацу поміщається на поточній сторінці, весь абзац буде надрукований на наступній сторінці. Властивість, відповідальна за нижні висячі рядки (
orphans
), за замовчуванням так само встановлено в 2.

p {
orphans: 3;
}

Зміст вищенаведеного коду полягає в тому, що для того, щоб абзац не переносився на наступну сторінку, як мінімум три рядки повинні поміститися на поточній сторінці.

Для того, щоб краще в цьому розібратися, погляньте на приклад, підготовлений з допомогою CodePen. А ось – тестова версія того ж прикладу, її зручніше тестувати.

Треба зазначити, що не всі властивості та їх значення універсальні, тому CSS-стилі для друку варто перевіряти в різних браузерах.

6. Скидання стилів
Готуючи веб-сторінку до друку, має сенс скинути деякі стилі, наприклад
background-color
,
box-shadow
,
color
.

Ось фрагмент з HTML5 Boilerplate print style sheet:

*,
*:before,
*:after,
*:first-letter,
p:first-line,
div:first-line,
blockquote:first-line,
li:first-line {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}

До речі, CSS-стилі для друку – одне з небагатьох виключень, де директива
!important
– це абсолютно нормально ;)

7. Видалення непотрібного контенту
Для того, щоб даремно не витрачати чорнило, слід прибирати з друкованого варіанту сторінки все непотрібне, на зразок величезних красивих слайдів, реклами, засобів навігації по сайту та іншого подібного. Зробити це можна за допомогою установки властивості
display
значення
none
у непотрібних елементів. Цілком можливо, що ви вважаєте правильним показати лише основний вміст сторінки, а все інше – приховати:

body > *:not(main) {
display: none;
}

8. Висновок адрес посилань
Посилання, в тому вигляді, в якому вони зазвичай присутні на веб-сторінках, при друку абсолютно даремні, якщо тільки читачеві паперової версії документа не відомо, куди вони ведуть.

Для того, щоб вивести адреси посилань після їх текстових уявлень, досить скористатися такими стилем:

a[href]:after {
content: " (" attr(href) ")";
}

Звичайно, при такому підході «розшифровано» буде багато зайвого. Наприклад, відносні посилання, абсолютні посилання на тому ж сайті, де розміщена друкується сторінка, посилання з якорями і так далі. Для того, щоб не засмічувати друковану сторінку, краще буде використовувати приблизно таку конструкцію:

a[href^="http"]:not([href*="mywebsite.com"]):after {
content: " (" attr(href) ")";
}

Виглядає це, звичайно, шалено. Тому поясню сенс даного правила звичайною мовою: «Відобразити значення атрибута
href
біля кожного посилання, у якої є такий атрибут, який починається з
http
, але не містить
mywebsite.com
».

9. Розшифровка скорочень
Скорочення в тексті повинні розміщуватися в теге
<abbr>
, а їх розшифрування потрібно включати атрибут
title
. Якщо оформляти скорочення саме так, їх значення дуже просто показати на друкованій сторінці:

abbr[title]:after {
content: " (" attr(title) ")";
}

10. Примусова друк фону
Браузери зазвичай, формуючи сторінку для друку, не виводять фоновий колір і фонові зображення, якщо їм це явно не вказати. Однак, іноді все це треба друкувати. Тут нам допоможе нестандартизоване властивість
<a href="https://developer.mozilla.org/de/docs/Web/CSS/-webkit-print-color-adjust"> print-color-adjust</a>
, що дозволяє перевизначити, для деяких браузерів, налаштування за замовчуванням.

header {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}

11. Медіа-запити
Якщо ви пишете медіа-запити приблизно так, як показано нижче, враховуйте, що CSS-правила в таких запитах не вплинуть на друковану версію сторінки.

@media screen and (min-width: 48em) {
/* тільки для екрану */ 
}

Чому це так? Вся справа в тому, що CSS-правила застосовуються тільки в тому випадку, якщо значення
min-width
дорівнює
48em
, і якщо
media-type
– це
screen
. Якщо позбутися в цьому медіа-запиті від ключового слова
screen
, то він виявиться обмеженим лише значенням
min-width
.

@media (min-width: 48em) {
/* всі типи засобів відображення інформації */ 
}

12. Роздрук карт
Поточні версії Firefox і Chrome вміють виводити на друк карти, але, наприклад, Safari цього не може. Як же бути при друку карт? Один з універсальних варіантів – використовувати, замість динамічних, статичні карти.

.map {
width: 400px;
height: 300px;
background-image: url('http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true');
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}

13. QR-коди
Висновок на друк QR-кодів, що містять важливі посилання, може значно підвищити зручність роботи з паперовими версіями веб-сторінок. Ось материал The Smashing Magazine, де можна знайти корисні поради на цю тему. Один з них полягає в тому, щоб включати в друковані сторінки їх адреси у вигляді QR-кодів. У результаті користувачу, для того щоб відкрити в браузері сторінку, з якої була зроблена роздрук, не доведеться набирати на клавіатурі її повна адреса.

14. Про печатки неоптимізованих сторінок
Займаючись темою друку веб-сторінок, я виявив відмінний інструмент, який дозволяє зручно готувати до висновку на принтер неоптимізованих сторінок. За допомогою Printliminator можна прибрати зі сторінки непотрібні елементи, просто клацаючи по ним. Ось демонстрація роботи з цим інструментом на YouTube, а ось – сторінка проекту на Github.

15. Gutenberg
Якщо вам подобаються фреймворки, вам може сподобатися Gutenberg, який трохи спрощує підготовку веб-сторінок до друку.

16. Hartija
А ось ще один CSS-фреймворк для друку. Називається він Hartija, створив його Vladimir Carrer.

Підсумки
Якщо ви хочете побачити в ділі дещо з того, про що ми говорили, ось посилання на проект CodePen з прикладами (а ось – його тестова версія).

Оптимізувати веб-сторінки для друку не так вже й складно. Мабуть, найголовніше – не забувати про це. Сподіваюся, тепер сайтів, які дружать з принтерами, стане трохи більше.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.