В данной заметке показаны полезные приемы на CSS для подготовки страницы к печати.

Задаем цвет фона, выставляем отступы

Убираем отступы, задаем для страницы белый цвет фона и черный шрифт (для контрастности), выставляем поля в 0,5 дюйма. Также убираем свойство float у плавающих элементов, чтобы при печати web-страницы блоки не съезжали.

body{margin:0.5in;font-family:times} 
*{background:#fff !important;color:#000 !important;float:none !important;width:auto !important;height:auto !important;}

Убираем лишние стили

При печати многие элементы сайта являются лишними: навигация, реклама и пр. Убираем их при помощи display:none.

#menu, #topmenu, #thedrot, .meta, #comments, #commentform, #postcomment, #resplink, #footer{display:none}

Работа с ссылками

Убираем подчеркивание у ссылок, на печати они нам не понадобятся. Выводим URL (в скобках рядом с текстом ссылки).

a{border:0;text-decoration:none;}
a img{border:0}
a:after{content:" (" attr(href) ") ";font-size: 90%;}
a[href^="/"]:after {content: " (http://www.mydomain.com" attr(href) ") ";}

Постраничная разбивка

Свойство page-break-before позволяет устанавливать место разрыва страницы при печати:

@media all
{
.nextpage { display:none; }
}

@media print
{
.nextpage { display:block; page-break-before:always; }
}

Получаем класс, который будет не виден на странице, но будет выполнять свое предназначение при печати.

CSS-свойства: widows, orphans

Свойство widows задает минимальное число строк текста, которое располагается на следующей странице при печати документа.

Другое css-свойство — orphans — задаёт минимальное количество строк, которые могут оставаться в нижней части страницы без разрыва страницы.
Если значение widows конфликтует со значением orphans, тогда widows будет иметь приоритет.
Пример использования:

@media print {{widows: 3;orphans: 3;}
}

Итого у нас получиться:

@media print {
 body{margin:0.5in;font-family:times} 
 *{background:#fff !important;color:#000 !important;float:none !important;width:auto !important;height:auto !important;}
 #context{margin:0 !important;padding:0}
 #menu, #topmenu, #thedrot, .meta, #comments, #commentform, #postcomment, #resplink, #footer{display:none}
 #zag h1 span{font-size:small;display:block}
 a{border:0;text-decoration:none;}
 a img{border:0}
 a:after{content:" (" attr(href) ") ";font-size: 90%;}
 a[href^="/"]:after {content: " (http://www.aimweb.name" attr(href) ") ";}
}

Эта таблица стилей достаточна проста, но результат на печати весьма ощутим по сравнению с обычной таблицей стилей.

На деле ваш CSS-файл может довольно сильно отличаться, но общие принципы, указанные в статье, применимы к практически любому проекту.

Попробуйте вывести на печать данную страницу и вы увидите работу описанного выше механизма.

@media print { body{margin:0.5in;font-family:times}  *{background:#fff !important;color:#000 !important;float:none !important;width:100% !important;height:auto !important;} #context{margin:0 !important;padding:0} #menu, #topmenu, #thedrot, .meta, #comments, #commentform, #postcomment, #resplink, #footer, .elementor-43, .elementor-element-ce4facd, .elementor-element-ce80e32,.elementor-location-footer,.elementor-location-header {display:none} #zag h1 span{font-size:small;display:block} a{border:0;text-decoration:none;} a img{border:0} a:after{content:" (" attr(href) ") ";font-size: 90%;} a[href^="/"]:after {content: " (http://www.aimweb.name" attr(href) ") ";}.elementor-section.elementor-section-boxed>.elementor-container { max-width: none; width: 100%; } }

Поделиться:

Поделиться в vk
Поделиться в odnoklassniki
Поделиться в facebook
Поделиться в google
Поделиться в twitter
Поделиться в whatsapp
Поделиться в telegram
Поделиться в email
Поделиться в print

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *