15 мин. на подготовку к печати
Нужно ли уделять интерес тому, как страничка смотрится при печати? Проверив некоторое количество страниц наобум, я удостоверился, будто большая часть художников считают, будто недостает, однако я очень нередко уверялся в обратном, чтоб договориться с ними.
Особенно смертельна любезность и опрятность печатной версии для страниц фирм предоставляющих, офф-лайн сервисы, к примеру банков, туристических и строй фирм, консервативная дробь их покупателей нередко заместо посещения интернет-сайта испрашивает печатную версию у собственной секретарши либо друга, кой лучше их обращается с компьютером.
Как я сообразил опосля собственного маленького изучения, большая часть разрабов не достаточно думают о том, как разрешено размножить содержание их интернет-сайта, в лучшем случае CMS поддерживает функцию «версия для печати» частично компенсируя их небрежность, и творя совсем излишние требования к серверу.
Конечно, никак не охото растрачивать время на функцию, коия станет употребляться маленьким процентом юзеров, однако я советую приготовить страничку к печати из-за 15 мин.. будто мы обязаны заполучить сможете узреть, подключив подготовительный просмотр печати в браузере напрямик сейчас.
Технология
Сразу отречемся от генерирования особой версии странички для печати с поддержкою CMS, это никак не разумно и годится разве, будто для тех, кто никак не понимает будто это CSS.
Для такого чтоб сориентировать стили применяемые при печати применяем правило:
@media print { … }
Я люблю вкладывать стили для печати в конце файла, с главными стилями, чтоб печатная версия файла имела похожее с оригиналом оформление.
При включении файла стилей обязана употребляться директива
<link rel="stylesheet" href="style.css" type="text/css" media="all">
обратите интерес на media=«all», данный принадлежность разрешено спустить, однако невозможно применять media=«screen».
Убираем лишнее
При печати никак не необходимы почти все составляющие интернет-сайта, эти как навигация, рекламная инфа, счетчики, сайдбары со всем их содержимым, формы, их необходимо прибрать, указав display:none, для образца у меня выходили таковая строчка:
#sidebar, #main-menu, .counters, .edit-form, .post-meta-single,
.post-buttons, .navigation, #footer p.float-right {
display:none;
}
Чтобы остальные составляющие прекрасно размещались на бумаге 1 из-за иным, занимая всю её ширину, необходимо определить float:none и width:auto.
#header, #wrapper, .column-home,
.column-wide, .column-narrow, #footer {
float:none;
width:auto;
}
Если вы применяете краска либо изображения в фоне их необходимо выключить с поддержкою характеристики background:none;
Типографика
Теперь, как скоро страничка довольно уважительно отражается при печати, добавим некоторое количество штрихов, чтоб она была прекрасной и удобной.
При чтении слова с бумаги наиболее комфортны и обыкновенны шрифты с засечками, потому стоит постановить, какой-никакой из их вы будете применять, я остановился на классической гарнитуре times.
Размер шрифта и вышина строчки также настоятельно просят доборной коррекции.
body {
font-family: times;
font-size:12pt;
}
p, ul, ol {
line-height:14pt;
}
Возможно, стоит незначительно скорректировать габариты заголовков, однако это теснее по вашему желанию.
h1{font-size:1.7em;}
h2{font-size:1.4em;}
h3{font-size:1.2em;}
h4{font-size:1.1em;}
h5{font-size:1em;}
h6{font-size:1em;}
Ссылки
Уберем оттенение гиперссылок, которое при печати ни к чему, для данного разрешено применять border:none либо text-decoration:none в подневольность от такого, какое из параметров использовалось, я люблю border, поэтому будто он размещен чуток ниже подчеркивания и благодаря данному никак не этак шибко усугубляет читабельность.
a { border:none; }
Стоит прибавить адресок странички либо желая бы интернет-сайт, поэтому будто ежели колонтитулы при печати станут отключены, его просто запамятовать, а отыскать страничку по напечатанной версии станет сложно.
Я устроил это с поддержкою характеристики селектора after и характеристики content.
#header h1:after {
content:" www.designformasters.info";
font-size:0.5em;
line-height:2em;
}
Конечно, это никак не действует в IE, однако в нем немало только никак не действует, остается вера на колонтитулы.
Можно показывать адресок в скобках опосля всякой гиперссылки, однако это значительно усугубляет воспринятие слова и наружный разряд странички, этак будто вам решать.
a[href]:after {
content:" (" attr(href) ") "; font-size: 90%;
}
a[href^="#"]:after {
content:""
}
И снова действительно это никак не действует в IE.
Существует превосходный способ подготовки гиперссылок к печати, авралящий во всех браузерах, с поддержкою JavaScript, они намереваются все совместно и вставляются в конце акта, в облике сносок никак не портя читабельность слова, однако это теснее из-за рамками 15 минут.