1. 1. Підключення стилів для друку
2. 2. Тестування
3. 3. Абсолютні одиниці вимірювання
4. 4. Специфічні правила для сторінок
5. 5. Управління розривами сторінок
6. Розрив сторінки перед елементом.
7. Розрив сторінки після елемента.
8. Розрив сторінки всередині елемента
9. Вдови і сироти (висячі рядки)
10. 6. Скидання стилів
11. 7. Видалення необов'язкового контенту
12. 8. Друк адрес посилань
13. 9. Друк розшифровок абревіатур
14. 10. Друк фону
15. 11. Медіазапроси
16. 12. Друк карт
17. 13. QR-коди
18. Доповнення: друк неоптимізованих сторінок
19. Додаток 2: Gutenberg
20. Додаток 3: Hartija

Аарон Густафсон недавно звернувся через твіттер до Indiegogo , В якому він вказав, що їх сторінки детального замовлення непридатні до використання в надрукованому вигляді.

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

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

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

Я закинув домашні принтери дуже давно, так як мені завжди здавалося, що вони ламаються після 10 хвилин роботи. Але не всі такі, як я. - Хейдон Пікерінг ( Inclusive Design Patterns )

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

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

Кращим способом підключення стилів для друку є оголошення директиви @media в вашому CSS.

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

Альтернативно ви можете підключити стилі в HTML, але це потребуватиме додаткового запиту HTTP.

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

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

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

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

Емуляція стилів для друку в Firefox

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

Емуляція стилів для друку в Chrome

3. Абсолютні одиниці вимірювання

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

section {margin-bottom: 2cm; }

4. Специфічні правила для сторінок

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

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

Директива @page це частина специфікації Paged Media Module , В якій є такі чудові речі, як можливість вибрати першу друковану сторінку або порожні сторінки, позиціонувати елементи в кутку сторінки і багато іншого . Це можна використовувати навіть для друку книг .

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

Так як друковані сторінки, на відміну від веб-сторінок, не є нескінченними, контент буде розбиватися між сторінками. У нас є 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; }

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

ось демо на Codepen з декількома прикладами ( отладочная версія для тестування ).

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

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. Друк адрес посилань

Роздруковані посилання марні, якщо ви не знаєте, куди вони ведуть.

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

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. Друк фону

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

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

11. Медіазапроси

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

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

Ви запитаєте, чому? Тому що правила CSS застосовуються тільки при виконанні обох умов: 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=400x300&maptype=roadmap&format=png&visual_refresh=true'); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

13. QR-коди

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

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

В ході мого дослідження, я знайшов відмінний інструмент, що допомагає при друку неоптимізованих сторінок. З Printliminator ви можете видалити непотрібні елементи, просто натиснувши на них.

ось демо на YouTube і сам проект на GitHub .

Додаток 2: Gutenberg

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

Додаток 3: Hartija

Це ще один фреймворк для створення стилів для друку від Володимира Каррера .