Capacidades de impresión de encabezado HTML y pie de página

Question

Estoy tratando de proporcionar capacidades completas de impresión de encabezado/pie de página HTML a nuestro proyecto Mediboard.

A largo plazo, sé que el módulo CSS3 Page Media cumplirá con mis necesidades, pero eso es dos o tres años por lo menos.

Así que traté de hacerlo funcionar con capacidades CSS2, y casi funciona como se puede ver en este printable document. Sin embargo, todavía tengo una limitación en el pie de página donde el contenido se imprime debajo del pie de página (consulte las páginas 3-4 con Vista previa de impresión).

Aunque estoy seguro de que el padding-bottom del div.body utiliza para hacer que funcione en Firefox 2.

De todos modos, alguien tiene una pista difícil para que me ayude en ese problema?

EDIT: para dar más detalles, que actualmente tiene los encabezados y pies mediante el uso de elementos posicionados con position: fixed, con top:0 o bottom:0 dependiendo si se trata de un encabezado o un pie de página. Esto funciona bien y, al imprimir, estos elementos se repiten en cada página en la posición correcta (consulte el ejemplo del "documento imprimible"). El único problema es cuando se produce un salto de página, el texto se dibuja detrás de estos elementos (véase la página 3/4)

Edit2: Actualización dirección URL del documento

Answer 1

Usted tendrá que aplicar tipos de medios de comunicación más probable. Por favor, consulte http://www.w3.org/TR/CSS2/media.html para obtener más información. Puede tener una hoja de CSS que no tenga un pie de página flotante para imprimir, y la otra para la pantalla.

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

Eso es un ejemplo.

También puede considerar hacer el pie de página invisible en la página impresa si no lo necesita.

Answer 2

Según mi experiencia, el salto de página no funciona dentro de un elemento. Si un elemento como [p] [/ p] abarca dos páginas impresas, el código HTML no sabe dónde ocurre el corte entre las páginas. Esto se debe a que el usuario puede establecer sus propios márgenes de impresión ya sean de 1 o 1.75 pulgadas o algún otro valor. Los márgenes reales de la impresora no se pueden establecer a través de CSS. CSS solo puede establecer los márgenes y el relleno en la página HTML, hasta los márgenes definidos por la "impresora". No se envía información sobre la configuración de la impresora, como los márgenes, al navegador. Esto explica por qué el contenido se suscribe bajo el encabezado, ya que el navegador no tiene idea de cuándo ocurrió el envío de la página. La solución más fácil es solo tener la información del encabezado en la primera página, pero eso no es lo que quieres. El enfoque de la fuerza bruta es insertar saltos de página [br style = "page-break-before: always;" /] dentro del párrafo en el lugar apropiado, pero esto no es práctico para una gran cantidad de documentos. Además, las diferencias sutiles entre las impresoras, incluidas las del mismo fabricante, difieren sutilmente; por ejemplo, una impresión puede imprimir el contenido que se ajusta a una página, la siguiente impresora puede tener la última línea en la siguiente aunque ambas tengan el mismo margen. configuraciones. Sin embargo, para la información tabular ([tabla] [/ mesa]) la asignación de dicho CSS se vuelve fácil para mantener juntas las tablas. Estoy especulando que uno podría contar los caracteres en una página e insertar dinámicamente saltos de página a través de javascript (fácil, si usó JQuery) para aproximar el enfoque de la fuerza bruta.

Answer 3

Hay una bonita respuesta here que implica tablas. Hace exactamente lo que quiere y supuestamente incluso funciona en IE6.

Answer 4

Parece que CSS2 tiene una regla @ página en la que puede definir el tamaño de página y un margen:

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

-o-

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

Por desgracia, no tienen tiempo para pruébalo, pero me encantaría saber si funciona. Podría usar eso.

Me gusta lo que planeas con el encabezado/pie de página. Buen trabajo :)