Версия для печати темы Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Авторазбивка на A4

Автор: aLEXperimentator 13.9.2014, 16:51

Здравствуйте, уважаемые форумчане! Надеюсь что на этот раз подраздел форума выбран правильно - вёрстка. Хотелось бы задать вопрос о печати веб-страницы. Известно, что за последнее время офисным стандартом фактически стали листы размера A4. Именно они получили наибольшее распространение, именно на таких листах, скорее всего будет распечатана та или иная интернет-страница, ежели вы сядете где-нибудь её печатать. Однако для веб-страниц само понятие "разделения на какие-то ещё другие страницы"отсутствует. Да, существуют div-ы, но это всё-таки не страницы. Поэтому неприятно видеть, как при попытке распечатать с интернета какой-нибудь интересующий материал на бумажный носитель, дабы показать кому-то - фотографии разделяются на две части. Голова оказывается на первой странице, ноги на второй. Начинают появляться "висячие строки", пустые страницы в начале или в конце. Уродуется композиция страницы, её оформление... А можно ли сверстать страницу так, чтобы принтер при печати автоматически разбивал её на правильные a4-блоки? Чтобы веб-страница из принтера выползала на страницах a4 в правильно разбитом виде? В том, как задумал дизайнер, а не как захотелось принтеру? Я делал это через указания стилей для блоков div, которые играли роль отдельных страниц. Но начинались трудности - у IE в настройках по умолчанию при печати сидят отступы 19 мм со всех сторон, и размер блока div надо теперь считать как разность "лист a4 - 2*19 мм", у Сафари к примеру числа были другие. Можно конечно вставить JavaScript, который определит, что за браузер, и по нему подберёт размер div-блока так, чтобы он аккурат садился на а4-лист. Но это вообще-то долго... Может есть какая команда в вёрстке типа style div { width : a4.width ; height : a4.height } /style style div { width : 100% a4 ; height : 100% height } /style Уважаемые форумчане, никто не встречался ни с чем таким?

Автор: s1lver 15.9.2014, 20:26

Цитата Может есть какая команда в вёрстке типа Нет.

Автор: AVA12 16.9.2014, 23:29

Никакой принтер не может печатать на весь лист, поля обязательно будут, и лучше сразу учесть их при верстке версии для печати. Поля шириной 20 мм - вполне нормальное решение. Разбивать динамический контент на страницы вручную, да еще и подгонять размеры скриптом - идея совершенно не вдохновляющая. Лучше задать стили для печатной версии (правило @media print, стили page-break-*, размеры в миллиметрах/пунктах).

Автор: aLEXperimentator 21.9.2014, 18:48

Ну вот к примеру как я делал, если надо было проверить на сервере - с каким браузером имею дело (C#) : Код         if (Request.UserAgent.IndexOf("MSIE") > -1)         {             // Это Интернет-Эксплорер             browserDivHeight = "25.38cm";         }         else             if ((Request.UserAgent.IndexOf("Chrome") > -1) || (Request.UserAgent.IndexOf("Gecko") > -1))             {                 browserDivHeight = "25.1cm";             }; А потом на сервере сформировать все div-ы "первого уровня" нужной ширины и/или высоты, или класса для нужного стиля. То же самое самое в принципе можно сделать на JavaScript в самом браузере, проверив ну скажем navigator.appName. А потом пробежаться каким-нибудь: Код for (var i = 0; i < document.all.length; i++) {       elem = document.all[i];       if ((elem.tagName == "div") && (elem.parentNode == document.body)) ... }; Или сразу получить нужный массив div-ов: Код var divs = document.body.getElementsByTagName(document.body) И потом бегать по элементам divs и выставлять им или явные свойства, или имя класса стилей... Это нетрудно. Тонкость в другом. Мало того что у каждого браузера по умолчанию стоят разные отступы - у IE одни значения, у Мозилл другие, у Сафари третьи. Мало того, что браузеры придуриваются - так последние версии IE в navigator.appName возвращают не IE, а Netscape, и то же самое делает Мозилла - так что приходится повозиться чтобы понять - с кем реально имеешь дело. Так ещё и к тому же компах пользователей могут стоять НЕСТАНДАРТНЫЕ установки - кто-то может сделал отступы не 19 мм а скажем 25 или 10. И поэтому получается так, что страница, выверенная для печати под один браузер - криво вылезает при печати на другом. У него другие отступы, блок div оказался короче, ну короче ну и короче, ну и ладно - размести его и оставь свободное место - так нет же!!! Браузер (или драйвер принтера - кто там их разберёт) начинает печатать на ту же страницу "голову" от следующего div-а, а продолжение идёт на следующую страницу, и так они сдвигаются всё дальше и дальше... Жалко что в языке html, насколько я понял, нет никакой опции чтобы браузер при печати разместил указанные "куски страниц" на указанного формата "куски бумаги", и не пытался бы запихать ещё и кусок другого блока в остаток листа, "зная" что весь блок в этот остаток "не поместится" и его лучше было бы начать с листа нового... В некоторых случаях это бы упростило как вёрстку с сайта, так и печать...

Автор: BaNru 22.9.2014, 05:07

Предлагаю почитать спецификацию и поискать ответ там http://www.w3.org/TR/css-print/ http://www.w3.org/TR/CSS21/page.html http://www.w3.org/TR/css3-page/ Также предлагаю, как и выше уже говорили, воспользоваться специальными стилями для печати media="print" (предпочтительнее) Код <link rel="stylesheet" href="/print.css" type="text/css" media="print"> или @media print Код @media print {   p {}   img {} } Что касается отступов - ответ есть также по ссылкам выше или вкратце http://htmlbook.ru/css/page Всё это, к сожалению, слабо поддерживается. Я не пробовал отрабатывать JS перед печатью. Для современных браузеров можно попробовать использовать CSS3 CALC, хотя думаю это будет нереально всё просчитать на нём. Всё (шрифты, картинки, отступы) надо будет указывать в MM (ну или как у тебя в CM, но это менее удобно). Размер листа мы знаем. Строчки, думаю, тоже можно высчитать примерно (до +/- 1, или предположим 5%) Высоту картинки тоже можно высчитать исходя из ширины страницы. Так как PAGE работает у всех кроме FF, то надо узнать отступы у него и все остальным назначить такие же. Разумеется, если пользователь изменит на свои, то вся схема рухнет. Ко всему этому добавляем перестраховку после картинки 10%. Ну и применяем для разбивки то, что работает у всех http://htmlbook.ru/css/page-break-after:always; Если же на странице оооочень много картинок, а точнее это галерея, то можно подумать и о том, чтобы все картинкам назначить always и не мучиться. Вариант решения на JS предлагают на http://stackoverflow.com/questions/3401229/page-break-insideavoid-equivalent-for-firefox-and-or-ie

Автор: aLEXperimentator 25.9.2014, 01:06

"Чьорт побьери!" (с) (фильм "Бриллиантовая рука" )    Это скорее всего именно то что нужно. Спасибо, BaNru!    Свойство page-break-after это вообще почти что гениально!   Принудительный разрыв страницы при печати. Я не знал о таком. Маленькой ложкой дёгтя выступает то, что судя по приведённой Вами ссылке данное свойство поддерживается только новыми версиями браузеров, не всеми версиями Сафари, не понимает его и браузеры под Андроид, как не поймёт и MacOS. Но по-любому лучше что-то, чем ничего. Пользователей маков на самом деле не так уж и много, да и маки рано или поздно доберутся до такого стандарта, когда это станет стандартом. Также я не думаю, что кто-то начнёт выпускать документ на принтер с телефона    Cкорее всего задача решена. Господа - можно я нажму кнопочку "решено" после того как "обкатаю" в принтере? В пределах недели надеюсь дать ответ.

Автор: BaNru 27.9.2014, 17:22

Цитата данное свойство поддерживается только новыми версиями браузеров, не всеми версиями Сафари, не понимает его и браузеры под Андроид, как не поймёт и MacOS Сафари первой версии вообще не существует в природе уже много лет   На Маках используют сафари, так что скорее всего там есть поддержка. Под iOS скорее подразумеваются Айфоны и айпады, там наверное другой браузер. Т.е. Нет поддержки айфонов и андройдов. Хотя для андройдов куча браузеров и возможно есть в некоторых поддержка. Остальные настольные браузеры поддерживают page-break-after:always; Так что считайте, что на компах работать будет у всех. http://htmlbook.ru/css/page-break-after Вы точно смотрели эту ссылку? Цитата да и маки рано или поздно доберутся до такого стандарта Этому стандарту уже много-много лет, как минимум с 2003 года, если не раньше. До сих пор не добрались и в будущем не надейтесь.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)