Вы видели это раньше: вы разработали красивый макет, и кто-то входит в ваш офис с распечатанным шрифтом, и вы съеживаетесь от места вашей тяжелой работы, ужасно искаженной принтером.
Печатные версии веб-дизайна — это не то, что вы ожидаете. Они требуют дополнительной настройки и постановки. Но понимание того, как настроить вид печати так, чтобы контент получался ожидаемым, не так уж сложно, как только вы его освоите.
В этой статье я покажу вам, как настроить таблицу стилей только для печати вашего контента на веб-сайте. Я буду использовать сайт WordPress в качестве отправной точки, потому что это такой популярный фреймворк, но он будет работать для любого сайта, если вы применяете те же принципы.
Краткое примечание: нет простого способа сделать веб-печать идеальной. Вы должны прыгнуть туда и проработать каждый элемент, который вы хотите адаптировать. Я начинаю с перехода на страницу и распечатки, чтобы увидеть, с чего я начинаю. Затем я разбиваю каждый элемент или структурный раздел на то, что мне нужно и что нужно изменить. Это требует времени, но оно того стоит.
Вам нужна версия для печати?
Первое, что я спрашиваю себя перед созданием печатной версии сайта, это то, нужна ли она мне или нет. Дотошный дизайнер во мне склонен, и в большинстве случаев я склоняюсь к «да». Но часто просто нет необходимости печатать таблицу стилей, в зависимости от характера и цели вашего сайта.
Кроме того, когда люди печатают страницу с вашего сайта, какова их цель? Часто они просто хотят, чтобы ваш контент находился в руках, и это все — им не нужна вся графика, красивые макеты, заголовки, боковые панели и тому подобное. (И они могут не захотеть использовать свои дорогие чернила на несущественных элементах.) Итак, подумайте, что на самом деле нужно.
Соображения печати
Я всегда преобразую свой текст в черный, чтобы принтер понимал, что затенение не требуется (что сильно экономит чернила). Я также переключаюсь с размеров шрифта в пикселях на точки. Если вы пытаетесь подобрать размеры шрифта, это может быть сложной задачей, но вот небольшая диаграмма, которая поможет вам быстро конвертировать из px в pt, если у вас базовый размер шрифта 16px:
- Пиксели => Очки
- 6px => 5pt
- 7px => 5pt
- 8px => 6pt
- 9px => 7pt
- 10px => 8pt
- 11px => 8pt
- 12px => 9pt
- 13px => 10pt
- 14px => 11pt
- 15px => 11pt
- 16px => 12pt
- 17px => 13pt
- 18px => 14pt
- 19px => 14pt
- 20px => 15pt
- 21px => 16pt
- 22px => 17pt
- 23px => 17pt
- 24px => 18pt
Ориентация на ваш контент
WordPress обычно имеет встроенную структуру, которая выглядит следующим образом:
- заголовок
- содержание
- Комментарии
- боковая панель
- нижний колонтитул
Каждая страница имеет эти структурные элементы, которые вы можете легко настроить с помощью CSS. Даже если ваш сайт не имеет такой точной структуры, ключ заключается в том, чтобы просто настроить таблицу стилей печати для ваших целей.
Для каждой структуры в CSS используйте #header для этих разделов с идентификатором или .header, если это класс.
Наконец, и, возможно, самое главное, мы будем использовать CSS @media print, чтобы определить, правильно ли применяются определенные стили CSS.
Например, чтобы удалить весь контент из ваших стилей печати, вы должны сделать что-то такое же простое в вашем style.css:
[sourcecode language = ”css”]
@media print {
#header {display: none;}
#content {display: none;}
#comments {display: none;}
#sidebar {display: none;}
#footer {display: none;}
.site-description {display: none;}
.site-title {display: none;}
}
[/исходный код]
Это сработало для темы Twenty Twelve для WordPress и дает мне хороший, чистый чистый лист для начала.
Если вы пытаетесь удалить элемент зацепки, проще всего сделать это, щелкнув правой кнопкой мыши элемент в браузере и найти его в исходном документе. В Chrome есть функция «Проверка элемента», которая переходит прямо к коду для этого элемента, что позволяет очень легко найти нарушающий элемент. Найдите идентификатор или определение класса, а затем нацеливайте его соответствующим образом.
В этом примере у нас, возможно, был этот отставший в наших печатных изданиях. Здесь вы можете увидеть идентификатор:
Теперь мы можем нацелить этот элемент с помощью следующего CSS:
[sourcecode language = ”css”]
# contact-popup {display: none;}
[/исходный код]
Разрывы страниц
Принтеры разбивают ваш контент на страницы, если у вас есть более одной страницы для печати. Вы можете указать браузеру избегать разрывов страниц в определенные моменты. Вы можете прочитать все о разрывах страниц в CSS на странице W3.org . Короче говоря, ваши варианты следующие:
- разрыв страницы до: всегда | избегать — всегда / избегать разрывов страниц перед элементом
- разрыв страницы после: всегда | избегать — всегда / избегать разрывов страниц после элемента
- разрыв страницы: всегда | избегать — всегда / избегать разрывов страниц в середине элемента
Помните, что разрывы страниц применяются только к содержимому блока. Типичным примером является список — вы можете создать блоки списков, а затем предотвратить разрывы страниц в середине списка. Исключением является текст, который можно определить как блок, а затем использовать разрывы страниц, чтобы изменить способ его печати, но обычно текст должен отображаться, и вы можете позволить браузеру выяснить, где его разместить.
Пример дела
Теперь, когда у нас есть чистый лист, давайте начнем добавлять структурные элементы, которые мы хотим отображать при печати. Раздел содержимого является очевидным кандидатом, поэтому давайте добавим его обратно и преобразуем размер шрифта абзаца в точки:
[sourcecode language = ”css”]
@media print {
#content p {
размер шрифта: 11pt;
черный цвет;
}
#content img {
отображения: блок;
разрыв страницы: избегать;
разрыв страницы: избегать;
}
#content ul, li {
отображения: блок;
страниц обкатки внутри: избегать;
}
#header {display: none;}
#comments {display: none;}
#sidebar {display: none;}
#footer {display: none;}
.site-description {display: none;}
.site-title {display: none;}
}
[/исходный код]
Я снял дисплей: нет; Контент CSS и преобразовал наш текст абзаца с 14px до 11pt. Вы можете просмотреть каждый элемент своей страницы и настроить каждый из них только для печати с помощью этой методологии.
Заворачивать
Переход от Интернета к печати может быть неприятным, но запрос печатного издания @media позволяет нам очень точно ориентироваться в том, какие элементы печатаются и как они печатаются.
Там нет реального ярлыка. Если вам нужно, чтобы ваш сайт хорошо выглядел в печати, вам, вероятно, придется создать отдельное определение CSS на уровне элементов, пока оно не станет идеальным.
Являются ли таблицы стилей печати частью вашего стандартного процесса проектирования, или вы считаете их дополнительным приятным дополнением к тщательно разработанному веб-сайту?