Страницы для печати css: CSS-стили для печати, о которых я забыл / RUVDS.com corporate blog / Habr – CSS печатной версии страницы / Habr

Содержание

Печатаем 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 all
{
.nextpage { display:none; }
}

@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 стили для печати - media print

css для печати

Привет. Не так давно мне понадобилось распечатать несколько страниц своего сайта и когда я попытался вывести их на печать, то был, мягко говоря, удивлен от увиденного. Если вы сейчас нажмете 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.

Эмуляция печати в хроме

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

print css

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

Вариант веб страницы для печати

Многие пользователи глобальной сети Интернет даже не подозревают, что Web является многофункциональной средой, предусматривающей различные способы предоставления информации. В данном случае имеется в виду не мультимедиа – аудио и видео данные, широко распространенные на сегодняшний день, а реальные источники, посредством которых люди черпают информацию из Web пространства. Львиная доля пользователей Интернета для этих целей использует экран, который может быть как отдельным устройством (монитор ПК), так и неотъемлемой частью мобильного устройства с доступом к сети. Учитывая успешное развитие компьютерных технологий и доступность как стационарных, так и портативных компьютеров и всевозможных электронных гаджетов, можно с уверенностью сказать, что на сегодняшний день монитор является самым популярным средством просмотра веб-страниц.

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

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

Создание связей.

Существует несколько способов импорта содержимого внешних таблиц стилей CSS в html документ и определения необходимых правил непосредственно в файле исходного кода страницы.

Мета тег <link>.

Наиболее распространенный и привычный вариант – использование мета тега <link>, в котором предусмотрен атрибут media, позволяющий определить устройство, для которого выполняется форматирование документа с помощью указанного CSS файла. Вот пример:

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

Приведенный пример подключает CSS файл print_stylesheet.css, предназначенный для форматирования документа при выводе на принтер (media="print"). То есть для всех других случаев представления веб-страницы (отличных от распечатанного варианта) CSS правила, определенные в файле print_stylesheet.css не учитываться. Спецификацией CSS определено десять допустимых значений для атрибута media, предусмотренных для различных устройств и способов представления Web информации: all, aural, braille, embossed, handheld, print, projection, screen,tty и tv. В данной статье мы не будем рассматривать все значения, а только определяющие печатное устройство. Но следует также обратить внимание на значение all, которое устанавливается по умолчанию для атрибута media в том случае, если явно не указано другое. Кроме того, если определенный CSS файл предназначен для форматирования страницы при выводе на несколько типов устройств одновременно, то соответствующие им ключевые слова можно указывать в одной строке, разделяя их запятой:

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

Команда импорта CSS.

Для подключения внешнего CSS файла можно также использовать ключевое слово @media. В определяемом в данном случае правиле можно указывать несколько видов носителей, для которых предназначено форматирование. При этом синтаксис допускает два варианта написания команды:

@import url("styles/stylesheet.css") print, projection;
или
@import "styles/stylesheet.css" print, projection;

Как видно из примера особых различий у допустимых вариантов нет. В одном случае применяется директива url, а второй предусматривает написание пути к требуемому файлу CSS без нее. Приведенное в качестве примера правило предусматривает использование файла stylesheet.css, находящегося в папке styles, который предназначен для форматирования документа для устройств с постраничным выводом информации (print — принтеры, projection — слайд-проекторы и подобные им устройства).

Непосредственно в html документе веб-страницы.

Для этого используется CSS правило @media, в рамках которого указываются свойства форматирования документа и необходимые значения для них. Непосредственно за ключевым словом @media определяется один или несколько типов носителей (через запятую), для которых выполняется форматирование:

@media print, projection {
body {font-size: 12pt; line-height: 110%; background: white;}
}

@media screen {
body {font-size: medium; line-height: 2em; background: silver;}
}

</style>

Как можно догадаться, в примере, в рамках первого правила @media описаны CSS свойства для рабочей области документа (<body>), предназначенные для его отображения на устройствах с постраничным выводом информации (print, projection). А последнее правило определяет внешний вид страницы отображаемой на экране (screen).

Рекомендации по форматированию версии документа для печати.

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

  • Измените цветовую схему, используемую для отображения страницы на экране.

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

  • Измените тип используемого шрифта.

    В оформлении текста большинства веб-страниц, предназначенных для чтения онлайн применяют рубленые шрифты — sans serif (без засечек), так как они считаются более удобными при чтении с экрана монитора. Но при перенесении страницы на бумагу, ситуация меняется и здесь более подходящими будут шрифты с засечками — serif, для которых характерны небольшие декоративные элементы (засечки) на окончаниях каждой буквы. Считается, что именно засечки способствуют направлению взгляда пользователя в нужном направлении – по тексту. Поэтому, большие объемы текста должны быть оформлены шрифтом с засечками (Times New Roman, Georgia, Palatino и другие).

  • Обратите внимание на размер шрифта.

    Если для отображения текста на экране допустимо использовать относительно мелкий размер шрифта (11 пикселей, а иногда и меньше), то для печатного варианта страницы необходимо увеличить его минимум до 12 пикселей, но никак не меньше – все зависит от аудитории, на которую рассчитана содержащаяся в документе информация.

  • Выделите, используемые на странице ссылки.

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

  • Удалите лишние изображения.

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

  • Уберите элементы навигации.

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

  • Удалите ненужную рекламу.

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

  • Удалите все анимированные изображения.

    Интерактивные графические элементы, управляемые при помощи скриптов, а также анимированные Flash изображения, как правило, распечатываются некорректно, а в отдельных случаях дефекты их печати («сползание») могут повлиять на качество отображения текста, что совсем неприемлемо.

  • Авторская информация.

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

  • Используйте полный URL адрес вашего сайта.

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

  • Включите информацию об авторских правах.

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

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

Post Views: 256

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

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

Для того чтобы браузер понимал, какую версию сайта использовать для печати, нужно воспользоваться ключевым словом «@media». Внимание, это не HTML-значение, а CSS-свойство, где будет находиться дизайн ваших документов, которые уже готовы к печати на бумаге. Вам нужно написать ключевое слово «@media print» (где последнее определяет тип носителя) с использованием любого удобного для вас способа. После этого идет обычный CSS-код. Например: «@media print p { color: black; font-family: Times; }». Так браузер поймет, что при распечатке будет использоваться только черная краска и шрифт Times, который имеет специальные засечки. Вы можете указывать любые значения. Версия для печати html-файлов может иметь дополнительные атрибуты. Есть возможность управлять размером страницы, ориентацией ее на бумаге, делать дополнительные метки и т.д. Перечислять их все не имеет смысла, так как они подробно описаны в специализированных справочниках.

html версия для печати

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

Отправить ответ

avatar
  Подписаться  
Уведомление о