CSS print framework
Пафосное название для моего обычного стандартного print.css который я всюду инклюдю.
Несколько общих правил для печатных стилей, которые будет легко дополнить своими.
Разумеется, по-хорошему, каждый проект нуждается в своем печатном стиле. Но, на деле, когда вы верстаете 10 (вы монстр!) сайтов в неделю, такой вот шаблон print.css становится приятным бонусом, и знаком вашего профессионализма.
Файл состоит из нескольких условных групп правил. Сложного нет ничего. Просто экономлю мировую энтропию, чтобы кто-то не парился и украл у меня этот файл. =)
Общие стили
Шрифты и цвета. При печати лучше смотрится черный на белом, и текст с засечками:
- body {
- margin:.2in .55in; /*отступы от края страницы, для красоты*/
- padding:0;
- background:#fff;
- color:#000;
- font:12pt “Times New Roman”, Garamond, serif;/*шрифт с засечками*/
- }
- form,
#secondary,
#sidebar,
#nav,
#whatever {/*прячем ненужные при печати блоки, единственная часть печатного файла которую нужно обновлять на новом проекте*/ - display:none;
- }
В каждом проекте свои блоки нужно скрывать и показывать, все же остальные правила остаются неизменными.
Текст
Самые обычные приятные отступы и размеры. h1 самый большой, h2 поменьше, h3 еще меньше. И все прижимаются к тексту (margin-bottom:0):
- h1, h2, h3 {
- margin:.6em 0 0 0;
- font-family:Georgia,Serif;
- font-weight:normal;
- clear:both;
- }
- h2 {
- font-size:240%;
- margin:.3em 0 0 0;
- }
- …
- h3+blockquote,
h2+blockquote,
p+ul{ /*между заголовком и абзацем лучше иметь минимальный отступ*/ - margin-top:.2em;
- }
Ссылки
Псевдоселектор :after, работает только в “хороших” броузерах. В результате, в печати после текста ссылки добавляет её URL в скобочки.
URL
Вот, css-magic:
- #content a[href]:after {
- content: ” (” attr(href) “) “;
- font-size: 90%;
- }
- #content a[href^=”/”]:after{/*для ссылок вроде href=”/feed/”*/
- content: ” (http://cssing.org.ua/” attr(href) “) “;
- }
- abbr:after,
acronym:after {/* аббревиатуры */ - content: ” (”attr(title)”) “;
- }
Результат
Этих стилей достаточно, чтобы ваша страничка начала печататься примерно так:
Версия для печати (pdf, 160Kb)
Мне, очень нравится.
Все что нужно дальше, легко добавить в этот фреймворк. Но базу он задает. Обожаю маленькие фреймворки!
Читать дальше
- Мой CSS print фреймворк (осторожно! размер файла 1.3Kb)
- CSS Design: Going to Print
- CSS Styling for Print and Other Media
- Printing the Web: Solutions and Techniques
- На New York Times, кстати продают места в печатной версии (вверху справа) :)
- Печатные стили для CSSing — типичный пример моего фреймворка в работе, добавлено несколько специфических правил для блога
- Подбор материалов c семинара npj — очень всеобъемлющий материал, несмотря на возраст.
- Javascript для вынесения ссылок из текста в конец печатной версии
- Замена :after для IE (expression), нюанс — нет скобочек
Буду рад если поделитесь своими советами и печатными хаками. С радостью внесу в этот файл, чтобы он был еще более полезным!
URL в скобочках для IE:
a {filter: expression(runtimeStyle.filter = ”,
this.appendChild(
document.createTextNode(’ (’+this.href+’) ‘)
)
)}
Получите, распишитесь.
Если в тексте много ссылок получается нечитабельно, а ведь печатают часто для того чтобы читать было удобнее.
Можно полечить так http://designformasters.info/posts/improving-link-display-for-print/, жаль только требуется JS, можно, конечно, и на сервере сгенерить сноски, но поисковики это не оценят (а может им и все равно).
У меня на сайте сделано как раз как описано в той статье.
Наврал я. Не работает. Скобки портят всё, пришлось их убрать. Вот тут рабочий пример: http://elv1s.ru/files/js/ie-content-after.html
http://npj.ru/seminar/printversion/
старое доброе
Спасибо Никита, спасибо Ante, спасибо Евгений! Добавил линки в пост. Ситуация с кучей ссылок в посте, имхо, конечно редкая, но решение просто суперское!
Я если честно против этих хаков для ИЕ, и джаваскриптов. Это из серии 30килобайтовый джаваскрипт эмулирующий CSS3… В фреймворк — лучше не добавлять :). Я очень ценю простоту. Но на живых проектах, да, нужно, не поспоришь. Все же склонен рассматривать это (ссылки в скобочках) как мелкую приятность =)
Впрочем, это лишь моё мнение.
PS: Классный сайт и проекты, Никита! =)
Спасибо, Юрий!
Я так и не понял как скормить IE круглые скобки. Однако квадратные «[]» он съел.
Отличный обзор, добавлю в закладки.
Я часто применяю классы для подготовки страницы для печати. На макетах бывает множество элементов которые печатать не нужно. Поэтому на этапе разметки кода (или постпроцессом) каждому такому элементу ставим класс .noprint а в стилях пишем .noprint {display: none;}. Таким образом мы избавляемся от перечисления ID элементов или прочих селекторов.
В качестве особо продвинутой техники можно произвести расстановку класса .nopda совместно с классом .noprint. Бывает, что в версии для PDA нужны некоторые элементы, которые отключены в версии для печати (навигация, например), но при этом некоторые элементы все же надо отключить. И комбинированием свойст для этих двух классов добиваемся нужного состава страниц.
Вот как-то так. :)
Юрец, это ты был вдохновлен моим опен-сорсным начинанием?
Кстати, мне для проекта нужнен был простенький css-framework. Хотел сначала typography скачать, но теперь выбор очевиден.
А ещё полезно и логично убирать вообще все формы form{display: none}
Спасибо Василий! Отличный совет, добавил во фреймворк убирание форм..
Никита Васильев,
кажется я смог решить проблему с круглыми скобками, вот демка:
http://svoloshyn.org.ua/lab/ie-content-after2.html
a {background-image:expression(this.runtimeStyle.backgroundImage = 'none',
this.appendChild(
document.createTextNode(' ' + String.fromCharCode(40) + this.href + String.fromCharCode(41) + ' ')
)
)}
ссылка по теме: http://www.developers.org.ua/archives/zerkella/2007/11/07/specsimvoli-v-javascript/
Сергей, спасибо!
Так и знал, что копать надо в эту сторону.