Comments 27
Увы, page-break далеко не везде работает.
Так и не решил эту проблему.
Так и не решил эту проблему.
Бо́льшая проблема, что браузеры не дают контроля над размером печатаемых страниц. Ну и page-break-inside: avoid и page-break-before: avoid поддерживаются чуть менее чем нигде. В результате, page-break'и удобны разве что для красивостей, типа начала раздела с новой страницы.
На моём опыте надо было решить проблему печати больших таблиц без разрывов посреди ячеек. Никакого осмысленного решения, помимо угадывания по браузеру и прогнозу погоды заведомо влезающей в страницу высоты (с сопутствующими большими пробелами в ряде случаев) и вставки разрывов через js, не представляю.
На моём опыте надо было решить проблему печати больших таблиц без разрывов посреди ячеек. Никакого осмысленного решения, помимо угадывания по браузеру и прогнозу погоды заведомо влезающей в страницу высоты (с сопутствующими большими пробелами в ряде случаев) и вставки разрывов через js, не представляю.
page-break-inside'а осталось только в Firefox'е 19-ом дождаться. Реальную работу в других браузерах не проверял.
Аналогично. Тогда, правда, ко мне пришла такая мысль, что ежели CSS начнет двигаться в сторону печатной верстки, то остановится уже будет сложно и нужно будет описать все плюшки верстки печатных изданий.
grokru
Где вы научились этой магии? Я если чесно впервые такое использование CSS вижу
a[href^=http]:after {content:" <" attr(href) ">";Где вы научились этой магии? Я если чесно впервые такое использование CSS вижу
UFO just landed and posted this here
Проблема проверить? Собственно, что и следовало ужидать. Все работает, как и описано в статье, ибо пока Firefox не понимает свойства filter со значением не из SVG, он его и не применит. В этом и смысл всего кода.
Вот знаете за что я люблю Хабр? Вот ты такой весь классный, постоянно учишь что-то, совершенствуешься, думаешь: «пусть я не идеален, но я думаю, что знаю достаточно, что бы делать что-то качественно». И вдруг тебе попадается статья на такую тему, о которой ты не задумывался, не использовал, но которая раскрывает тебе глаза и натягивает веки на затылок. Я конечно не крутой мега-верстальщик, но меня прямо дрож берет, когда все выглядит и делается и объясняется так «чисто» (не могу подобрать лучшее слово). Спасибо большое за статью.
PS Мне так понравилось, что у меня просто синдром какой-то, мне хочется все странички с тольками текста перевести в версии для печати :) Могли бы Вы объяснить, когда это стоит делать, а когда нет? Я понимаю что например на документах, договорах-офертах и любой информации, которую пользователь теоретически захочет распечатать. Но нужно ли например подобное делать для страниц контактов и т.п. Где будет «хорошим тоном» добавить версию для печати?
PS Мне так понравилось, что у меня просто синдром какой-то, мне хочется все странички с тольками текста перевести в версии для печати :) Могли бы Вы объяснить, когда это стоит делать, а когда нет? Я понимаю что например на документах, договорах-офертах и любой информации, которую пользователь теоретически захочет распечатать. Но нужно ли например подобное делать для страниц контактов и т.п. Где будет «хорошим тоном» добавить версию для печати?
Спасибо за статью, как раз вчера озадачился этим вопросом, и тут оп и статья.
UFO just landed and posted this here
Честно говоря, думал под катом будет впрыск для начинающих, а «вон оно как, Михалыч»… После 11 лет в вебе бывают и такие открытия. В избранное и спасибо!
Ребят, а как кнопку сделать, запускающую печать страницы?
Возможность сделать версию для печати радикально отличной от «нормальной» версии открывает простор для злоупотреблений.
Из недавнего — вакансии яндекса при распечатывании теряют секцию с тестом для соискателей.
Из недавнего — вакансии яндекса при распечатывании теряют секцию с тестом для соискателей.
Спасибо за статью. Делал в своем веб приложении возможность печатать информацию сразу в виде бланка (для печати выводились дополнительные поля). Некоторые элементы были по-умолчанию с атрибутом display=hidden, а для @media print элементы показываются
Недавно разбирался с css версии для печати, так для себя и не смог решить следующие проблемы:
1) Необходимо задать формат страницы равным A6.
2) Необходимо задать отступы от края страницы и убрать все лишние колонтитулы.
Видимо, проблема в том, что эти параметры задаются в настройках самого браузера, и не зависят от содержимого таблицы. Можно ли как то управлять этими настройками?
1) Необходимо задать формат страницы равным A6.
2) Необходимо задать отступы от края страницы и убрать все лишние колонтитулы.
Видимо, проблема в том, что эти параметры задаются в настройках самого браузера, и не зависят от содержимого таблицы. Можно ли как то управлять этими настройками?
Сложил в копилку, спасибо.
Для простых сайтов, где стили помещаются в один файл 300 строк всё хорошо, но если их больше…
Подскажите, как отлаживать страницу печати? На сайте множество стилей, одни переопределят другие, поэтому чтобы правильно написать заглушики нужно знать, какой стиль на верхнем уровне. Без средств отладки не обойтись.
Мне не удалось воспользоваться ни Developer Tools в хроме, ни Firebug в фф. Как быть?
Подскажите, как отлаживать страницу печати? На сайте множество стилей, одни переопределят другие, поэтому чтобы правильно написать заглушики нужно знать, какой стиль на верхнем уровне. Без средств отладки не обойтись.
Мне не удалось воспользоваться ни Developer Tools в хроме, ни Firebug в фф. Как быть?
> div#header, div#sidebar, div#footer
давно хотел спросить, зачем перед хэшем ставят название тега? Ведь достаточно просто указать сам айдишник:
#header, #sidebar, #footer
Может, есть какой-то смысл в этом, но мне этот смысл не даётся?..
давно хотел спросить, зачем перед хэшем ставят название тега? Ведь достаточно просто указать сам айдишник:
#header, #sidebar, #footer
Может, есть какой-то смысл в этом, но мне этот смысл не даётся?..
Может быть потому, что header, sidebar и footer в другой разметке (шаблоне) могут быть не div'ами?
Например — браузер не поддерживает HTML5 элементы ну вообще никак, для элементов header, sidebar и footer заданы свои стили, а для div'ов с такими ID для старых браузеров заданы свои. И шаблон выбирается по User Agent.
Это всё из разряда предположений. Условия всегда разные.
Например — браузер не поддерживает HTML5 элементы ну вообще никак, для элементов header, sidebar и footer заданы свои стили, а для div'ов с такими ID для старых браузеров заданы свои. И шаблон выбирается по User Agent.
Это всё из разряда предположений. Условия всегда разные.
>для элементов header, sidebar и footer заданы свои стили, а для div'ов с такими ID для старых браузеров заданы свои
По идее, не должно быть других элементов с таким же id. Если уже есть <div id=header>, то <header id=header> уже не может быть. А если на другой странице элемент с id=header не является div, то на него этот селектор (div#header) не будет применим. Что мне кажется странным.
По идее, не должно быть других элементов с таким же id. Если уже есть <div id=header>, то <header id=header> уже не может быть. А если на другой странице элемент с id=header не является div, то на него этот селектор (div#header) не будет применим. Что мне кажется странным.
UFO just landed and posted this here
Sign up to leave a comment.
CSS печатной версии страницы