Как верстается версия для печати?

Question

[Сергей]

Как верстать версию для печати?

Comments

[Юрий Лобанов]

Итак, Вас ни один ответ не устроил? Я смотрю, Вы вообще не любитель благодарить отвечающих.

Answer 1

[Иван Беленков]

Перевёрстывать ничего не надо, нужен только отдельный файл css, в котором будет прописано, какие блоки вы не хотите отображать в распечатке(например, проставить таким блокам класс noprint, и прописать в print.css noprint{display:none;}). файл поместить на страницу в <link media='print' ... />.

Comments

[Trow_eu]

что делает этот код?
я подключаю просто print.css с @media print, в чем разница? все равно надо указывать медиа в css, или медиа в линке заменяет это же выражение в css и там просто прописываются стили?
если логической разницы нет, то есть ли разница в фен-шуйности и как лучше? =)

[Сергей]

ясно, конечно можно и не добавлять класс нопринт а просто при печати подключить стили print.css и в нем уже всякие header, footer {display: none;} будут прописаны. А вот если разметка и расположение элементов сильно отличается от версии для печати, то можно будет отдельно сверстать вресию для печати и программист уже сам все сделает или надо только через убирание блоков это делать, как вобще правильнее и есть ли в этом какойто стандарт?

[Иван Беленков]

@Trow_eu , во-первых - медиазапросы в css поддерживаются не всеми браузерами(например, до сих пор актуальным IE8), во-вторых - в случае подключения в css, весь код стилей для распечатки загружается всегда(хотя пользователь, скорее всего, и не будет никогда эту страницу распечатывать), а в случае подключения отдельным файлом - загружается только, когда послан запрос на печать. И да, media в линке заменяет @media в css.

[Trow_eu]

@IoannGrozny Спасибо! смысл приличный, надо не забыть сменить привычку =)

[Trow_eu]

@serzhei я храню заготовку цсс, в котором убраны целиком хедер, футер, навигация, сайдбары, фоны, установлен Arial нормального размера для h1-h6, p, a, черный цвет, ссылки просто подчеркнуты - минимум лишнего, максимум читабельности, при необходимости слегка допиливаю под нужды.

[Иван Беленков]

@serzhei , если у вас разметка сильно отличается от версии для печати, то, скорее всего, вы вообще печатаете не эту страницу. Пользователь как правило хочет увидеть на распечатке то же самое, что он отправлял на печать. Представьте ситуацию, вы создали в MS Word красивый документ, отправили на печать, а на распечатке - заголовки переехали вниз страницы, нумерация страниц вдруг стала древнеримской, а весь текст выровнялся по правому краю. Не правда ли, неудобно? Стандарт в этом один, дайте пользователь точно то, что он видит в браузере, убрав лишь совершенно ненужные ему элементы(всякие меню, кнопки и прочие функциональные элементы) и цветовое разнообразие(уберите все лишние цвета и текстуры, оставив белый фон и чёрный текст).

Answer 2

[Юрий Лобанов]

Используйте media print.
Статья в помощь habrahabr.ru/post/160997

upd:
@serzhei почему не реагируете на мой ответ? Я как раз Вам и ответил на вопрос в комментарии - верстать ничего заново не надо с использованием медиа принт, так сделано в twitter bootstrap. Соответственно, для скрытия блоков (или наоборот - появления при печати) создайте два класса, в print-hide и print-visible.

Answer 3

[Дамир Рысаев]

Есть очень крутое видео с WSD'13. Как в яндексе делали страницу распечатки карты.
В видео ещё рассказывают про разные трюки, на какие грабли наткнулись и как не надо делать.
Ссылка - Распечатай Яндекс.Карты

Comments

[Сергей]

если по быстрому узнать, версия для печати верстается отдельно или берется обычная страница сайта и к ней подключаются стили print.css в которых прописывается убирание хедера, футера меню и т.п.?

Answer 4

[Володимир Годяк]

Я использую print jquery,
а если не подходить тогда только media print