¿Cómo hacer una página HTML en páginas de tamaño de papel A4?
¿Es posible hacer que una página HTML se comporte, por ejemplo, como una página de tamaño A4 en MS Word?
Básicamente, quiero poder mostrar la página HTML en el navegador y delinear el contenido en las dimensiones de una página de tamaño A4.
En aras de la simplicidad, supongo que la página HTML sólo contendrá texto (sin imágenes, etc.) y no habrá <br>etiquetas, por ejemplo.
Además, cuando se imprima la página HTML, aparecerá como páginas de papel de tamaño A4.
Hace mucho tiempo, en noviembre de 2005, AlistApart.com publicó un artículo sobre cómo publicaron un libro utilizando únicamente HTML y CSS. Ver: http://alistapart.com/article/boom
Aquí hay un extracto de ese artículo:
CSS2 tiene una noción de medios paginados (piense en hojas de papel), a diferencia de medios continuos (piense en barras de desplazamiento). Las hojas de estilo pueden establecer el tamaño de las páginas y sus márgenes. A las plantillas de página se les pueden dar nombres y los elementos pueden indicar en qué página con nombre quieren imprimirse. Además, los elementos del documento fuente pueden forzar saltos de página. Aquí hay un fragmento de la hoja de estilo que utilizamos:
@page {
size: 7in 9.25in;
margin: 27mm 16mm 27mm 16mm;
}
Al tener una editorial con sede en EE. UU., nos dieron el tamaño de página en pulgadas. Nosotros, como europeos, continuamos con las medidas métricas. CSS acepta ambos.
Después de configurar el tamaño y el margen de la página, necesitábamos asegurarnos de que haya saltos de página en los lugares correctos. El siguiente extracto muestra cómo se generan los saltos de página después de capítulos y apéndices:
div.chapter, div.appendix {
page-break-after: always;
}
Además, usamos CSS2 para declarar páginas con nombre:
div.titlepage {
page: blank;
}
Es decir, la portada debe imprimirse en páginas con el nombre "en blanco". CSS2 describió el concepto de páginas con nombre, pero su valor sólo se vuelve evidente cuando los encabezados y pies de página están disponibles.
De todos modos…
Como desea imprimir A4, necesitará diferentes dimensiones, por supuesto:
@page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
El artículo profundiza en cosas como la configuración de saltos de página, etc., por lo que es posible que desees leerlo en su totalidad.
En su caso, el truco consiste en crear primero el CSS de impresión. La mayoría de los navegadores modernos (>2005) admiten el zoom y ya podrán mostrar un sitio web basado en el CSS impreso.
Ahora, querrás hacer que la visualización web se vea un poco diferente y adaptar todo el diseño para que se ajuste también a la mayoría de los navegadores (incluidos los antiguos anteriores a 2005). Para eso, tendrás que crear un archivo CSS web o anular algunas partes de tu CSS impreso. Al crear CSS para visualización web, recuerde que un navegador puede tener CUALQUIER tamaño (piense: desde “móvil” hasta “televisores de pantalla grande”). Significado: para el CSS web, es mejor configurar el ancho de la página y el ancho de la imagen utilizando un ancho variable (%) para admitir tantos dispositivos de visualización y clientes de navegación web como sea posible.
EDITAR (26-02-2015)
Hoy me topé con otro artículo más reciente en SmashingMagazine que también profundiza en el diseño para impresión con HTML y CSS... en caso de que puedas usar otro tutorial más.
EDITAR (30-10-2018)
Me han llamado la atención porque sizeno es CSS3 válido, lo cual de hecho es correcto; simplemente repetí el código citado en el artículo que (como se señaló) era CSS2 antiguo (lo cual tiene sentido si miras el año del artículo y esta respuesta se publicó por primera vez). De todos modos, aquí está el código CSS3 válido para su comodidad de copiar y pegar:
@media print {
body{
width: 21cm;
height: 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
}
En caso de que creas que realmente necesitas píxeles ( en realidad deberías evitar el uso de píxeles ), tendrás que encargarte de elegir el DPI correcto para imprimir:
- 72 ppp (web) = 595 X 842 píxeles
- 300 ppp (impresión) = 2480 X 3508 píxeles
- 600 ppp (impresión de alta calidad) = 4960 X 7016 píxeles
Sin embargo, evitaría la molestia y simplemente usaría cm(centímetros) o mm(milímetros) para el tamaño, ya que eso evita problemas técnicos que pueden surgir dependiendo del cliente que utilice.
Sería bastante fácil forzar al navegador web a mostrar la página con las mismas dimensiones en píxeles que A4. Sin embargo, puede haber algunas peculiaridades cuando se renderizan las cosas.
Suponiendo que sus monitores muestren 72 ppp, podría agregar algo como esto:
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 842px;
width: 595px;
/* to centre page on screen*/
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
</body>
</html>
El tamaño A4 es 210x297 mm.
Entonces puedes configurar la página HTML para que se ajuste a esos tamaños con CSS:
html,body{
height:297mm;
width:210mm;
}
Cree una sección con cada página y utilice el siguiente código para ajustar los márgenes, la altura y el ancho.
Si está imprimiendo en tamaño A4.
Entonces usuario
Size : 8.27in and 11.69 inches
@page Section1 {
size: 8.27in 11.69in;
margin: .5in .5in .5in .5in;
mso-header-margin: .5in;
mso-footer-margin: .5in;
mso-paper-source: 0;
}
div.Section1 {
page: Section1;
}
luego crea un div con todo tu contenido.
<div class="Section1">
type your content here...
</div>
o
@media print {
.page-break {
height: 0;
page-break-before: always;
margin: 0;
border-top: none;
}
}
body, p, a,
span, td {
font-size: 9pt;
font-family: Arial, Helvetica, sans-serif;
}
body {
margin-left: 2em;
margin-right: 2em;
}
.page {
height: 947px;
padding-top: 5px;
page-break-after: always;
font-family: Arial, Helvetica, sans-serif;
position: relative;
border-bottom: 1px solid #000;
}
