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

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

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

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

Технология

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

Для того чтобы указать стили используемые при печати используем правило @media print { … }.

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

При подключении файла стилей должна использоваться директива

<link rel="stylesheet" href="/path/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;
}

Чтобы оставшиеся элементы красиво располагались на бумаге один за другим, занимая всю ее ширину, нужно установить 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:" (http://www.designformasters.info" attr(href) ") ";
}

a[href^="#"]:after {
    content:""
}

И опять таки это не работает в IE.

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

Основой для этого материала стала статья ALA's New Print Styles