Здравствуйте, уважаемые форумчане!

Надеюсь что на этот раз подраздел форума выбран правильно - вёрстка. Хотелось бы задать вопрос о печати веб-страницы.

Известно, что за последнее время офисным стандартом фактически стали листы размера 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

Уважаемые форумчане, никто не встречался ни с чем таким?

Нет.

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

Ну вот к примеру как я делал, если надо было проверить на сервере - с каким браузером имею дело (C#) :

А потом на сервере сформировать все div-ы "первого уровня" нужной ширины и/или высоты, или класса для нужного стиля.

То же самое самое в принципе можно сделать на JavaScript в самом браузере, проверив ну скажем navigator.appName. А потом пробежаться каким-нибудь:

Или сразу получить нужный массив div-ов:

И потом бегать по элементам divs и выставлять им или явные свойства, или имя класса стилей...

Это нетрудно. Тонкость в другом. Мало того что у каждого браузера по умолчанию стоят разные отступы - у IE одни значения, у Мозилл другие, у Сафари третьи. Мало того, что браузеры придуриваются - так последние версии IE в navigator.appName возвращают не IE, а Netscape, и то же самое делает Мозилла - так что приходится повозиться чтобы понять - с кем реально имеешь дело. Так ещё и к тому же компах пользователей могут стоять НЕСТАНДАРТНЫЕ установки - кто-то может сделал отступы не 19 мм а скажем 25 или 10.

И поэтому получается так, что страница, выверенная для печати под один браузер - криво вылезает при печати на другом. У него другие отступы, блок div оказался короче, ну короче ну и короче, ну и ладно - размести его и оставь свободное место - так нет же!!! Браузер (или драйвер принтера - кто там их разберёт) начинает печатать на ту же страницу "голову" от следующего div-а, а продолжение идёт на следующую страницу, и так они сдвигаются всё дальше и дальше...

Жалко что в языке html, насколько я понял, нет никакой опции чтобы браузер при печати разместил указанные "куски страниц" на указанного формата "куски бумаги", и не пытался бы запихать ещё и кусок другого блока в остаток листа, "зная" что весь блок в этот остаток "не поместится" и его лучше было бы начать с листа нового...

В некоторых случаях это бы упростило как вёрстку с сайта, так и печать...

Это сообщение отредактировал(а) aLEXperimentator - 21.9.2014, 18:53

Предлагаю почитать спецификацию и поискать ответ там
http://www.w3.org/TR/css-print/
http://www.w3.org/TR/CSS21/page.html
http://www.w3.org/TR/css3-page/


Также предлагаю, как и выше уже говорили, воспользоваться специальными стилями для печати media="print" (предпочтительнее)

или @media print


Что касается отступов - ответ есть также по ссылкам выше или вкратце тут
Всё это, к сожалению, слабо поддерживается.

Я не пробовал отрабатывать JS перед печатью. Для современных браузеров можно попробовать использовать CSS3 CALC, хотя думаю это будет нереально всё просчитать на нём.
Всё (шрифты, картинки, отступы) надо будет указывать в MM (ну или как у тебя в CM, но это менее удобно).
Размер листа мы знаем. Строчки, думаю, тоже можно высчитать примерно (до +/- 1, или предположим 5%)
Высоту картинки тоже можно высчитать исходя из ширины страницы.
Так как PAGE работает у всех кроме FF, то надо узнать отступы у него и все остальным назначить такие же.
Разумеется, если пользователь изменит на свои, то вся схема рухнет.
Ко всему этому добавляем перестраховку после картинки 10%.
Ну и применяем для разбивки то, что работает у всех
page-break-after:always;

Если же на странице оооочень много картинок, а точнее это галерея, то можно подумать и о том, чтобы все картинкам назначить always и не мучиться.

Вариант решения на JS предлагают на stackoverflow.com

"Чьорт побьери!" (с) (фильм "Бриллиантовая рука" )   

Это скорее всего именно то что нужно. Спасибо, BaNru!   
Свойство page-break-after это вообще почти что гениально!   Принудительный разрыв страницы при печати. Я не знал о таком.

Маленькой ложкой дёгтя выступает то, что судя по приведённой Вами ссылке данное свойство поддерживается только новыми версиями браузеров, не всеми версиями Сафари, не понимает его и браузеры под Андроид, как не поймёт и MacOS. Но по-любому лучше что-то, чем ничего. Пользователей маков на самом деле не так уж и много, да и маки рано или поздно доберутся до такого стандарта, когда это станет стандартом. Также я не думаю, что кто-то начнёт выпускать документ на принтер с телефона    Cкорее всего задача решена.

Господа - можно я нажму кнопочку "решено" после того как "обкатаю" в принтере? В пределах недели надеюсь дать ответ.     

Сафари первой версии вообще не существует в природе уже много лет  
На Маках используют сафари, так что скорее всего там есть поддержка. Под iOS скорее подразумеваются Айфоны и айпады, там наверное другой браузер.
Т.е. Нет поддержки айфонов и андройдов. Хотя для андройдов куча браузеров и возможно есть в некоторых поддержка.

Остальные настольные браузеры поддерживают
page-break-after:always;
Так что считайте, что на компах работать будет у всех.
http://htmlbook.ru/css/page-break-after
Вы точно смотрели эту ссылку?



Этому стандарту уже много-много лет, как минимум с 2003 года, если не раньше.
До сих пор не добрались и в будущем не надейтесь.

Это сообщение отредактировал(а) BaNru - 27.9.2014, 17:22