Экранные и печатные версии логотипа новостей ABC (abc.net.au/news) изображены сверху и снизу соответственно

Пример сообщения, которое отображается только в печати

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

 #content:before {
    content: "Thank you for printing this page. Do come back to foo.tld, we are constantly adding new and interesting articles and tutorials. Note: To help the environment we have automatically removed navigation and other unnecessary elements from the page.";
    display: block;
    border: 1px solid #ccc;
    font-style: italic;
    margin: 0 0 1em;
    padding: 8px 10px;
}

— CSS выше печатает сообщение в верхней части страницы с рамкой и некоторыми отступами. Это сообщение может быть изменено на что угодно в зависимости от аудитории сайта.

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

Размещение для интерактивных элементов

Так что насчет всех этих причудливых элементов, управляемых JavaScript, которые попадают в контент, такой как фотогалереи и вкладки? Эти элементы часто добавляют встроенные стили для циклического перемещения по контенту, это может быть простой

 display: none;

декларация, чтобы скрыть то, что не показывается.

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

Возьмем в качестве примера фотогалерею. Зайдите на сайт jQuery Tools и ознакомьтесь с демонстрацией их прокручиваемой галереи изображений в действии. Если вы откроете Firebug или ваш любимый аналог и нацелитесь на содержащий его элемент фотографий, вы увидите, что плагин jQuery Tools Scrollable добавляет встроенное «левое» объявление, которое перемещает и толкает галерею влево и вправо.

 ``<div class="scrollable"> <br />
   <!-- root element for the items -->

<div class="items">
      <!-- 1-5 -->
      <div>
         <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg">
         Y
      </div>
      <!-- 5-10 -->
      <div>
         <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg">
         Y
      </div>
      <!-- 10-15 -->
      <div>
         <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg">
         Y
      </div>
   </div>

</div>``

Теперь, чтобы распечатать это подходящим способом, давайте начнем с объявления с важным утверждением, которое переопределяет этот встроенный стиль:

 .scrollable .items {
    left: auto !important;
}

При этом на месте фотографии будут печататься одна под другой. Давайте вернем это к макету фотогалереи, разместив их рядом:

 .scrollable .items {
    left: auto !important;
    overflow: hidden;
}

 .scrollable .items div {
    float: left;
    margin: 0 10px 0 0;
}

Предварительный просмотр со стилем

С тех пор, как я впервые увидел Safari Reader , я удивлялся, как посетитель может щелкнуть ссылку для печати и увидеть лист бумаги А4, скользящий по экрану, включая предварительный просмотр того, что он собирается напечатать. Затем я начал думать о достоинствах плагина jQuery, который легко развернуть на любом сайте, где есть таблица стилей для печати. То, что показывало посетителям то, что они собирались напечатать, прежде чем они напечатали, не нуждаясь в «печатной версии» сайта.

Это именно то, что я написал. Представляем плагин jQuery с именем Print Preview, который выполняет именно то, что написано в банке, с демонстрацией загрузки.
Нажмите на кнопку предварительного просмотра в правом верхнем углу, или для получения дополнительного бонуса просто нажмите клавишу «P» на клавиатуре.

Получите настройку в три этапа:

1. Настройка таблицы стилей печати
2. Включая плагин jQuery и немного CSS (в комплекте) для оформления скользящего лайтбокса / модального окна.
3. Добавление ссылки на предварительный просмотр и инициализация плагина

Для получения полных инструкций по использованию перейдите на страницу GQub для подключаемого модуля jQuery Print Preview .

Чего же ты ждешь?

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

• Разработайте дополнительные элементы, такие как таблицы. Для некоторых идей прочитайте статью Джонатана Снука под названием « Потрясающие сказки с CSS» на Sitepoint.
• Если вы применяете таблицу стилей для печати к сайту с комментариями, почему бы не заглянуть в «разрыв страницы до: всегда;», чтобы переместить все комментарии на новую страницу — предлагая посетителям возможность оставлять последние страницы при печати
• Приспосабливайтесь к JS, перекрывая любые стили, управляемые JS, такие как непрозрачность. Посмотрите демонстрацию выше для некоторых идей.

Все идеи в этой статье можно увидеть в этой демонстрации .

Что еще вы сделали с печатными таблицами стилей?
Какие сумасшедшие вещи вы видели, как люди печатали из Интернета?
Как вы думаете, искусство писанины на бумаге будет утерянным искусством в ближайшие годы?