В печать!

фоны для сайта

ОНИ ВАМ УЖЕ ВСТРЕЧАЛИСЬ: ссылки, говорящие "версия для печати" или что-то подобное. Всякий раз, щелкая по этим ссылкам, вы получаете особый документ, содержащий всё ту же информацию, но с другим расположением элементов и, возможно, другой разметкой.

Это значит, что кто-то вручную или автоматически с помощью скрипта взял исходный документ и, сняв с него всё лишнее, создал его копию, более удобную для печати. Может быть подобной работой приходилось заниматься и вам.
Решение - таблицы стилей для печати

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

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

Сегодня вы можете взять любой (X)HTML-документ и подготовить его к печати с помощью стилевой таблиц, не прикасаясь к разметке. И вот в прошлое уходят проблемы с созданием и синхронизацией двух версий документа - одной для экрана, другой - для печати. И что самое приятное: сделать это проще простого. (Более подробную информацию об основных принципах создания media-ориентированных таблиц стилей можно прочитать в статье "Print Different" на сайте meyerweb.com.).

Давайте посмотрим, как сайт "A List Apart" обрёл таблицу стилей для печати, умело обойдя ошибки броузеров, и в конце концов улучшил внешний вид распечатки страницы.
Обходим ошибку с плавающими элементами

Как можно прочитать на странице "Известные ошибки" на сайте "A List Apart" или на странице Bugzilla entry #104040, броузеры семейства Gecko, такие как Netscape 6.x или Mozilla, имеют проблему с печатью длинных "плавающих" блоков (long floated elements). Если плавающий элемент вышел за пределы печатной страницы, то оставшаяся часть полностью пропадает, так и не появившись на следующей странице.

Если ваш сайт похож на "A List Apart", т.е. статьи в нём заключаются в один большой плавающий блок, то это значит, что читатели при распечатке получат лишь первую страницу статьи.

Решение, как и следовало ожидать, заключается в отмене свойства "плавающий" у блока с текстом перед печатью. Если вкратце, для всех плавающих элементов устанавливается стилевое правило "float: none". Сделав это, вы вернёте все плавающие элементы к обычному виду, и документ будет напечатан так, как и предполагалось - страница за страницей вплоть до самого конца.

Итак, именно это я и предложил сделать Зельдману для ALA, и, как только он это сделал, проблема с печатью исчезла. У броузеров семейства Gecko эта ошибка по-прежнему не исправлена (на момент написания статьи), но всё же её можно легко обойти предложенным выше способом.
В путь

Ниже представлена "печатная" таблица стилей, с помощью которой "A List Apart" решил проблему печати плавающих элементов:
#menu {
display: none;
}

#wrapper, #content {
width: auto;
border: 0;
margin: 0 5%;
padding: 0;
float: none !important;
}

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

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

Если посмотреть на содержимое тега <head> новых статей на сайте ALA, мы обнаружим (в гуще начинки) следующие строки:
<style type="text/css" media="all">
@import "nucss2.css";
</style>

<link rel="stylesheet"
type="text/css"
media="print" href="print.css" />

У нас есть файл таблицы стилей, print.css, применение которого для печатных устройств "print" было оговорено значением атрибута "media". Файл таблицы стилей nucss2.css, который импортируется с помощью конструкции @import дабы скрыть его от Navigator 4.x, будет использован при отображении страницы на любом устройстве вывода (атрибут media="all"). Это может быть дисплей, принтер, проектор, синтезатор речи и так далее. Разойдясь, мы могли бы записать в таблицу стилей для печати директивы для фонового цвета страницы и указать шрифты в пикселях.

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

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

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

Так как принтеры не печатают белым цветом, сделаем фон страницы белым. Также нужно удалить все фоновые изображения, которые использовались при выводе страницы на экран.

Если мы призовем на помощь свойство background, мы одним махом решим обе проблемы. Чтобы сделать решение более гибким, зададим для элемента "body" белый фон, а элементы "wrapper" и "content" пусть имеют прозрачный фон (и тем самым через них будет проступать белый цвет "body"):
body {
background: white;
}

#menu {
display: none;
}

#wrapper, #content {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent;
}

Задание цвета переднего плана (цвет шрифта) не было абсолютно необходимым, но лучше не забывать об этом. Итак, сейчас у нас есть два "неплавающих" элемента (#wrapper, #content) с прозрачным фоном, и страница - с белым фоном.

Вас может взволновать то, как Navigator 4.x обходится со значением "transparent", но выше нос: NN4.x обращает внимание лишь на таблицы стилей, у которых атрибут "media" имеет значение "screen". Так же как и в случае с директивой @import, наши таблицы стилей для печати всегда сокрыты от подслеповатых глаз Navigator 4. Так что, здесь не о чём беспокоиться.


Источник: http://webmascon.com

Рекомендуем



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


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


Использование фонового изображения для замены текста Этот класс создан для описания общих свойств подменяемых заголовков, что позволяет задать эти общие свойства всего один раз, не прописывая их всякий раз в стилевых свойствах каждого идентификатора id каждого конкретного заголовка