 |
 |
 |
Очень часто, распечатывая с интернета интересную статью, мы нажимаем кнопку "печать"
и из принтера вылазиет совсем не то что мы хотели... Кроме текста самой статьи печатается
еще куча всякой ненужной информации
типа картинок, ссылок и даже банеров.
Поэтому обычно я копирую текст статьи, и уже потом его распечатываю...
иногда это бывает не очень удобно...
особенно когда я просто хочу прочитать текст, и не собираюсь сохранять его...
И вот, запихивая очередную статью на страницу одного сайта, я вспомнила обо всех этих прелестях...
А еще я вспомнила, что на некоторых сайтах есть удобные кнопочки "версия для печати".
Вспомнила, и решила, что стоит попробовать сделать что-то подобное...
Варианта тут два (может конечно и больше, но я сразу увидела 2 явных варианта решения)
Вариант первый и самый простой: Создать дубликат страницы,
где будет только текст статьи без шапок, банеров, меню и тому подобных штук.
Потом сделать кнопку "Версия для печати" и поставить ссылку на эту страницу.
Как говорится - дешево и сердито...
И наверное все же правильнее всего...
Нууу... как всегда мы не ищем простых решений :)
"Мы сами создаем себе трудности и с успехом их преодолеваем." :) (кто-то умный сказал) и поэтому...
Вариант второй: Использовать файлы CSS для экрана и для печати и переключать их с помощью скрипта.
Так как сайт на народе, там акромя java скриптов ничего не работает...
так что выбора нет - используем для переключения файлов java скрипт.
Почему решила описать свои мучения? Потому что больше нигде не нашла как это сделать... Вот PHP скрипт есть, а java - нет (может плохо искала, киньте ссылку тогда).
Если слово CSS заставило ваши глаза округлиться... не мучайтесь, смело используйте первый вариант... Все что написано далее - не к вам...
Стоп... вы все еще читаете? Вы так легко не сдаетесь? Похвально... тогда вот вам хорошая ссылка... Там много статей про ЭТО (не подумайте плохого... про CSS :-)) http://www.htmlbook.ru. Не поленитесь, почитайте, потому что без элементарных знаний о каскадных таблицах стилей, дальше читать бесполезно... самые простые вещи я пояснять в этой статье не буду, на эту тему и так много написано в интернете, а я знаете ли ценю свое время...
один для экрана (назовем его stile1.css),
второй для печати (print2.css)
и еще один для отображения печатной версии страницы на экране (print1.css).
Содержание файла stile1.css я думаю всем понятно. Здесь мы задаем основной стиль для страницы. Допустим содержание его такое...
div {
padding: 10px;
}
p {
font-family: Verdana, Times, sans-serif;
font-size: 14px;
margin-top: 0;
margin-bottom: 0;
padding: 5px;
padding-left: 10px;
padding-right:10px;
text-align: justifi;
}
Файл print1.css - задает стиль для вывода печатной версии страницы на экране, чтобы можно было увидеть печатную версию документа перед тем как распечатать ее.
div {
padding: 10px;
}
input {
display: none;
text-align: right;
}
#vizible {
display: block;
}
td {
display: none;
}
p {
display: block;
margin-left: 10pt;
margin-right: 5pt;
margin-top: 0;
margin-bottom: 0;
padding-left: 5pt;
padding-right: 5pt;
padding-top: 0pt;
padding-bottom: 0pt;
text-align: left;
text-indent: 20pt;
font-family: Arial, 'Times New Roman', Times, sans-serif;
font-size: 12px;
}
Как видите я изменила форматирование обзацев (стиль для тега < p >) - шрифт стал более читабельным для печати,
отступы уменьшились, выравнивание изменилось.
Чтобы скрыть все шапки и банеры я задала тегу < td > значение display: none;
(т.к. страница использует табличный дизайн - т.е. представляет собой таблицу...
она стала полностью невидна)
Чтобы отобразить нужный элемент страницы, использовала уникальный идентификатор (id) - #vizible
и присвоила ему значение display: block;.
Чтобы кнопка "версия для печати", была не видна (ведь это и есть стиль для той
самой версии для печати, значит версия для печати и так на экране), пишем так:
input {
display: none;
}
Вот... примерно такое содержание, все что вам понадобится еще... изменяйте и добавляйте на здоровье.
Ну и наконец файл print2.css - он задает стиль для вывода страницы в печать.
input {
display: none;
text-align: right;
}
div {
padding: 10px;
}
td {
display: none;
}
#vizible {
display: block;
}
p {
display: block;
margin-left: 10pt;
margin-right: 5pt;
margin-top: 0;
margin-bottom: 0;
padding-left: 5pt;
padding-right: 5pt;
padding-top: 0pt;
padding-bottom: 0pt;
text-align: left;
text-indent: 20pt;
font-family: Arial, 'Times New Roman', Times, sans-serif;
font-size: 10pt;
}
Форматирование абзацев снова немного меняю...
при печати текст все же смотрится немного по другому... ну это вам решать ...
можете оставлять как есть. В остальном все то же самое. Мы ведь уже определили
предыдущим файлом стиль для печати, и показали его как версию для печати,
так зачем же обманывать посетителя нашей страницы...
Сразу поделюсь одним полезным советом. Посмотрите на код... все размеры для тега < p > заданы в pt а не в px,
хотя в файле stile1.css никаких pt нет.
Это же не правильно!!! Надо в px!!! Скажете вы...
Нууу... Сначала я как порядочная задала все размеры в px, но когда начала проверять
как печатается документ в разных браузерах... поняла, дело плохо, а поняв, попробовала задать размеры в pt
и все стало не так ужасно, как казалось на первый взгляд. Так что мотайте на ус...
или на что там еще... если усов нет :)
И так, файлы стилей созданы, дальше начинается самое интересное.
<link type="text/css" rel="stylesheet" href="stile1.css" media="screen" /> <link type="text/css" rel="stylesheet" href="stile1.css" /> <link type="text/css" rel="alternate stylesheet" href="print1.css" title="print1" /> <link type="text/css" rel="stylesheet" href="print2.css" media="print" />
Сразу отмечу, что порядок, в котором вы подключаете файлы имеет значение! Мне подошел такой порядок подключения, но это не аксиома, можете экспериментировать.
Для файла stile1.css пишем media="screen" т.е. использовать для экрана монитора.
Для файла print2.css пишем media="print" т.е. использовать при выводе страницы на печать.
Долго я искала на просторах интернета подходящее бесплатное решение, но не нашла. Но нашла вот что - Переключатель стилей Паула Совдена. (сами переведете ;)) Переключатель стилей был создан Паулом Совденом в 2001 году, с тех пор огромное количество людей использует его в своих проектах. Вот этот скрипт я взяла за основу и немного переделала (ну не программист я... НЕ ПРОГРАММИСТ!!!) так что строго не судите. Вот собственно что у меня получилось (исходный скрипт можете посмотреть по ссылке выше):
<script
language="JavaScript1.2"
type="text/javascript">
function print() {
active = getActiveStyleSheet();
switch (active) {
case 'print1' :
setActiveStyleSheet('print1');
break;
default :
setActiveStyleSheet('print1');
break;
}
}
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
return ('print1');
}
setActiveStyleSheet(title);
</script>
Я сделала так:
<form name="printer" action="GET"> <input type="button" value="версия для печати" onClick="javascript:print();">
Вот и все, наша страница готова, кнопкой "версия для печати" подключается стиль print1.css. А при печати используется другой стиль - print2.css крЫсотааа!!!
Осталось проверить все это в разных браузерах... и тут... ой...
Я проверила свое творение в последних версиях Opera, Mozilla Firefox, Netscape
и даже для макентош в тех же браузерах плюс Safari.
И все было ничего, хотя конечно размер шрифта
все равно меняется, но я подобрала наиболее подходящий размер для всех браузеров.
Но когда попыталась распечатать всю эту красоту в IE7 (Internet Explorer 7) и тем белее в IE6...
тут я и пожалела что не выбрала первый вариант...
IE растягивал текст при выводе на печать и удваивал отступ.
Хех, почесасала я в затылке, не бросать же такую красоту не доделанной, и подумав еще немного, написала еще один css файл, специально для Internet Explorer - назовем его for_IE.css.
Хотя конечно можно махнуть рукой на тех пользователей, который используют IE, но хочу заметить, что таких в России очень много, статистика не даст мне соврать, так что как говориться... думайте сами...
Итак, проблему с IE будем решать следующим образом. Вынесем правила для IE в отдельный файл и подключим его при помощи специальных HTML-комментариев (Conditional Comments), которые IE, в отличие от остальных браузеров, читает и исполняет.
Например для IE5 пишем:
<!--[if IE 5]> <link rel="stylesheet" type="text/css" href="ie5.css" /> <![endif]-->
Conditional Comments позволяют проверять версию IE, используя логические операторы больше, меньше, равно и их комбинации.
Поэтому удобнее не писать для каждой версии IE свой файл, а при
помощи специфического мета-тега [if lte IE 7], подключить файл
для текущей и более младших версий IE, создав условие [if lte IE 7], т.е. «less then or equal»
(меньше или равно) или [if lt IE 7] «less then» (меньше чем).
Вынося все специфические правила для IE в отдельный файл,
вы избавитесь от необходимости писать перед каждым селектором
или даже правилом всякую ерунду, гарантирующую то, что это поймёт только IE, что согласитесь, очень удобно.
Кроме этого я перестраховалась и использовала фильтрацию еще и внутри самого файла - for_IE.css
Основа данного способа та же: мы подключаем при помощи Conditional Comments файл
для всех версий браузера Internet Explorer.
Обычный селектор и обычные правила внутри этого файла прочтут все версии IE,
а вот селекторы, начинающиеся с конструкции * HTML,
поймут только IE6 и младше. (смотрите код ниже)
Содержание файла for_IE.css примерно такое:
/* этот кусок для всех версий */
#vizible {
display: block;
}
/* этот кусок для версий IE 6 и ниже */
*html #vizible {
display: block;
margin-left: 0px;
width:expression(document.body.clientWidth > 650? "650px":
"auto" );
}
Обратите внимание на строку width:expression(document.body.clientWidth > 650? "650px": "auto" );
Ее я написала как раз потому, что IE6(и более ранние версии) не очень дружит с современными стандартами.
О таких свойствах как max-width, max-height, min-width и, наконец, min-height
CSS2 этот браузер и не догадывается. Чтобы обойти эту досадную оплошность используем эту конструкцию,
которая заменяет max-width.
Для min-width можно использовать такую строку:
width:expression((document.documentElement.clientWidth
|| document.body.clientWidth) < 400? "400px":
"auto");
Для свойства max-height можно сделать так:
height:expression(this.scrollHeight > 200? "200px" : "auto");
А для свойства min-height - так:
height:expression(this.scrollHeight < 200? "200px" :
"auto");
Более подробно об этом можно посмотреть на английском языке в статье SvendTofte "max-width in Internet Explorer" (не поленитесь, найдите сами).
Подключаем файл for_IE.css следующим образом, пишем:
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="for_IE.css"><![endif]-->
Как вы уже догадались правила задаются для IE6 или ниже, и чтобы для других браузеров стили не переписывались, подключать этот файл надо последним!
Все эти полезные штуки с кроссбраузерночтью на нашла в разных статьях в интернете и собрала здесь то, что мне пригодилось.
К сожалению кнопку "версия для печати" в IE вы не увидите, скрипт отказался корректно работать в IE, но зато на печать все выводится как надо, и в других браузерах все работает.
Ну вот, рассказала все что знала :) Пользуйтесь на здоровье.
Пример работы скрипта можете посмотреть
здесь
Ольга М. 30.06.08