Soporte del navegador para los números de página de CSS

Así que estoy al tanto de esta opción: números de página con CSS / HTML .

Parece ser, de lejos, la mejor manera de agregar números de página a una versión impresa de una página, pero no puedo obtener ninguna variación de esto para trabajar en ninguna parte. Lo probé en mi máquina con Windows 7 en Chrome, Firefox e IE9. En función de algunos de los enlaces, parece que esto puede ser compatible con un software más patentado como Prince XML. ¿Esto es compatible con los navegadores web para las versiones impresas?

He intentado hacer solo un archivo html en blanco y al principio agregar esto entre dos tags de estilo:

@page { @bottom-right { content: counter(page) " of " counter(pages); } } 

También lo he simplificado incluso para usar content: "TEXT"; para ver si puedo hacer que aparezca algo. ¿Esto es compatible en cualquier lugar? Con ‘esto’ me @page específicamente a las @page y @bottom-right , ya que he conseguido que el contenido funcione muchas veces.

Esto parece no funcionar más. ¡Parece que solo funcionó por poco tiempo y se eliminó el soporte del navegador!

Los contadores deben restablecerse antes de que puedan ser utilizados, de acuerdo con https://developer.mozilla.org/en-US/docs/CSS/Counters .

Puede establecer su número inicial a lo que sea, el valor predeterminado es 0.

Ejemplo:

 @page { counter-increment: page; counter-reset: page 1; @top-right { content: "Page " counter(page) " of " counter(pages); } } 

… En teoria. En el mundo real, solo PrinceXML lo admite.

También he intentado implementar medios paginados y he encontrado, de acuerdo con esta página de Wikipedia, que todavía no hay compatibilidad con el navegador para los cuadros de margen. ¡No me extraña que no funcione!

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

Ver la tabla, Gramática y Reglas, sección de márgenes. Los cuadros de márgenes son lo que se necesita para numerar las páginas y ejecutar encabezados y pies de página. Conseguir esto implementado me ahorraría la sobrecarga de tener que convertir los medios impresos a PDF.

No uso @page, pero obtuve números de página de CSS puro para trabajar en Firefox 20:

http://jsfiddle.net/okohll/QnFKZ/

Para imprimir, haga clic con el botón derecho en el cuadro de resultados (parte inferior derecha) y seleccione

Este Marco -> Imprimir Marco …

El CSS es

 #content { display: table; } #pageFooter { display: table-footer-group; } #pageFooter:after { counter-increment: page; content: counter(page); } 

y el HTML es

 
multi-page content here...

Via Mozilla, ( Imprimiendo un documento )

Esto pone un encabezado y un pie de página en cada página impresa. Esto funciona bien en Mozilla, pero no tan bien en IE y Chrome.

    Print sample    

Section A

This is the first section...

Section B

This is the second section...

El CSS:

 /*** Print sample ***/ /* defaults for screen */ #print-head, #print-foot { display: none; } /* print only */ @media print { h1 { page-break-before: always; padding-top: 2em; } h1:first-child { page-break-before: avoid; counter-reset: page; } #print-head { display: block; position: fixed; top: 0pt; left:0pt; right: 0pt; font-size: 200%; text-align: center; } #print-foot { display: block; position: fixed; bottom: 0pt; right: 0pt; font-size: 200%; } #print-foot:after { content: counter(page); counter-increment: page; }