CSS-оптимизация веб-страницы для печати — Офтоп на vc.ru

Подборка полезных CSS-техник от фронтенд-разработчика Мануэля Матузовича.

Мануэль Матузович

Бывший менеджер Microsoft Аарон Густафсон в октябре 2016 года написал в Twitter обращение к Indiegogo, где обратил внимание компании на то, что страницы с деталями заказа невозможно распечатать.

Когда я увидел этот твит, меня словно током прошибло, потому что я уже очень давно не только не оптимизировал страницу для печати, я даже ни секунды не думал об этом. Может быть дело в том, что я постоянно решаю вопросы, связанные с изменением размеров браузеров, и проверяю, чтобы страницы наших сайтов идеально работали в любом размере и любой форме, а может быть потому, что сам почти никогда не печатаю страницы. Как бы то ни было, я совсем забыл о стилях для печати, и это плохо.

Оптимизация интернет-страниц для печати очень важна, потому что в наших же интересах, чтобы сайты были максимально доступны пользователям, вне зависимости от того, в каком виде. Не нужно предполагать, какими являются пользователи и каким будет их поведение: люди все еще печатают страницы сайтов. Только подумайте о всех этих статьях или блогах, рецептах, контактной информации, страницах «как добраться» или сайтах с недвижимостью. Однажды кто-то где-то обязательно попробует распечатать одну из созданных вами страниц.

Я давно перестал пользоваться принтером дома, потому что он ломался каждые 10 минут. Но не все такие как я.

— Гейдон Пикеринг

Inclusive Design Patterns

Если вы обнаружите ту же самую проблему, что и у меня, то надеюсь, что эта статья быстро освежит ваши знания. Если вы еще не оптимизировали свои страницы с помощью CSS, следующие советы помогут вам начать это делать.

1. Встраиваем стили для печати

Лучший способ встроить стили для печати — описать директиву @media в своем CSS.

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

Также вы можете встроить стили для печати в HTML, но для этого потребуется дополнительный запрос.

Как сделать версию для печати

Часто на сайтах можно встретить версию для печати той или иной страницы. Многие думают, что это что-то встроенное в сам браузер или что это делается очень просто. На самом деле, это совсем не так. Версия для печати — это обычная страница, которую Вам нужно самостоятельно сделать.

Вы можете посмотреть на версию для печати у этой статьи. Фактически, что нужно отображать там? Название статьи, раздел, категория, автор, сам текст и дата. Всё это и выведено на эту страницу. Нужны ли меню, форма поиска, различные блоки? Не думаю, поэтому их и нет.

Так же убедитесь, что ширина версии для печати не превосходит 650px, иначе браузер может порезать края.

Итак, Вы уже поняли, что версию для печати Вам надо создавать самостоятельно, выводя ровно то, что нужно пользователю. Теперь о том, как это сделать.

Есть 2 варианта: создать отдельную страницу и создать отдельный файл стилей. Первый вариант, думаю, понятен. Создаёте ещё одну страницу с версией для печати и на основной странице даёте ссылку на эту печатную версию. Пользователь по ней переходит и через «Файл»->»Печать» он её распечатает.

Второй вариант подразумевает создание отдельной таблицы стилей, где Вы скроете все лишние блоки (через

Теперь если пользователь захочет распечатать эту страницу, то распечатается не то, что он видит, а то, что прописано в print.css. Фактически, пользователь видит страницу в одном виде, а принтер в совсем другом.

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

• Создано 25.12.2013 08:52:27
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Как сделать версию страницы для печати

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

Конечно, самый простой способ решения данной проблемы — отдельная версия для печати для сайта. В таком случае создается новая страница, с которой удаляются все ненужные для печати элементы и страница подгоняется под формат A4 (или несколько листов A4).

Другой способ — создание стилей сайта для печати. Для этого создается отдельный файл CSS версии для печати. Подключается он между тегами <head></head> следующей строкой:

<link rel="stylesheet" type="text/css" media="print" href="nubexPrint.css">

Этот вариант позволяет избежать дублей страниц на сайте. Здесь пользователю для отображения страницы в браузере отдается один CSS-файл, а на печать посылается другой. Причем этот файл со стилями страницы для печати должен быть убирать лишние элементы и делать страницу одинаковой для отображения во всех браузерах и при разных разрешениях (чтобы вид напечатанной страницы не зависел от браузера или разрешения экрана пользователя).

Чтобы скрыть определенные элементы со страницы при печати можно использовать следующий приём:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Страница с версией для печати - "Нубекс"</title>
  <link rel="stylesheet" type="text/css" href="nubex.css">
  <link rel="stylesheet" type="text/css" media="print" href="nubexPrint.css">
 </head>
 <body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </body>
</html> 

Содержание файла nubexPrint.css следующее:

.noprint {display: none !important;}

То есть элементам, которые необходимо скрыть при печати, присваивается класс noprint, который описан в файле nubexPrint.css (отображение запрещено).

В приведенном примере будет распечатана страница с логотипом сайта, основным контентом и блоком контактов в подвале. Меню сайта и рекламные блоки распечатаны не будут.

В конструкторе сайтов «Нубекс» есть версия страниц для печати.

CSS стили для печати — media print

Привет. Не так давно мне понадобилось распечатать несколько страниц своего сайта и когда я попытался вывести их на печать, то был, мягко говоря, удивлен от увиденного. Если вы сейчас нажмете CTRL + P, то поймете чем идет речь. Дело в том, что очень давно при оптимизации сайта я благополучно выпилил все лишнее, в том числе и CSS стили для печати. Распечатать контент конечно можно, но там очень много лишнего. У себя я вряд ли что-то буду менять в этом плане, а для тех, кому это действительно необходимо, будем разбирать как сделать отображение печатной версии страниц максимально корректным.

@Media print CSS на примерах

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

• Media print в основном файле стилей
• С подключением отдельного файла

Первый вариант

1
2
3
4
5

@media print{
  .sidebar{
  display: none;
  }
}

@media print{ .sidebar{ display: none; } }

В этом случае мы говорим браузерам, что эти CSS стили нужны лишь для печати страницы, в остальных случаях их учитывать не нужно.

Второй вариант

<link media="print" rel="stylesheet" href="print.css"/>

<link media=»print» rel=»stylesheet» href=»print.css»/>

Здесь мы подключаем отдельный CSS файл, в котором записываем стили для печати. Пишем как обычно, без дополнительных media? мы это делаем при подключении.

Предпросмотр перед печатью страницы

По идее се, что нужно сделать, это нажать CTRL + P и уже будет видно как будет выглядеть распечатанная страница. Но в современных браузерах есть дополнительные инструменты, которые позволяют сделать эмуляцию печати. Давайте посмотрим как это сделать в Хроме. Жмем F12 Затем на 3 точки справа — More Tools — Renderig.

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

Это поможет сделать CSS стили для печати гораздо быстрее. А вообще, далеко не всем сайтам это нужно. Если конечно вы намеренно не предлагаете пользователям распечатать контент. Тогда да, это даже необходимо. Если вы имеете свой сайт — проверьте CSS стили для печати, возможно они тоже не в лучшем виде.

Печатаем web-документ правильно с помощью CSS — Aimweb.name

Кого-то это может удивить, но распечатывают web-страницы довольно часто.
В данной заметке показаны полезные приемы на CSS для подготовки страницы к печати.

Предварительные изменения в стилях

Желательно разбивать CSS-стили на отдельные файлы в зависимости от микроформатов:

<link rel=»stylesheet» href=»css/style.css» type=»text/css» media=»screen,projection»> <!— основной файл —>
<link rel=»stylesheet» href=»css/print.css» type=»text/css» media=»print»> <!— для печати —>
<link rel=»stylesheet» href=»css/handheld.css» type=»text/css» media=»handheld»> <!— мобильные устройства —>

Это поможет избежать путаницы в дальнейшем и сэкономит ваше время. Стоит учесть, что шрифты на печати следует задавать в пунктах (pt), дюймах (in), пиках (pc) или сантиметрах/миллиметрах(cm/mm).

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

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

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.aimweb.name» attr(href) «) «;}

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

Свойство page-break-before позволяет устанавливать место разрыва страницы при печати.
Если мы поленились, и все стили находятся в одном css-файле, то код будет выглядеть следующим образом:

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

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

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
 <head>
  <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
  <title>Пример page-break-before</title>
  <style type=»text/css»>
   @media print{
   .newpage{page-break-before: always;}
   }
  </style>
 </head>
<body>
    <h2>Разрывы страниц на CSS</h2>
    <p>Попробуйте распечатать эту страницу (да съесть еще этих мягких французских булок, да выпить чаю).</p>
    <p>Это 1-ый параграф, он будет расположен на первой странице при печати.</p>
    <div></div>
    <p>Это 2-ой параграф, он будет расположен на второй странице при печати.</p>
    <div></div>
    <p>Это 3-ий параграф, он будет расположен на третьей странице при печати. Все так просто.</p>
</body>
</html>

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

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

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

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

Подводим итоги:

В результате у меня получилось что-то подобное:

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 h2 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-файл будет довольно сильно отличаться в зависимости от дизайна, но общие принципы, указанные в статье, применимы к практически любому проекту.

CSS. Распечатываем со стилем

Часто на интернет-страницах встречаются ссылки с текстом “версия для печати“. Это словосочетание говорит само за себя — такие ссылки ведут на страницы с идентичным содержанием изначального материала оригинальной страницы, но только предназначены они для того, чтобы распечатать содержимое. Существует более оптимальный вариант распечатывать страницы с интернета — использовать CSS, который отлично справляется с выводом страниц сайта на печать.

Зачем создавать отдельные для печати страницы?

Помню, когда я впервые пытался распечатать веб-страницу. Также помню, что мне этого не удалось сделать. Я испортил около 10 листов. На бумаге появлялась только одна четвёртая часть страницы. Мне даже думалось, что виновник моих неудач — это принтер. Но сейчас я понимаю, что виновником был тот самый веб-сайт, дизайн которого не был рассчитан на посетителя, который захочет распечатать страницу.

Различные разрешения экранов мониторов и разнообразие дизайнов не позволяют одинаково отображать сайт и на экране и на бумаге. Поэтому приходится создавать отдельную страницу с идентичным содержанием, но оптимизированную для печати. Есть исключения — очень простые дизайны страниц или заранее продуманные для печати дизайны.

Что именно печатать?

Если распечатанная веб-страница идентична своей экранной копии, то это не всегда хорошо. Даже наоборот. Лично я считаю, что при печати интернет-старницы, на бумаге должно выводиться содержимое первостепенного материала — то, за чем посетитель пришёл на ту самую страницу.

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

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

Роль CSS в распечатывании веб-страниц

Большинство сайтов, предоставляющих возможность распечатать содержимое, используют PHP, и с его помощью преобразовывают оригинал страницы, или просто создают отдельные для печати страницы. Зачем? Можно обойтись без дубликатов.

Веб-страницы, предназначенные для печати, зачастую являются отдельно созданными страницами. Я не вижу ни одного достоинства у такого подхода — только недостатки. Главные из этих недостатков:

• Расходуется лишний объём дискового пространства.
• Если сайт динамический, то появляется лишняя нагрузка на сервер.
• Необходимо изменять структуру HTML-кода страниц.
• Ненужное дублирование текста.

Как быть? Использовать CSS! Экран монитора — это не единственная среда, в которой может работать CSS. Каскадные таблицы ещё предусмотрены для следующих типов носителей:

• all (все)
• aural (звуковой)
• braille (брайль-устройство)
• embossed (брайль-принтер)
• handheld (портативный)
• print (печатный)
• projection (проектор)
• screen (экран)
• tty (для устройств с фиксированным размером символов)
• tv (для устройств типа телевизора, с ограниченными возможностями)

В данный момент нас интересует печатный тип носителя. В качестве вводного материала по распечатыванию с помощью CSS прочитайте статью В Печать! (перевод на русский язык статьи Эрика Майера Going to Print).

“И вот в прошлое уходят проблемы с созданием и синхронизацией двух версий документа — одной для экрана, другой — для печати. И что самое приятное: сделать это проще простого.”

И действительно ничего сложного нет. Если уже есть навыки CSS-вёрстки, то создать отдельный CSS-файл проще простого. Прочитайте статью Эрика и вы поймёте, что нужно скрыть ненужные элементы страницы, подрегулировать единицу измерения и размеры шрифтов, размеры отдельных элементов и так далее, после чего вы получите CSS-файл, который будет отвечать за бумажный вариант страниц, распечатанных с сайта.

Распечатать эту страницу

Итак, CSS-файл для печати создан. Теперь подключаем его с помощью следующей строки кода, которую необходимо поместить между тэгами <head></head>:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Дальше, когда посетитель захочет распечатать страницу и нажмёт кнопку печати в своём браузере, то документ распечатается в задуманном виде, т.е. подключится print.css и возьмёт на себя ответственность за стиль распечатанного материала. Но как быть в том случае, когда ожидания посетителя не оправдались? Да, страница распечаталась, но не в том виде, в котором посетитель видел эту страницу на экране. В таких случаях можно предоставить выбор в виде ссылки, щёлкнув по которой, подключается созданный CSS-файл для печати, после чего внешний вид страницы меняется и остаётся только то, что будет распечатано. Ожидания посетителя будут оправданы.

Подключаем новый CSS-файл для печати

Теперь необходимо, чтобы при нажатии ссылки, подключался созданный для распечатывания CSS-файл. Я выбираю метод с использованием PHP (есть несколько вариантов с использованием JavaScript), который успешно работает на Zen Garden (меняет дизайны), и который Дэйв предлагает использовать любому желающему.

Код следующий:

<? php
$tempCSS = $HTTP_GET_VARS["cssfile"];
if ($tempCSS != "") {
$loadCSS = $tempCSS;
} else {
/* устанавливается CSS-файл поумолчанию, если нет строки запроса */
$loadCSS = "default.css";
};
$currentDesign = $loadCSS;
?>

Этот PHP-скрипт необходимо вставить в каждую страницу сайта, где будет подгружаться новый CSS-файл. default.css — название оригинального CSS-файла, предназначенного для экрана монитора. Теперь необходимо заменить оригинальную строку (между <head></head>) следующей строкой кода:

<link rel="stylesheet" type="text/css" href="<?php echo $loadCSS; ?>" title="default" media="screen" />

и так тоже работает:

<style type="text/css" media="all">@import "<?php echo $loadCSS ?>";</style>

Наконец, чтобы сослаться на конкретный CSS-файл и применить его к конкретной интернет-странице, необходимо прописать следующее:

<a href="thispage.html?cssfile=print.css">Распечатать страницу</a>

thispage.html — название страницы, на которой будет выполняться подгруздка каскадных таблиц, а print.css — это уже непосредственно название самого CSS-файла для печати.

Текст Распечатать страницу можно заменить любым другим. Один из популярных заголовков — версия для печати.

Распечатывайте со стилем! Удачи.

Печать html-документов

1. Правило @page

Блок страницы состоит из области страницы, где располагается содержимое и области полей, окружающей область страницы. Правило @page используется для изменения некоторых css-свойств при печати документа. Изменить можно только поля элемента margin, а также задать разрывы страниц в указанном месте.

@page {
margin: 2in;
}

Можно задавать отдельные поля документа внутри правила @page, такие как margin-top, margin-right, margin-bottom, margin-left:

@page {
margin: 1in;
margin-left: 1.5in;
}

2. Разрывы страниц

Управлять разрывами страниц можно с помощью свойств page-break-before, page-break-after и page-break-inside. Данные свойства применяются к блочным элементам, для которых свойство position имеет значение relative или static.

Синтаксис:

@media print {
h2 {page-break-before: always;}
}

Синтаксис:

@media print {
footer {page-break-after: always;}
}

Свойство page-break-inside говорит браузеру, может ли страница разрываться внутри элемента или нет. Но в случае, если элемент оказывается длиннее страницы, то разрыв неизбежен.

Синтаксис:

@media print {
img {
display: block;
page-break-inside: avoid;
}
}

CSS-оптимизация веб-страницы для печати — Офтоп на vc.ru

Подборка полезных CSS-техник от фронтенд-разработчика Мануэля Матузовича.

Мануэль Матузович

Бывший менеджер Microsoft Аарон Густафсон в октябрь 2016 года написал в Twitter обращение к Indiegogo, где обратил внимание компании на то, что страницы с деталями заказать распечатать.

Когда я увидел этот твит, я уже очень давно не думал об этом. Может быть дело в том, что я постоянно решаю вопросы, связанные с изменением размеров браузеров, и проверяю, чтобы страницы наших сайтов работали в любом размере и любой форме, а может быть потому, что сам почти никогда не печатаю страницы.Как бы то ни было, я совсем забыл о стилех для печати, и это плохо.

Оптимизация интернет-страниц для печати очень важна, потому что в наших же интересах, чтобы сайты были максимально доступны пользователям, вне зависимости от того, в каком виде. Не нужно предполагать, какими пользователями являются пользователи и каким будет их поведение: люди все еще печатают страницы сайтов. Только подумайте о всех этих статьях или блогах, рецептах, контактной информации, страницах «как добраться» или сайтах с недвижимостью.Однажды кто-то где-то обязательно попробует распечатать одну из созданных вами страниц.

Я давно перестал пользоваться принтером дома, потому что он ломался каждые 10 минут. Но не все такие как я.

— Гейдон Пикеринг

Инклюзивные шаблоны дизайна

Если вы обнаружите ту же самую проблему, что и у меня, то надеюсь, что эта статья быстро освежит ваши знания.Если вы еще не оптимизировали свои страницы с помощью CSS, вам помогут начать это делать следующие советы.

1. Встраиваем стили для печати

Лучший способ встроить стили для печати — описать директиву @media в своем CSS.

body {font-size: 18px;} @ media print {/ * сюда идут стили печати * / body {font-size: 28px; }}

Также вы можете встроить стили для печати в HTML, но для этого потребуется дополнительный запрос.

2. Тестирование

Не нужно печатать страницу каждый раз, когда вы вносите небольшое изменение.В зависимости от таблицы можно экспортировать страницу как файл PDF, сделать предпросмотр страницы или даже внести корректировки в браузере.

Чтобы откорректировать стили для печати в Firefox, откройте Панель разработчика (Shift + F2 или Разработка → Веб-разработка → Панель разработчика), введите media emulate print в строчке ввода внизу окна и Enter.Активная вкладка будет вести себя, пока вы не закроете или не обновите страницу.

CSS стили для печати — media print

Привет. Не так давно мне понадобилось распечатать несколько страниц своего сайта и когда я попытался вывести их на печать, мягко говоря, удивлен от увиденного. Если вы сейчас нажмете CTRL + P , то поймете чем идет речь. Дело в том, что очень давно при оптимизации сайта я благополучно выпилил все лишнее, в том числе и стили CSS для печати. Распечатать контент конечно можно, но там очень много лишнего.У меня это действительно необходимо, будем разбирать как сделать отображение печатной версии максимально корректным.

@ Медиа-печать CSS на примерах

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

• Медиа-печать в основном файл стилей
• С подключением отдельного файла

Первый вариант

 1
2
3
4
5
 

 @media print {
  .sidebar {
  дисплей: нет;
  }
} 

@media print { .sidebar { дисплей: нет; } }

В этом случае мы говорим браузерам, что эти стили CSS нужны лишь для печати, в других случаях их не нужно.

Второй вариант

Здесь мы подключаем отдельный файл CSS, в котором записываем стили для печати. Пишем как обычно, без дополнительных медиа? мы это делаем при подключении.

Предпросмотр перед печатью страницы

По идее се, что нужно сделать, это нажать CTRL + P и уже будет видно, как будет выглядеть распечатанная страница.В браузерах есть дополнительные инструменты, которые позволяют сделать эмуляцию печати. Давайте посмотрим как это сделать в Хроме. Жмем F12 Затем на 3 точки справа — Дополнительные инструменты — Renderig.

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

Это поможет сделать CSS-стили для печати намного быстрее. А вообще, далеко не всем сайтам это нужно. Если конечно вы намерены не предлагает пользователям распечатать контент.Тогда да, это даже необходимо. Если вы имеете свой сайт — проверьте CSS стили для печати, возможно они тоже не в лучшем виде.

Как сделать версию для печати

Вы здесь: Главная — CSS — Основы CSS — Как сделать версию для печати

Часто на сайтех можно встретить версию для печати той или иной страницы . Многие думают, что это что-то встроенное в сам браузер или что это делается очень просто. На самом деле, это совсем не так. Версия для печати — это обычная страница , которую Вам нужно самостоятельно сделать.

Вы можете посмотреть версию для печати у этой статьи. Фактически, что нужно отображать там? Название статьи, раздел, категория, автор, сам текст и дата. Всё это и выведено на эту страницу. Нужны ли меню, форма поиска, различные блоки? Не думаю, поэтому их и нет.

Так же убедитесь, что ширина версии для печати не превос 650px , иначе браузер может порезать края.

Итак, вы уже поняли, что версию для печати Вам надо создать самостоятельно, выводя ровно то, что нужно пользователю.Теперь о том, как это сделать.

Есть 2 варианта : создать отдельную страницу и создать отдельный файл стилей. Первый вариант, думаю, понятен. Создайте ещё одну страницу с версией для печати и на основной странице даёте ссылку на эту печатную версию. Пользователь по ней переходит и через «Файл» -> «Печать» он её распечатает.

Второй вариант предполагает создание отдельной таблицы стилей, где Вы скроете все лишние блоки (через display: none; ).Дальше такой файл стилей подключается следующим образом:

Теперь, если пользователь захочет распечатать эту страницу, то распечатается не то, что он видит, а то, что прописано в print.css . Фактически, пользователь видит страницу в одном виде, а принтер в совсем другом.

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

• Создано 25.12.2013 08:52:27
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте : http://vk.com/myrusakov.
Если вы хотите дать оценку мне и моей работе, напишите её в моей группе: http: // vk.com / rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления : Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий страницы внизу.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на сайте, в контакте):

1. Кнопка:
   

   Она выглядит вот так:

2. Текстовая ссылка:
   Как создать свой сайт

   Это выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL = «https: // myrusakov.ru «] Как создать свой сайт [/ URL]

Печать html-документов

1. Правило @page

Блок страницы состоит из области, где содержится содержимое и области полей, окружающей среды страницы. Правило @page используется для изменений некоторых css-свойств при печати документа. Изменить можно только поля элемента , маржа , а также указать разрывы страниц в указанном месте.

  @page {
маржа: 2 дюйма;
}  

Можно задавать поля документа внутри правил @page , такие как верхнее поле , поле справа , поле снизу , поле слева :

  @page {
маржа: 1 дюйм;
маржа слева: 1.5 дюймов;
}  

2. Разрывы страниц

Управлять разрывами страниц можно с помощью свойства разрыв страницы до , разрыв страницы после и разрыв страницы внутри . Данные свойства применяются к блочным элементам, для которых свойство position имеет значение relative или static .

Синтаксис:

  @media print {
h2 {разрыв страницы: всегда;}
}  

Синтаксис:

  @media print {
нижний колонтитул {страница-разрыв-после: всегда;}
}  

Свойство page-break-inside говорит браузеру, может ли страница разрываться внутри элемента или нет.Но в случае, если элемент оказывается длиннее страницы, то разрыв неизбежен.

Синтаксис:

  @media print {
img {
дисплей: блок;
разрыв страницы внутрь: избегать;
}
}