template - Soporte del navegador para los números de página de CSS
print html with css (4)
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
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
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 etiquetas 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.
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.
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.
<!DOCTYPE html>
<html>
<head>
<title>Print sample</title>
<link rel="stylesheet" href="style4.css">
</head>
<body>
<h1>Section A</h1>
<p>This is the first section...</p>
<h1>Section B</h1>
<p>This is the second section...</p>
<div id="print-head">
Heading for paged media
</div>
<div id="print-foot">
Page:
</div>
</body>
</html>
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;
}
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.