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

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

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

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

Хотя я уверен, что padding-bottom div.body использовал, чтобы заставить его работать в Firefox 2.

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

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

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

Ответ 1

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

Ответ 2

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

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

-или -

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

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

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

Ответ 3

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

Ответ 4

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

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

Это пример.

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