¿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?

Esencialmente, 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 solo contendrá texto (sin imágenes, etc.) y no habrá <br>etiquetas, por ejemplo.

Además, cuando se imprime la página HTML, saldría como páginas de papel de tamaño A4.

Hace años, en noviembre de 2005, AlistApart.com publicó un artículo sobre cómo publicaron un libro utilizando nada más que 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 hojas de papel), a diferencia de los medios continuos (piense en barras de desplazamiento). Las hojas de estilo pueden establecer el tamaño de las páginas y sus márgenes. Las plantillas de página pueden recibir nombres y los elementos pueden indicar en qué página con nombre desean imprimirse. Además, los elementos en el 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 un editor con sede en EE. UU., Nos dieron el tamaño de página en pulgadas. Nosotros, siendo europeos, continuamos con mediciones métricas. CSS acepta ambos.

Después de configurar el tamaño y el margen de la página, necesitamos 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, utilizamos CSS2 para declarar páginas con nombre:

div.titlepage {
  page: blank;
}

Es decir, la página de título debe imprimirse en páginas con el nombre "en blanco". CSS2 describió el concepto de páginas con nombre, pero su valor solo se hace evidente cuando los encabezados y pies de página están disponibles.

De todas formas…

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 se sumerge en cosas como establecer saltos de página, etc., por lo que es posible que desee leerlo por completo.

En su caso, el truco es 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 la impresión CSS.

Ahora, querrá hacer que la pantalla 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á que crear un archivo CSS web o anular algunas partes de su CSS de impresión. Al crear CSS para visualización web, recuerde que un navegador puede tener CUALQUIER tamaño (piense: "móvil" hasta "televisores de pantalla grande"). Significado: para el CSS web, el ancho de página y el ancho de imagen se configuran mejor 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 se sumerge en el diseño para imprimir con HTML y CSS ... en caso de que pueda usar otro tutorial más.

EDITAR (30-10-2018)

Me ha llamado la atención que sizeCSS3 no es válido, lo cual es correcto, simplemente repetí el código citado en el artículo que (como se señaló) era un buen CSS2 antiguo (lo cual tiene sentido cuando se mira el año en que el artículo y esta respuesta se publicó por primera vez). De todos modos, aquí está el código CSS3 válido para su conveniencia 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 piense que realmente necesita píxeles (en realidad debería evitar usar píxeles ), deberá asegurarse 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 dimensionar, ya que eso evita generar fallas que pueden surgir dependiendo del cliente que use.

Sería bastante fácil forzar al navegador web a mostrar la página con las mismas dimensiones de píxeles que A4. Sin embargo, puede haber algunas peculiaridades cuando se representan las cosas.

Suponiendo que sus monitores muestren 72 ppp, puede 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>

Tamaño A4 es 210x297 mm

Por lo tanto, puede 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 use 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;
}

He usado HTML para generar informes que se imprimen correctamente en tamaños reales en papel real.

Si usa cuidadosamente mm como sus unidades en el archivo CSS, debería estar bien, al menos para páginas individuales. Sin embargo, las personas pueden fastidiarlo cambiando el zoom de impresión en su navegador.

Parece que recuerdo que todo lo que estaba haciendo era una sola página, así que no tuve que preocuparme por la paginación, eso podría ser mucho más difícil.

Vi esta solución después de buscar en google, buscar "Plantilla de página CSS A4" (codepen.io). Muestra un área de tamaño A4 (A3, A5, también vertical) en el navegador, usando la etiqueta <page>. Dentro de esta etiqueta se muestra el contenido, pero la posición absoluta sigue siendo con respecto al área del navegador.

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}

<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>

Esto funciona para mí sin que se incluya ninguna otra biblioteca css / js. Funciona para los navegadores actuales (IE, FF, Chrome).

<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

En tu normalidad style.css:

table.tableclassname {
  width: 400px;
}

En su print.css:

table.tableclassname {
  width: 16 cm;
}

PPI y DPI no hacen absolutamente ninguna diferencia en cómo un documento se imprimirá desde un navegador. la impresora no toma información sobre el paso del punto de la pantalla o el DPI de las imágenes, etc. el procesador de impresión del navegador aumentaría el DPI de las imágenes de algo bastante bajo como 72 ppp a cualquier DPI que sea el resto del documento. digamos que la imagen se muestra como media página de ancho, luego tiene aproximadamente 4 "de ancho físicamente. El ancho de píxel de la imagen sería de aproximadamente 300 píxeles para mostrarse correctamente en el navegador. Para cuando se imprima a 300 DPI nominales, el procesador ha agregado píxeles y la imagen crecerá a alrededor de 1200 px, que a 300 DPI es de 4 ".

cuando se trata de elementos basados ​​en vectores o no basados ​​en píxeles, como el texto, la impresora elige su propio DPI del controlador que no se relaciona con el paso de punto de la pantalla o el ancho del navegador, etc. si el navegador tiene una anchura de 3000 px, el procesador de impresión ajustará el texto según corresponda.

He aquí lo que dificulta la creación de pantallas de impresión: cada navegador e impresora interpretará los tamaños de texto (pt, em, px) y el espaciado a su manera. dependiendo de qué impresora, navegador y tal vez incluso el sistema operativo que utilice, obtendrá una cantidad diferente de líneas y caracteres por página. así que incluso si prueba en su computadora usando su navegador e impresora y descubre que puede mostrar el texto en un cuadro a 640x900px y es perfecto para imprimir, el próximo tipo que intente imprimir posiblemente lo imprimirá de manera diferente. realmente no hay forma de obligar a cada impresora y navegador a que sean idénticos cada vez.

olvide los píxeles y, además, olvide los DPI, lo único para lo que podría usar píxeles es establecer un ancho de tabla que simule el ancho de un área imprimible en su impresora. en ese caso encontré que 640px de ancho está cerca.

Buscando un problema similar, encontré esto: http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 es un formato de documento, como una imagen de pantalla que dependerá de la resolución de la imagen, por ejemplo, un documento A4 redimensionado a:

• 72 ppp (web) = 595 X 842 píxeles
• 300 ppp (impresión) = 2480 X 3508 píxeles (Esto es "A4" tal como lo conozco, es decir, "210 mm X 297 mm a 300 ppp")
• 600 ppp (impresión) = 4960 X 7016 píxeles

Sé que este tema es bastante antiguo, pero quiero compartir mi experiencia sobre ese tema. En realidad, estaba buscando un módulo que me pueda ayudar con mis informes diarios. Estoy escribiendo algunas documentaciones y algunos informes en HTML + CSS (en lugar de Word, Latex, OO, ...). El objetivo sería imprimirlos en papel A4 para compartirlos con amigos, ... En lugar de buscar, decidí tener una pequeña sesión de codificación divertida para implementar una biblioteca simple que pueda manejar "páginas", número de página, resumen, encabezado , pie de página, .... Finalmente, lo hice en ~~ 2h y sé que esa no es la mejor herramienta, pero casi está bien para mi propósito. Puedes echar un vistazo a este proyecto en mi repositorio y no dudes en compartir tus ideas. Tal vez no sea lo que está buscando al 100%, pero creo que este módulo puede ayudarlo.

Básicamente creo una página de cuerpo "ancho: 200 mm;" y contenedor de altura: 290 mm (más pequeño que A4). Luego usé page-break-after: siempre; para que la opción "imprimir" del navegador sepa cuándo dividir las páginas.

repo: https://github.com/kursion/jsprint

Técnicamente, podría hacerlo, pero tomaría mucho trabajo lograr que todos los navegadores impriman la página exactamente como se muestra en la pantalla. Además, la mayoría de los navegadores fuerzan la URL, la fecha de impresión y la numeración de páginas en la impresión, lo que no siempre se desea. Esto no puede ser alterado o deshabilitado.

En cambio, recomendaría crear un PDF basado en el contenido de la pantalla y servir el PDF para descargar y / o imprimir. Aunque la mayoría de las bibliotecas de PDF disponibles son de pago, hay algunas alternativas gratuitas disponibles para crear archivos PDF básicos.

Utilicé 680px en informes comerciales para imprimir en páginas A4 desde 1998. El 700px no podía ajustarse correctamente dependiendo del tamaño de los márgenes. Los navegadores modernos pueden reducir la página para que quepa en la impresora, pero si usa 680 píxeles, imprimirá correctamente en casi cualquier navegador.

Eso es HTML para usted Ejecute el fragmento de código y vea el resultado:

window.print();

<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>

JSFiddle:

https://jsfiddle.net/ajofmm7r/

Muchas formas de hacer:

html,body{
    height:297mm;
    width:210mm;
}


html,body{
    height:29.7cm;
    width:21cm;
}

html,body{
    height: 842px;
    width: 595px;
}

Es completamente posible configurar su diseño para asumir las proporciones de una página a4. Solo tendría que establecer el ancho y la altura en consecuencia (posiblemente verifique con window.innerHeighty window.innerWidthaunque no estoy seguro de si eso es confiable).

La parte difícil es imprimir A4. Javascript, por ejemplo, solo admite la impresión de páginas rudimentariamente con el window.printmétodo. Como @Prutswonder sugirió, crear un PDF desde la página web probablemente sea la forma más sofisticada de hacerlo (aparte de proporcionar documentación PDF en primer lugar). Sin embargo, esto no es tan trivial como uno podría pensar. Aquí hay un enlace que tiene una descripción de una clase Java de código abierto para crear archivos PDF desde HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

Obviamente, una vez que haya creado un PDF con impresión de proporciones A4, dará como resultado una impresión A4 limpia de su página. Si vale la pena la inversión de tiempo es otra cuestión.