Статьи

Создайте индивидуальную таблицу стилей печати за несколько минут

Вы видели это раньше: вы разработали красивый макет, и кто-то входит в ваш офис с распечатанным шрифтом, и вы съеживаетесь от места вашей тяжелой работы, ужасно искаженной принтером.

Печатные версии веб-дизайна – это не то, что вы ожидаете. Они требуют дополнительной настройки и постановки. Но понимание того, как настроить вид печати так, чтобы контент получался ожидаемым, не так уж сложно, как только вы его освоите.

В этой статье я покажу вам, как настроить таблицу стилей только для печати вашего контента на веб-сайте. Я буду использовать сайт 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 обычно имеет встроенную структуру, которая выглядит следующим образом:

  1. заголовок
  2. содержание
  3. Комментарии
  4. боковая панель
  5. нижний колонтитул

Каждая страница имеет эти структурные элементы, которые вы можете легко настроить с помощью 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 есть функция «Проверка элемента», которая переходит прямо к коду для этого элемента, что позволяет очень легко найти нарушающий элемент. Найдите идентификатор или определение класса, а затем нацеливайте его соответствующим образом.

В этом примере у нас, возможно, был этот отставший в наших печатных изданиях. Здесь вы можете увидеть идентификатор:

01-печать таблицы стилей

Теперь мы можем нацелить этот элемент с помощью следующего 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 на уровне элементов, пока оно не станет идеальным.

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