CSS print framework

7 April, 2008

XHTML/CSS, Полезности

Пафосное название для моего обычного стандартного print.css который я всюду инклюдю.

Несколько общих правил для печатных стилей, которые будет легко дополнить своими.

Разумеется, по-хорошему, каждый проект нуждается в своем печатном стиле. Но, на деле, когда вы верстаете 10 (вы монстр!) сайтов в неделю, такой вот шаблон print.css становится приятным бонусом, и знаком вашего профессионализма.

Файл состоит из нескольких условных групп правил. Сложного нет ничего. Просто экономлю мировую энтропию, чтобы кто-то не парился и украл у меня этот файл. =)

Общие стили

Шрифты и цвета. При печати лучше смотрится черный на белом, и текст с засечками:

  1. body {
  2. margin:.2in .55in; /*отступы от края страницы, для красоты*/
  3. padding:0;
  4. background:#fff;
  5. color:#000;
  6. font:12pt “Times New Roman”, Garamond, serif;/*шрифт с засечками*/
  7. }
  8. form,
    #secondary,
    #sidebar,
    #nav,
    #whatever {/*прячем ненужные при печати блоки, единственная часть печатного файла которую нужно обновлять на новом проекте*/
  9. display:none;
  10. }

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

Текст

Самые обычные приятные отступы и размеры. h1 самый большой, h2 поменьше, h3 еще меньше. И все прижимаются к тексту (margin-bottom:0):

  1. h1, h2, h3 {
  2. margin:.6em 0 0 0;
  3. font-family:Georgia,Serif;
  4. font-weight:normal;
  5. clear:both;
  6. }
  7. h2 {
  8. font-size:240%;
  9. margin:.3em 0 0 0;
  10. }
  11. h3+blockquote,
    h2+blockquote,
    p+ul{ /*между заголовком и абзацем лучше иметь минимальный отступ*/
  12. margin-top:.2em;
  13. }

Ссылки

Псевдоселектор :after, работает только в “хороших” броузерах. В результате, в печати после текста ссылки добавляет её URL в скобочки.

УРЛ в скобочкахURL

Вот, css-magic:

  1. #content a[href]:after {
  2. content: ” (” attr(href) “) “;
  3. font-size: 90%;
  4. }
  5. #content a[href^=”/”]:after{/*для ссылок вроде href=”/feed/”*/
  6. content: ” (http://cssing.org.ua/” attr(href) “) “;
  7. }
  8. abbr:after,
    acronym:after {/* аббревиатуры */
  9. content: ” (“attr(title)”) “;
  10. }

Результат

Этих стилей достаточно, чтобы ваша страничка начала печататься примерно так:

скриншот версии для печатиВерсия для печати (pdf, 160Kb)

Мне, очень нравится.
Все что нужно дальше, легко добавить в этот фреймворк. Но базу он задает. Обожаю маленькие фреймворки!

Читать дальше

Буду рад если поделитесь своими советами и печатными хаками. С радостью внесу в этот файл, чтобы он был еще более полезным!

XHTML/CSS, Полезности

21 комментариев к “CSS print framework”

Никита Васильев | 1. 7 April, 2008

URL в скобочках для IE:

a {filter: expression(runtimeStyle.filter = ”,
this.appendChild(
document.createTextNode(‘ (‘+this.href+’) ‘)
)
)}

Получите, распишитесь.

Евгений | 2. 7 April, 2008

Если в тексте много ссылок получается нечитабельно, а ведь печатают часто для того чтобы читать было удобнее.

Можно полечить так http://designformasters.info/posts/improving-link-display-for-print/, жаль только требуется JS, можно, конечно, и на сервере сгенерить сноски, но поисковики это не оценят (а может им и все равно).

У меня на сайте сделано как раз как описано в той статье.

Никита Васильев | 3. 7 April, 2008

Наврал я. Не работает. Скобки портят всё, пришлось их убрать. Вот тут рабочий пример: http://elv1s.ru/files/js/ie-content-after.html

Ante | 4. 7 April, 2008

http://npj.ru/seminar/printversion/
старое доброе

akella | 5. 8 April, 2008

Спасибо Никита, спасибо Ante, спасибо Евгений! Добавил линки в пост. Ситуация с кучей ссылок в посте, имхо, конечно редкая, но решение просто суперское!

Я если честно против этих хаков для ИЕ, и джаваскриптов. Это из серии 30килобайтовый джаваскрипт эмулирующий CSS3… В фреймворк — лучше не добавлять :). Я очень ценю простоту. Но на живых проектах, да, нужно, не поспоришь. Все же склонен рассматривать это (ссылки в скобочках) как мелкую приятность =)

Впрочем, это лишь моё мнение.

PS: Классный сайт и проекты, Никита! =)

Никита Васильев | 6. 8 April, 2008

Спасибо, Юрий!

Я так и не понял как скормить IE круглые скобки. Однако квадратные «[]» он съел.

Junior | 7. 8 April, 2008

Отличный обзор, добавлю в закладки.

Я часто применяю классы для подготовки страницы для печати. На макетах бывает множество элементов которые печатать не нужно. Поэтому на этапе разметки кода (или постпроцессом) каждому такому элементу ставим класс .noprint а в стилях пишем .noprint {display: none;}. Таким образом мы избавляемся от перечисления ID элементов или прочих селекторов.

В качестве особо продвинутой техники можно произвести расстановку класса .nopda совместно с классом .noprint. Бывает, что в версии для PDA нужны некоторые элементы, которые отключены в версии для печати (навигация, например), но при этом некоторые элементы все же надо отключить. И комбинированием свойст для этих двух классов добиваемся нужного состава страниц.

Вот как-то так. :)

c0nst | 8. 8 April, 2008

Юрец, это ты был вдохновлен моим опен-сорсным начинанием?
Кстати, мне для проекта нужнен был простенький css-framework. Хотел сначала typography скачать, но теперь выбор очевиден.

Vasily Polovnyov | 9. 10 April, 2008

А ещё полезно и логично убирать вообще все формы form{display: none}

akella | 10. 10 April, 2008

Спасибо Василий! Отличный совет, добавил во фреймворк убирание форм..

Волошин Сергей | 11. 16 April, 2008

Никита Васильев,
кажется я смог решить проблему с круглыми скобками, вот демка:
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/

Никита Васильев | 12. 18 April, 2008

Сергей, спасибо!

Так и знал, что копать надо в эту сторону.

Максим | 13. 14 May, 2008

Мне понравилось! А главное, все очень просто ;) Спасибо за файлик!

Луч Надежды | 14. 19 May, 2008

Спасиб. Познавательно.

бизнес-план | 15. 19 May, 2008

Очень полезно для начинающих типа меня, спасибо за пост!

Сергей | 16. 22 May, 2008

Отличный шаблончик! Обязательно пригодится.

Vladimir | 17. 17 June, 2008

Akella, спасибо за идею… Почему же я раньше до этого не додумался? :-)

Один вопрос: разве Юзверь-Агент не будет игнорировать margin у body? Ведь в CSS 2.1, если я не ошибаюсь, для этих целей элемент @page?

akella | 18. 17 June, 2008

Гм, ну на данный момент не игнорирует =). А о том что должен, я честно говоря и не знал :-[

Рад что знания оказались полезными!

Принтер тоже Веб-дизайн. | 19. 26 August, 2008

[…] http://cssing.org.ua/2008/04/07/css-print-framework/ […]

Пингвин | 20. 28 August, 2008

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

Эд | 21. 14 August, 2009

“Просто экономлю мировую энтропию, чтобы кто-то не парился и украл у меня этот файл. =)”
Уважаю :)
Файл действительно помог, спасибо (хотя я конечно не делаю 10 сайтов в неделю =)

Оставить комментарий