Добавление текстового нижнего колонтитула в конец каждой напечатанной страницы при печати веб-страницы

Question

Есть ли способ добавления текста нижнего колонтитула внизу каждой страницы при печати? Например, «Copyright My Company 2010» - я знаю, что, вероятно, есть способ сделать это с помощью фонового изображения с использованием CSS, но я действительно хотел бы использовать текст для этой части, чтобы клиент мог редактировать его. Есть идеи?

Answer 1

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

РЕДАКТИРОВАТЬ Как указано ниже,CSS 2.1 действительно представил @page в качестве способа работы с постраничными носителями, но никогда не реализовывался в обычных браузерах.Итак, как я писал выше, его не существует , хотя это технически неверно.

Вы можете установить жесткие разрывы страниц, например, поместив <div class="page-break"> в приблизительные места.Затем вы можете оформить его с помощью page-break-before:always, чтобы гарантировать, что там произойдет перерыв.

Также есть свойство page-break-after;но тогда вы не знаете, как далеко вниз страницы начинается элемент.Таким образом, когда вам нужно расположить его, единственное, что вы можете использовать, это position:absolute;bottom:0, который не будет прикреплять его к носителю страницы, но к нижней части всего документа.

Если вы используете page-break-before тогда вы знаете, что он всегда появляется вверху страницы.Затем вы можете использовать position:absolute, не задавая top или bottom, что приводит к тому, что оно только вынимается из потока документов.Затем, если вы установите высоту 720pt (10 дюймов), это означает, что у вас есть нижний край, против которого вы можете расположить контент.

Вот как я бы справился с этим:понятия не имею, насколько хорошо браузеры действительно поддерживают это в реальности.Я помню, как играл с разрывами страниц некоторое время назад и в итоге сдался, потому что не мог заставить их работать достаточно надежно.Я подозреваю, что это все еще или невозможно, или очень хакерский и ненадежный.

Answer 2

Рабочий черновик W3C для CSS-модуля с постраничным носителем уровня 3 содержит метод печати на полях.

Попробуйте этот код, но он пока еще не поддерживается.

@page {
     margin: 2cm; 2cm; 2cm; 2cm;
     @bottom-center { content: "Copyright My Company 2010" }
     @top-right { content: counter(page) }
}