Возможности печати верхнего / нижнего колонтитула HTML

Question

Я изо всех сил стараюсь предоставить полные возможности печати верхнего / нижнего колонтитула HTML нашему проекту Mediboard.

В долгосрочной перспективе я знаю, что CSS3 Page Media удовлетворит мои потребности, но это, по крайней мере, через два-три года.

Поэтому я попытался заставить его работать с возможностями CSS2, и он почти работает, как вы можете видеть на этом печатном документе . Тем не менее, у меня все еще есть ограничение на нижний колонтитул, где содержимое печатается под нижним колонтитулом (см. Страницы 3-4 с предварительным просмотром).

Хотя я почти уверен, что нижний слой элемента div.body использовал его для работы в Firefox 2.

В любом случае, у кого-нибудь есть хитрая подсказка, чтобы помочь мне в этой проблеме?

EDIT: Чтобы получить более подробную информацию, в настоящее время у нас есть верхние и нижние колонтитулы с использованием элементов, расположенных с position: fixed, с top:0 или bottom:0 в зависимости от того, является ли это верхним или нижним колонтитулом. Это хорошо работает, и при печати эти элементы повторяются на каждой странице в правильном положении (см. Пример «печатный документ»). Единственная проблема заключается в том, что при разрыве страницы текст рисуется за этими элементами (см. Стр. 3/4)

EDIT2: обновлен URL документа

Answer 1

Похоже, у CSS2 есть правило @page, в котором вы можете определить размер вашей страницы и поле:

@page { size:8.5in 11in; margin: 6em 1em 2em }

-или-

@page { size:auto; margin: 6em 1em 2em }

К сожалению, у меня нет времени, чтобы проверить это, но я хотел бы знать, работает ли он. Я мог бы использовать это.

Мне нравится то, что вы планируете с верхним / нижним колонтитулом. Хорошая работа:)

Answer 2

Есть хороший ответ здесь , который включает таблицы.Он делает именно то, что вы хотите, и, возможно, даже работает в IE6.

Answer 3

По моему опыту, разрыв страницы не работает внутри элемента. Если такой элемент, как [p] [/ p] занимает две печатные страницы, HTML-код не знает, где происходит разрыв между страницами. Это связано с тем, что пользователь может устанавливать собственные поля принтера, равные 1 или 1,75 дюйма, или какое-либо другое значение. Фактические поля принтера не могут быть установлены с помощью CSS. CSS может устанавливать поля и отступы только для страницы HTML - для полей, определенных «принтером». Никакая информация о настройках принтера, таких как поля, не отправляется в браузер. Это объясняет, почему контент подписывается под заголовком, поскольку браузер не знает, когда произошла подача страницы. Самое простое решение - просто разместить заголовок на первой странице, но это не то, что вам нужно. Метод грубой силы заключается в вставке разрывов страниц [br style = "page-break-before: всегда;" /] в пределах абзаца в соответствующем месте, но это не практично для большого количества документов. Кроме того, тонкие различия между принтерами, включая принтеры одного и того же производителя, отличаются незначительно - например, один отпечаток может печатать содержимое, умещающееся только на одной странице, у следующего принтера может быть последняя строка на следующей странице, даже если оба принтера имеют одинаковое поле настройки. Тем не менее, для табличной информации ([таблица] [/ таблица]) назначение такого CSS становится легко хранить таблицы вместе. Я предполагаю, что можно подсчитывать символы на странице и динамически вставлять разрывы страниц с помощью javascript (легко, если вы использовали JQuery), чтобы приблизить подход грубой силы.

Answer 4

Скорее всего, вы захотите реализовать типы мультимедиа.Пожалуйста, смотрите http://www.w3.org/TR/CSS2/media.html для получения дополнительной информации.У вас может быть один лист CSS, у которого нет плавающего нижнего колонтитула для печати, а другой - для экрана.

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

Это пример.

Выможно также рассмотреть вопрос о том, чтобы сделать нижний колонтитул невидимым на распечатанной странице, если он вам не нужен.