Если на вашем сайте есть хоть какая-то информационная составляющая, вы должны предусмотреть для пользователя возможность распечатывать страницы. Иногда человеку проще распечатать что-то, нежели пытаться копировать к себе на компьютер. И даже если у вас на сайте нет кнопки «распечатать», пользователь всегда найдет её в своём браузере.
Добавить стили для печати можно всего одной строчкой.
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
Но как сделать так, чтобы при выводе на лист бумаги всё было читабельно, все элементы влезали, а мы могли удобно прочитать текстовую информацию??
- Очень часто в погоне за современными тенденциями макеты ограничивают в ширину, например, в 1000 пикселов. Это нормально, но при попытке вывести на печать, скорее всего мы увидим обрезанную страницу, такой текст непригоден для чтения. В настройках браузера можно выставить масштаб, однако это лишние телодвижения, от которых мы сейчас избавимся.
Ключ к правильной верстке макета для печати – это процентное представление ширины блоков. Отступы уберем, т.к браузер сам подставит пограничные поля. Если ваш макет имеет несколько колонок, стоит расположить их в одну – убрать float, контент отобразится друг под другом.
- Некоторые блоки необходимо скрыть. Зачем пользователю видеть счетчики, панель навигации и тд? Блок с контактами и логотип иногда стоит оставить, это полезная информация, которая поможет связаться с вами оффлайн, да и много места она не займет.
- Не стесняйтесь убирать картинки с фона, белый фон и черный шрифт – самое читабельное сочетание.
body, #main, #content, .column, #articletext, #footer { float: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; }
Теперь какой бы масштаб не стоял у пользователя, страничка выйдет в полном объеме на листе бумаге.
Для проверки верстки в версии для печати пользуйтесь:
- плагин для Mozilla: Web Developer Toolbar. Вкладка CSS → Display Styles By Media Type → Display Print Styles. Думаю, если поискать, для других браузеров найдется нечто подобное.
- Дебаггер браузера