Версия для печати – Создание версии для печати / Как сделать сайт самому? / Интеграция макета сайта / Документация

Leave a Comment / Разное / By /

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

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

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

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

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

Версия для печати — это обычная страница, которую Вам нужно самостоятельно сделать.

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

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

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

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

«Файл»->»Печать» он её распечатает.

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

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

Теперь если пользователь захочет распечатать эту страницу, то распечатается не то, что он видит, а то, что прописано в 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]

Версия документа для печати

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

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

Решение — таблицы стилей для печати

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

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

Сегодня вы можете взять любой (X)HTML-документ и подготовить его к
печати с помощью стилевой таблиц, не прикасаясь к разметке. И вот в
прошлое уходят проблемы с созданием и синхронизацией двух версий
документа — одной для экрана, другой — для печати. И что самое
приятное: сделать это проще простого.

Обходим ошибку с плавающими элементами

Браузеры семейства Gecko, такие как Netscape 6.x или Mozilla, имеют
проблему с печатью длинных «плавающих» блоков (long floated elements).
Если плавающий элемент вышел за пределы печатной страницы, то
оставшаяся часть полностью пропадает, так и не появившись на следующей
странице.

Если ваш сайт похож на «A List Apart», т.е. статьи в нём заключаются
в один большой плавающий блок, то это значит, что читатели при
распечатке получат лишь первую страницу статьи.

Решение, как и следовало ожидать, заключается в отмене свойства
«плавающий» у блока с текстом перед печатью. Если вкратце, для всех
плавающих элементов устанавливается стилевое правило «float: none».
Сделав это, вы вернёте все плавающие элементы к обычному виду, и
документ будет напечатан так, как и предполагалось — страница за
страницей вплоть до самого конца.

Итак, именно это я и предложил сделать Зельдману для ALA, и, как
только он это сделал, проблема с печатью исчезла. У броузеров семейства
Gecko эта ошибка по-прежнему не исправлена (на момент написания
статьи), но всё же её можно легко обойти предложенным выше способом.

В путь

Ниже представлена «печатная» таблица стилей, с помощью которой «A List Apart» решил проблему печати плавающих элементов:

#menu {
display: none;
}

#wrapper, #content {
width: auto;
border: 0;
margin: 0 5%;
padding: 0;
float: none !important;
}

Хорошее начало. Таблица стилей полностью убирает правое меню так,

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

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

Если посмотреть на содержимое тега <head> новых статей на сайте ALA, мы обнаружим (в гуще начинки) следующие строки:

<style type="text/css" media="all">
@import "nucss2.css";
</style>

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

У нас есть файл таблицы стилей, print.css, применение которого для
печатных устройств «print» было оговорено значением атрибута «media».
Файл таблицы стилей nucss2.css, который импортируется с помощью
конструкции @import дабы скрыть его от Navigator 4.x, будет использован
при отображении страницы на любом устройстве вывода (атрибут

media=»all»). Это может быть дисплей, принтер, проектор, синтезатор
речи и так далее. Разойдясь, мы могли бы записать в таблицу стилей для
печати директивы для фонового цвета страницы и указать шрифты в
пикселях.

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

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

Отбеливание фонов

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

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

Если мы призовем на помощь свойство background, мы одним махом решим
обе проблемы. Чтобы сделать решение более гибким, зададим для элемента
«body» белый фон, а элементы «wrapper» и «content» пусть имеют
прозрачный фон (и тем самым через них будет проступать белый цвет
«body»):

body {
background: white;
}

#menu {
display: none;
}

#wrapper, #content {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent;
}

Задание цвета переднего плана (цвет шрифта) не было абсолютно
необходимым, но лучше не забывать об этом. Итак, сейчас у нас есть два
«неплавающих» элемента (#wrapper, #content) с прозрачным фоном, и
страница — с белым фоном.

Вас может взволновать то, как Navigator 4.x обходится со значением
«transparent», но выше нос: NN4.x обращает внимание лишь на таблицы
стилей, у которых атрибут «media» имеет значение «screen». Так же как и

в случае с директивой @import, наши таблицы стилей для печати всегда
сокрыты от подслеповатых глаз Navigator 4. Так что, здесь не о чём
беспокоиться.

Размер шрифта для печати

Общая таблица стилей задаёт размер шрифта равный 11 пикселям. Весьма
неудачный выбор при печати. Само семейство шрифтов — сначала Georgia ,
а потом serif — отлично подходит для печати, так как шрифты с засечками
обычно лучше выглядят на бумаге. Необходимо изменить лишь размер
шрифта. Вот так:

body {
background: white;
font-size: 12pt;
}

«Постойте!», — вероятно, воскликнете вы. — «Пункты — это зло!»

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

Вы, конечно, можете задать любой размер, какой пожелаете, однако

шрифт в 12 пунктов наиболее употребителен. И так как в общей таблице
стилей размеры всех остальных элементов страницы даны относительно
размера в элементе «body», наша работа закончена.

Marginalia

Существующие стилевые правила задают для левых и правых границ
(margins) элементов wrap и content размер в 5%. Это значит, что с обеих
сторон статьи будет «пустое место», и каждое такое «пустое место» будет
составлять 10% ширины области печати. Это следствие того, что блок с
текстом статьи «content» лежит внутри обрамляющего блока «wrapper», и
каждый их них имеет поля по 5% с левой и правой сторон.

Исходная общая таблица стилей задаёт 15%-ный правый отступ (padding)
для блока «content». Границы уже дали нам 10%, так что нам надо
добавить ещё 5%. Это достаточно просто сделать:

div#content {
margin-left: 10%;
}

В другом варианте решения можно бы быть оставить границы (margin) в
покое и добавить 5% к левому отступу (padding). Так как блок «content»
не имеет видимого фона, мы получили бы такой же результат.

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

Ссылки при печати

Был один хитрый вопрос — что же делать с гиперссылками? Очевидно, на
печати они не могут быть столь полезны, как на мониторе, но часто важно
дать ключ к тому, на что же они ссылались в оригинале. Итак, вот что я
изобрёл:

a:link, a:visited {
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}

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

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

#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}

Попробуйте это в броузерах на платформе Gecko — Mozilla или Netscape
6.x. На распечатке после каждой ссылки вы увидите в скобках относящийся
к ней URL.

В броузерах, не понимающих это стилевое правило, не будет никаких
нежелательных эффектов — ссылки все так же будут темно-красными,
подчёркнутыми и жирными. Просто после текста ссылок не будет выводиться
относящегося к ним URL, вот и всё.

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

С этим новым правилом есть одна эстетическая проблема. Дело в том,
что оно предписывает дословно вставлять в документ значение атрибута
href.

Заглянув в код любой страницы с сайта «A List Apart», мы быстро
заметим там множество так называемых «относительных ссылок» вида
«/issues/144». Они будут вставлены в документ в таком виде, в каком они
есть, а хотелось бы что это были полные URL-ы.

В подобных случаях нам может помочь CSS3. Любой селектор атрибута,
использующий оператор ^=, выбирает элементы, основанные на начале их
значений атрибута. Таким образом, мы можем выбрать любой атрибут href ,
начиняющийся символом слэша, и вставить туда текст, заменяющий
существующее значение атрибута.

#content a[href^="/"]:after {
content: " (//www.alistapart.com" attr(href) ") ";
}

Это правило преобразует все значения типа «/issues/144/», в
«//www.alistapart.com/issues/144/». Это правило не сможет помочь в
случае с относительными URL, которые не начинаются со слэша, но, к
счастью, ALA не использует этот тип ссылок.

ВНИМАНИЕ! ВАЖНО! Как было сказано, селектор вида ^=
относится к селекторам спецификации CSS3. Валидатор для CSS от
консорциума W3 может тестировать лишь на соответствие спецификациям
CSS1 и CSS2. Не понимая селектор, относящийся к CSS3, валидатор будет
сообщать об ошибке даже в том случае, когда селектор не противоречит
рекомендациям спецификации.

Украшаем начало страницы

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

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

div#content {
margin-left: 10%;
padding-top: 1em;
border-top: 1px solid #930;
}

Таким образом, будет просто нарисована линия чуть ниже рисунка
заголовка статьи. Картинка заголовка сама размещена в <div>
элементе, поэтому воспользуемся нижней границей этого элемента, чтобы
подтянуть вверх на себя остальные элементы страницы.

div#mast {
margin-bottom: -8px;
}

div#mast img {
vertical-align: bottom;
}

Благодаря этим простым правилам верхняя граница элемента «content»
выравнивается с линией подчеркивания в картинке. Эта граница по сути
выводится поверх картинки, но так как цвета совпадают, их трудно (и
даже невозможно) отличить друг от друга. Даже если броузер по какой-то
причине решит расположить картинку поверх границы блока content,
иллюзия сохранится.

Второе правило (со свойством «vertical-align») показывает, как
обойти одну интересную особенность броузера Mozilla, которая видна лишь
тогда, когда документ представлен в режиме соответствия стандартам.

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

Что ещё?

Вот и всё, что мы сделали для ре-дизайна, но это вовсе не все, что можно было бы сделать.

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

Ещё одна область, которую мы не рассмотрели достаточно глубоко, —
изменение размеров шрифта. Множество классов (например, «superfine»),
используют заданные в общей таблице стилей пиксельные размеры шрифтов.
Поменять их размеры для печати также просто, как мы сделали это для
тела <body> документа: просто напишите правило для элемента и
задайте новое значение для свойства font-size .

К примеру, мы можем написать .superfine {font-size: 9pt;}… или
любое другое подходящее значение. Имеются другие элементы, подобно
нижним колонтитулам или тэгу <pre>, которые могут выиграть от
подобной работы.

Конечный результат

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

body {
background: white;
font-size: 12pt;
}
#menu {
display: none;
}
#wrapper, #content {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent none;
}
div#content {
margin-left: 10%;
padding-top: 1em;
border-top: 1px solid #930;
}
div#mast {
margin-bottom: -8px;
}
div#mast img {
vertical-align: bottom;
}
a:link, a:visited {
color: #520;
background: transparent;
font-weight: bold;
text-decoration: underline;
}
#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
#content a[href^="/"]:after {
content: " (//www.alistapart.com" attr(href) ") ";
}

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

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

Ещё 18 лет назад первый в мире браузер WorldWideWeb, написанный Бернерс-Ли, уже давал пользователю возможность отправить на принтер интернет-страницу. Но, несмотря на это, проблематика удобной печати документов в интернете до сих пор остается актуальной и вызывает вопросы в среде веб-разработчиков.

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

Интерфейс первого в мире браузера WorldWideWeb – отдельный предмет для обсуждения.

Разметка первых веб-сайтов позволяла отправлять на печать документы «as is», без какой-либо стилевой коррекции, и они отлично смотрелись на бумаге. Однако после появления на этом рынке Microsoft и выхода Internet Explorer версии 2 (с поддержкой таблиц) внешний вид сайтов стал постепенно усложняться. Появилась мода на красивый дизайн, усложнилась разметка и, как следствие, стали появляться ошибки при печати.

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

Возможно ли универсальное решение? Возможно. Тем не менее, его надо применять с оглядкой на специфику задачи.

О чем нельзя забывать

Давайте выделим объективные условия, в которые поставлен веб-разработчик:

  1. Пользователь всегда может распечатать страницу стандартным способом (Файл-Печать), даже если вы не предусмотрели ссылку «Версия для печати»;
  2. Пользователю удобно читать длинную статью с разбиением на страницы, но печатать ему удобно всю статью целиком;
  3. Принтер, на котором печатает пользователь, может быть черно-белым или цветным;
  4. У пользователя может быть установлен любой современный (или не очень) браузер;
  5. На бумаге документ должен выглядеть опрятно и красиво и, главное, легко читаться;
  6. Функционал «Версия для печати» не должен нарушать нормальной работы сайта.

Рассмотрим каждый пункт подробнее.

Файл–Печать
Следует понимать, что если на сайте нет ссылки «Версия для печати», то это не значит, что содержимое не будут печатать.

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

Поэтому обязательным условием является наличие оптимизированной таблицы стилей CSS для печатной версии (стили подключаются с указанием атрибута media в значении print). Полное описание типов вывода можно найти здесь: www.w3.org/TR/CSS2/media.html, а о том, как именно реализовать оптимизированную версию, есть отличная переводная статья: www.webmascon.com/topics/coding/33a.asp

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

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

В действительности с поддержкой CSS 2 необходимость в ссылках «Версия для печати» в большинстве случаев отпала. Однако хорошим тоном является наличие такой ссылки «под рукой», т.к. в условиях борьбы за внимание пользователя лишний перевод фокуса на пространство вне сайта нежелателен.

Длинные статьи
К сожалению, CSS 2 не поможет в тех случаях, когда объемный материал представлен в виде глав и разбит на страницы. Такой способ подачи информации безусловно удобен для чтения, но при печати возникают неудобства. Самым «простым» способом оказывается поочередное копирование всех страниц в Word или блокнот. В этом случае ссылка «Версия для печати» просто жизненно необходима. И вот здесь возникает вопрос – а где ее лучше поместить?

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

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

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

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

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

Что должно происходить по клику на эту ссылку?

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

Оптимальное решение – открытие нового окна, содержащее оптимизированный для печати контент. Хорошим тоном считается наличие узкой шапки с логотипом. В случае коммерческого сайта правильным будет добавить в шапку название организации и контактный телефон, а в «подвал» – более подробную контактную информацию и постоянный адрес источника. Обязательным условием является наличие крупной ссылки/кнопки «Распечатать», вызывающей диалог печати.

Чтобы сама ссылка «Распечатать» не попала в область печати, можно либо использовать print-версию таблицы стилей, либо просто скрыть ссылку перед выводом диалога печати (display в значении none). Кнопка «Распечатать» должна быть текстовой, т.к. выключенные в браузере картинки испортят всю идею, несмотря на наличие у кнопки alt и title. Можно сразу вызвать диалог печати (например, такая реализация есть на сайте MSDN), но часто клиентам импонирует именно первый вариант с кнопкой.

Я встречал другое решение, которое некоторые считают красивым и удобным.

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

Цветопередача
Большинство версий для печати совершенно не учитывают особенностей принтера. Хороший пример плохих последствий — это нарушение цветопередачи.

Часто ссылки на сайте выделены только цветом, и при черно-белой печати различить, что было ссылкой, а что текстом, становится невозможно. В этом случае, в версии для печати стоит переназначить ссылкам стили (сделать подчеркнутыми). Кроме того, у обладателя цветного струйного принтера легко могут засориться дюзы или быть близким к истощению один из цветных картриджей. В этом случае отправлять на печать «темно-темно-синий» текст негуманно. Текст должен быть черным.

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

What You See Is What You Get
На бумаге пользователь должен получить такой же документ, как и в окне после клика на ссылку «Версия для печати». Текст должен удобно читаться, не должно быть лишних пустот.

Прежде всего, это зависит от шрифтов и отступов. Шрифты рекомендуется задавать в пунктах, а не пикселях, как это принято для экранного отображения.

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

Что касается ссылок, то существует мнение, что их надо «разворачивать», т.е. сопровождать полным адресом URL. Это целесообразно делать только в том случае, если вы уверены в важности всех ссылок в документе. Лучше отказаться от этого решения, если ссылки в рамках сайта не являются дружественными к пользователю, например, содержат ?, &, = .php и прочие атавизмы. Ссылки на другие сайты лучше обрезать до имени домена или производить проверку на длину и наличие в них специальных символов.

Более подробное описание решений приводится в статьях:

www.webmascon.com/topics/coding/33a.asp
imfo.ru/archive/2004/11/05/print_version_and_links

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

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

Ссылки по теме:

* www.alistapart.com

Журнал List Apart, посвященный проблематике веб-дизайна, верстки и контентного наполнения

* www.webmascon.com/topics/coding/33a.asp

Переводная статья, посвященная таблице стилей версии для печати. Источник: List Apart

* imfo.ru/archive/2004/11/05/print_version_and_links

Статья, посвященная выводу ссылок в версии для печати

* npj.netangels.ru/seminar/print_version

Тексты докладов, прочитанных в рамках семинара «Версия для печати HTML-документов»

* forum.searchengines.ru

Форум о поисковых системах

* www.w3.org/TR/CSS2/media.html

Описание типов отображения для различных устройств вывода в CSS 2

* www.itrack.ru/spytrack

Система анализа действий посетителей на сайте

Об авторе:

Владимир Старков – руководитель компании iTrack (разработка интернет-сайтов и решений, основанных на веб-технологиях; маркетинговые коммуникации, направленные на повышение уровня продаж).

Источник: upa.org.ru/UsabilityBulletin-28.aspx?EntryID=800

Распечатать страницу без лишних элементов

PrintWhatYouLike

Периодически в интернете можно встретить настолько ценные статьи, что хочется распечатать их и зачитать до дыр. При этом не на всех сервисах предусмотрена версия статьи для печати или наши желания распечатать не совпадают с предоставляемыми возможностями (хочется оставить картинку или изменить тип основного шрифта). Как же распечатать страницу без лишних элементов? В таком случае поможет веб-сервис PrintWhatYouLike.com.

PrintWhatYouLike - редактирование отдельных блоков страницы

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

Боковая панель с рядом функций для редактируемой страницы

В левой части экрана присутствует боковая панель с рядом функций для редактируемой страницы:

  • сохранение редактируемой страницы в форматы PDF, HTML;
  • изменение размера текста, типа шрифта;
  • удаление заднего фона или изображений одним нажатием кнопки мыши.

Для удобства пользователя PrintWhatYouLike предлагает поместить на панель закладок кнопку для редактирования перед печатью любой, посещенной нами страницы. Также предусмотрена опция PageZipper. Она будет удобна при чтении тех ресурсов, где любят разделить одну статью на пять, десять или более страниц. Вы жмете “Следующая страница”, еще раз “Следующая страница”, а затем понимаете, что и читать было нечего. PageZipper разложит всю статью целиком на одной странице для дальнейшего редактирования и печати. Если букмарклет ставить не хочется, то доступен плагин для Firefox PageZipper 0.6.1.

PrintWhatYouLike рассказывает о своей помощи пользователю и миру

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

Блогерам PrintWhatYouLike может также принести пользу. Установка плагина приведет к появлению на каждой странице блога удобной кнопки для отправки статей на печать, возможность сохранения страниц в формат PDF, что позволит экономить читателям бумагу и краску принтера.

Печать из браузера / Habr

Web наступает. Все больше и больше обычных настольных приложений переезжает в Internet. Уже никого не удивить онлайновым текстовым или графическим редактором. А уж различные многопользовательские комплексы, базы данных, системы отчетности — тут раздолье для веб-технологий. Например, еще несколько лет назад было бы вполне нормально сделать систему регистрации и учета клиентов скажем стоматологической поликлиники или библиотеки в Delphi, добавить базу данных и сетевую часть. Но сейчас такое решение окажется неразумным: гораздо проще, удобнее, а значит и эффективнее использовать все то, что предоставляет нам Web, даже если приложением будут пользоваться только внутри локальной сети. Кроме того, такое решение кроссплатформенное, что актуально в связи с наметившейся тенденцией перехода к свободным ОС. Все что нужно на клиентских компьютерах — наличие браузера, никаких установок, настроек и прочего.

Но у решения все делать в web есть недостаток (даже не один, но я сейчас не буду перечислять все): неудобство при печати отчетов, бланков документов и прочих печатных страниц. Это связано с тем, что веб-страницы рассчитываются прежде всего для отображения на экране монитора и не подтачиваются для печати, что нередко ведет к расползанию печатной страницы. К счастью это все временные трудности и их можно обойти. Можно, например, генерировать отчеты в pdf или doc. Но я считаю это не слишком удобным: пользователю надо устанавливать программы, работающие с этими форматами, каждый раз выкачивать с сервера сгенерированный файл, печатать из сторонней программы, а не браузера. Поэтому стоит приложить усилия к созданию страниц, правильно выводящихся на печать прямо из браузера.

Раз имеются отдельные версии страницы для отображения на экране и для печати, то следует разделить CSS на две части по назначению. Свойства элементов, специальные для отображения на экране будут храниться в блоке
media screen {}
а для печати, соответственно, в
media print {}

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

media print {
.banner {display:none;}
}

Также запрещаем отображение других лишних блоков. Возможно, некоторые блоки наоборот стоит отображать при печати, а на экране скрывать. Красивый цветной логотип наверняка на черно-белом принтере распечатается грязным или недостаточно четким, стоит подменить его на специальный контрастный:
media screen {
div.logo {background: url(img/logo.png) no-repeat top;}
}
media print {
div.logo {background: url(img/logo_print.png) no-repeat top;}
}

Скорее всего пользователь веб-приложения будет распечатывать страницу на принтере формата A4 (если только это приложение не для полиграфии). Ограничим страницу нужным размером, вставив конструкцию page. Можно указать размеры страницы (обязательно в сантиметрах или дюймах, ни в коем случае не в пикселах!), так для A4 это 8.5×11 дюймов или 21×29.7 см.
page {
size 8.5in 11in;
margin: 1cm
}

Если предполагается двухсторонняя печать, то следует различать левую и правую страницы:
page :left {
margin-left: 4cm;
margin-right: 3cm;
}

page :right {
margin-left: 3cm;
margin-right: 4cm;
}

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

При печати многостраничных отчетов или заполненных бланков документов потребуется каждую часть отчета или каждый бланк выводить на отдельную страницу. Мне показалось очень удобным на экране показать разрыв страницы с помощью горизонтальной черты hr, а при печати по ней делать разрыв страницы:
media print {
hr {PAGE-BREAK-AFTER: always; visibility: hidden;}
}

Напомню, что PAGE-BREAK-AFTER заставляет принтер продолжить печать со следующей страницы после вывода элемента с этим свойством, а PAGE-BREAK-BEFORE — перед выводом. В приведенном мной примере hr при печати не отображается (visibility: hidden), но это не мешает ему управлять принтером.

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

Для этого я сформировал форму ввода данных в виде пустого бланка документа. Кстати, это хорошая идея: форма получается компактная и выглядит почти как на бумаге. Далее собираем на одной странице две версии документа, ловко манипулируя свойством display. Каждое поле в HTML выглядит так (упрощенно):

ФИО клиента:
/>
Вася Пупкин

Обратите внимание на этот span — в нем дублируется значение поля. CSS-файл такой:

media screen {
.field {display: none;}
}
media print {
input {display: none;}
td {border: 1px solid;}
.field {text-decoration: underline;}
}

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

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

Как распечатать страницу с сайта

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

к оглавлению ↑

Печать страницы сайта средствами браузера

Это самый простой способ вывести страницу сайта на печать. Любой браузер имеет штатную функцию печати, доступ к которой можно получить с помощью меню программы. Откройте нужную страницу и выберите в меню браузера пункт «Печать». Расположение кнопки меню в разных браузерах может отличаться, но найти ее не должно составить труда.

 Для браузера Ghrome

печать страницы в браузере ghrome Меню Печать Ghrome

Для браузера Firefox

печать страницы в браузере firefox Меню Печать Firefox

Для браузера Internet Explorer

как распечатать страницу в IEМеню Печать Internet Explorer

Для вызова функции печати страницы также можно воспользоваться так называемыми «горячими клавишами»  —  <Ctrl+P>. В любом случае откроется окно с настройками, где выбрав нужные параметры, отправляем страницу на печать. Принтер при этом должен быть заправлен бумагой и включен.

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

к оглавлению ↑

Печать страницы сайта с помощью буфера обмена и текстового редактора

Откройте текстовый редактор Word, в случае если у вас установлен офисный пакет Microsoft Office или штатный WordPad (Пуск>Все программы>Стандартные>WordPad), переключитесь на браузер и загрузите нужную страницу. Выделите на веб-странице необходимую информацию и скопируйте ее в буфер обмена с помощью контекстного меню или комбинацией  клавиш — <Ctrl+C>.

печать страницы в Word

Переключитесь в текстовый редактор, и с помощью контекстного меню или комбинацией клавиш <Ctrl+P> вставьте информацию из буфера обмена, скопированную туда ранее.

распечатать с помощью Word

к оглавлению ↑

Печать страницы сайта с помощью онлайн-сервиса

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

распечатать страницу сайта онлайн сервис

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

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

Обыкновенно данная ссылка находится недалеко от заголовка статьи.

Поделиться.
к оглавлению ↑

Еще по теме:

  • Как скачать файл из интернетаКак скачать файл из интернета Еще одно преимущество интернета, кроме поиска информации: чтения новостей, просмотра видео и прослушивания аудиофайлов, игр в онлайн – это возможность скачивать различные файлы. С помощью […]
  • Браузер: журнал посещенных страницБраузер: журнал посещенных страниц Если вы недавно посетили какой-то сайт и хотите вернуться на него снова, но не можете вспомнить его адрес, проверьте журнал посещенных страниц, чтобы найти его. Журнал посещенных страниц […]
  • Закладки браузераЗакладки браузера Если вы нашли сайт, на который намерены возвращаться в дальнейшем, сохраните его в закладках или в Избранное применительно к браузеру Internet Explorer, чтобы можно было легко перейти на […]
  • Поиск информации на странице сайтаПоиск информации на странице сайта В сети находится огромное количество сайтов, которые содержат огромные объемы тестовой информации. Перейдя на такой сайт, начинающий пользователь интернета долго прокручивает страницу для […]
  • Поиск информации в интернетеПоиск информации в интернете Для поиска информации в Интернете предназначены поисковые системы. В следующем примере рассматривается использование популярной поисковой системы Google. Ввести необходимый поисковый […]

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

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