Версия для печати
Наша система управления сайтами предполагает создание версии для печати посредством возможностей CSS. Для этого в системе заданы специальные классы, отвечающие за вывод и скрытие информации в зависимости от способа вывода её на экран или на печать:-
ruen_noprint– класс для пометки элементов, которые отображаются при обычном просмотре страницы, но должны скрываться при печати страницы, -
ruen_print– класс для элементов, которые должны быть видны только при печати страницы (обычно служит для задания колонтитулов).
Пример адаптации кода для версии для печати:
<div class="ruen_noprint">Содержимое элемента, который будет скрыт при печати</div>
В случае, если элемент уже имеет какой-то класс, то класс добавляется через пробел, при этом порядок классов не важен. Пример:
<div class="drugoi-klass ruen_noprint">Содержимое элемента, который будет скрыт при печати</div>
Есть два способа создания версий для печати – через манипуляции с вёрсткой (с CSS-файлами оформления) и через доработку программного кода системы управления. Версия для печати, создаваемая посредством PHP, требовала бы слишком больших затрат со стороны нашей компании и могла бы вызывать проблемы при неаккуратной настройке сайта – попадание у поисковых систем страниц для печати в приоритет, что означало бы показ ссылок именно на такие страницы в результатах поиска. Также такой вариант усложнил бы разработку модулей сторонними компаниями. И при всём при этом версия для печати посредством CSS легче и быстрее реализуется, при этом полностью контролируется в любой момент и может выполняться с привлечением менее дорогостоящих сотрудников, так как не требует особой квалификации.
Рекомендации по адаптации кода для печати
- При скрытии нескольких соседних элементов по возможности следует скрывать родительский элемент, чтобы не перегружать код.
- При табличной вёрстке можно скрывать отдельные ячейки таблицы, только следует следить, чтобы в оставшейся части таблицы не было нарушений в количестве ячеек (столбцов) в строках или оставшиеся ячейки не были ограничены по ширине.
- В некоторых случаях стоит сделать и оформить колонтитул, чтобы на распечатанных листах было название компании, адрес сайта и контактная информация.
По-умолчанию система управления прячет от печати все панели управления, системную панель с системным меню, дополнительную навигацию по страницам (хлебные крошки).
Рекомендации по адаптации стилей для печати
В стили темы сайта можно добавить специальную секцию, которая будет отвечать за оформление сайта при печати. Пример:@media print {
BODY {
background: #fff;
color: #000;
}
}
- При печати дизайн должен быть становиться «резиновым», в противном случае часть страницы может обрезаться, либо браузер автоматически смасштабирует страницу для её соответствия печатному формату.
- При печати лучше всего выглядит чёрный текст на белом фоне. Если на вашем сайте фон отличается от белого, то для печати лучше это отличие устранить. При желании можно на фон установить водяные знаки (изображение с блеклым текстом или предупреждением).
- При печати изображения шириной более 600 точек могут не уместиться на странице, поэтому лучше делать их тянущимися.
- При печати таблиц некоторые не особо важные столбцы можно скрывать.
- Ссылки при печати бесполезны, поэтому их лучше сделать одинакового цвета с текстом и убрать подчёркивание. Некоторые верстальщики делают вывод адреса ссылки после её текста (
A[href]::after { content: " " attr(href) ")"; }), но по факту мало кто сможет правильно набрать адрес ссылки и поэтому вряд ли будет стараться, а страница при этом загромождается. - Формы при печати также бесполезны в абсолютном большинстве случаев, поэтому их также можно скрывать.
- Контролируйте размер шрифта и содержимого, особенно касаемо таблиц с данными.
Как сделать колонтитул
Под колонтитулом понимается верхняя и/или нижняя часть страницы, содержащая название компании или сайта, адрес сайта и другую контактную информацию, которая не видна при просмотре страницы, но при печати автоматически печатается вместе со всей страницей. Чтобы сделать колонтитул, достаточно в самом верху вёрстки добавить блок с контактной и иной информацией и указать этому блоку классruen_print. Колонтитулы поддаются обычному оформлению через CSS, поэтому их можно отформатировать по своему усмотрению.