Печатаем по-умному или ещё один способ защиты информации. Библиотека I2R. Сегодня мы поговорим о том, как сделать так, чтобы выводить на экран одну web-страницу, а при печати этой страницы на принтере результат был несколько иным. А делается это с помощью CSS.

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

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

CSS-файл (style.css):
@media screen {
	p {
		color: #000000;
	}
}

@media print {
	p {
		color: #ff0000;
	}
}
HTML-файл (index.html):
<html>
 <link rel="stylesheet" type="text/css" href="style.css">
 <body>
  <p>hello</p>
 </body>
</html>

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

Извлекаем выгоду

Теперь немного изменим CSS-файл:

CSS-файл (style.css):
@media screen {
	p {
		display: block;
	}
}

@media print {
	p {
		display: none;
	}
}

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

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

CSS-файл (style.css):
@media screen {
	input {
		display: block;
	}
}

@media print {
	input {
		display: none;

	}
}

А ещё можно добавить текст о том, что «Статья скачана с сайта Site.Ru». Тут лучше сделать всё наоборот – в браузере её нет, а при печати – есть.

Итоговый CSS-файл (style.css):
@media screen {
	input {
		display: block;
	}
	p.advert {
		display: none;
	}
}

@media print {
	input {
		display: none;

	}
	p.advert {
		display: block;
	}
}

HTML-файл (index.html):
<html>
 <link rel="stylesheet" type="text/css" href="style.css">
 <body>
  <p class=advert>Страница скачана с сайта Site.Ru</p>
  … здесь идёт текст, который должен быть распечатан …
  <input type="button" value="Печать" onClick="javascript:print(document);">
 </body>
</html>

Собственно, пример такой реализации Вы можете увидеть у меня на сайте: http://web-build.info/print.php?type=html&id=1102500209. На странице внизу видно строку «Печать :: Закрыть», которая не печатается, зато наверху страницы не видно строки «Статья скачана с web-портала Web-Build.Info», которая появится при печати.

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

Вот, в принципе и всё. Со всеми вопросами, комментариями, уточнениями и т. п. обращайтесь по e-mail: eugene@web-build.info.

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Печатаем по-умному или ещё один способ защиты информации

Извлекаем выгоду