Я зовсім забув про стилі для друку

33

Від автора: невелика колекція корисних CSS технік і нагадування про те, що друковані стилі все ще потрібні. Нещодавно Аарон Густафсон послав твіт Indiegogo, в якому сказав, що їх сторінка з деталями про замовлення ламається при друку. Коли я побачив твіт, мене осінило. Я зрозумів, що вже дуже давно не оптимізував сторінки під друк, навіть не став перевіряти.

Я совсем забыл о стилях для печати

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

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

«Я відмовився від домашніх принтерів давним-давно. Адже вони завжди ламаються через 10 хвилин після використання. Але не все, як я…» — Хейден Пікерінг (Інклюзивні шаблони проектування)

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

1. Підключення друкованих стилів

Кращий спосіб підключити друковані стилі – задати правило @media в CSS.

body {
font-size: 18px;
}
@media print {
/* print styles go here */
body {
font-size: 28px;
}
}

Також друковані стилі можна вставити в HTML, але тоді буде потрібно додатковий запит.

2. Тестування

Необов’язково друкувати сторінку після дрібних змін. В залежності від браузера можна експортувати сторінку в PDF, подивитися превью друку або безпосередньо провести налагодження в браузері.

Для налагодження друкованих стилів в Firefox відкрийте панель розробника (Shift + F2 або інструменти > для розробника > панель розробника) і вбийте в поле media emulate print внизу і натисніть enter. Активна вкладка буде імітувати медіа тип print, поки ви не закриєте або оновіть сторінку.

Я совсем забыл о стилях для печати

У Chrome відкрийте панель розробника (CMD + Opt + I (macOS) або Ctrl + Shift + I (Windows) або вид > для розробників > інструменти розробника), зайдіть у вкладку консоль (Esc), відкрийте панель рендеринга, поставте галочку Emulate CSS Media і виберіть Print.

Я совсем забыл о стилях для печати

3. Абсолютні одиниці

Абсолютні одиниці позиціонування погано підходять для екранів, але в той же час відмінно працюють з печаткою. Використовувати абсолютні одиниці типу cm, mm, in, pt або pc в друкованих стилях повністю безпечно, і це вважається нормальним.

section {
margin-bottom: 2cm;
}

4. Правила під певні сторінки

Для певних сторінок можна задавати окремі властивості, такі як дозвіл, орієнтація і зовнішні відступи за допомогою правила @page. Дуже зручно, якщо всім сторінкам потрібно задати margin.

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

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

5. Управління розривами сторінок

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

Розриви перед елементом

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

section {
page-break-before: always;
}

page-break-before на MDN

Розриви після елемента

Властивість page-break-after дозволяє поставити або заборонити розрив сторінки після елемента.

h2 {
page-break-after: always;
}

page-break-after на MDN

Розриви всередині елемента

Властивість відмінно підходить, коли треба заборонити, щоб розрив розбивав один тег на дві сторінки.

ul {
page-break-inside: avoid;
}

page-break-inside на MDN

Висячі рядки

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

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

p {
widows: 4;
}

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

p {
orphans: 3;
}

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

На CodePen є пара прикладів. (Debug версія для простого тестування)

Не всі властивості і значення працюють в усіх браузерах, друковані стилі необхідно перевіряти в різних браузерах.

6. Скидання стилів

Добре б скинути деякі стилі для друку, наприклад, background-color box-shadow або color. Нижче наведено уривок з друкованих стилів HTML5 Boilerplate:

*,
*: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;
}

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

7. Видалення непотрібного контенту

Щоб зайвий раз не переводити чорнило, потрібно видалити нерелевантні контент: презентаційний контент, рекламу, меню і т. д. Зробити це можна за допомогою display: none.

Можливо, ви захочете показувати тільки головний контент, а все інше ховати.

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

8. Розкриття url’ов в посиланнях

Надруковані посилання повністю марні, якщо ви не знаєте, куди вони ведуть. Можна легко показувати URL поряд з текстовим посиланням.

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

Код вище покаже відносні й абсолютні посилання на ваш сайт, якоря і т. д. Код нижче буде працювати ще краще:

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

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

9. Розшифровка абревіатур

Абревіатури необхідно обернути в тег , а розшифровку додати атрибут title. Було б непогано показувати розшифровку абревіатури надрукованої сторінки.

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

10. Примусова друк фону

Браузери зазвичай не друкують фони і фонові зображення, якщо ви їм про це не скажете. Іноді необхідно примусово роздрукувати їх. Нестандартизоване властивість print-color-adjust дозволяє переписувати значення за умовчанням в деяких браузерах.

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

11. Медіа запити

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

@media screen and (min-width: 48em) {
/* screen only */
}

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

@media (min-width: 48em) {
/* all media types */
}

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=400×300&maptype=roadmap&format=png&visual_refresh=true’);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}

13. QR коди

У цій статті з сайту Smashing Magazine є пара хороших порад. Один з них – це роздруковувати QR коди, щоб користувачеві не довелося забивати вручну весь адресу, щоб зайти на живу версію.

Бонус: друк неоптимізованих сторінок

Під час своїх досліджень я знайшов чудовий інструмент, за допомогою якого можна друкувати неоптимізованих сторінок. З Printliminator можна видаляти елементи, просто клацаючи по ним.

Є демо на YouTube і проект на Github.

Бонус 2: Gutenberg

Якщо ви знаєте, що таке фреймворки, вам сподобається Gutenberg. З ним оптимізація під друк стає трохи легше.

Бонус 3: Hartija

Є ще один фреймворк для друкованих стилів від Володимира Каррера під назвою Hartija.

От і все! Якщо хочете подивитися все це у дії, можете оцінити моє демо на CodePen (тестова версія). Сподіваюся, вам сподобалася стаття.