¿Es posible hacer que una página HTML se comporte, por ejemplo, como una página del tamaño de un A4 en MS Word?
En esencia, quiero poder mostrar la página HTML en el navegador y delinear el contenido en las dimensiones de una página tamaño A4.
Para simplificar, estoy asumiendo que la página HTML solo contendrá texto (sin imágenes, etc.) y no habrá etiquetaspor ejemplo.
Además, al imprimir la página HTML, saldría en páginas de papel tamaño A4.
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 tienen una resolución de 72 ppp, podría agregar algo así:
body {
height: 842px;
width: 595px;
/* para centrar la página en la pantalla */
margin-left: auto;
margin-right: auto;
}
Siguiendo la sugerencia de Will Dean (que tiene mucho sentido) de usar milímetros, puedes obligar al navegador a calcular el ancho/alto en píxeles: body { height: 420mm; width: 297mm; ... }
Entonces, finalmente un retrato DINA4: body { altura:297mm; ancho:210mm; margen-izquierdo:auto; margen-derecho:auto; }
No puedes. Los sitios web están creados para pantallas, no para impresoras.
Puedes agregar un print.css para que la página se vea mejor al imprimir, pero no puedes especificar un tamaño de papel como A4.
Puedes encontrar más información sobre hojas de estilo para impresión y cómo usarlas aquí.
La mejor solución para imprimir es usar PDFs, para eso están hechos. Crea un PDF con los mismos datos. En ese caso, tendrás control total sobre el formato de impresión.
Cree una sección con cada página y utilice el siguiente código para ajustar los márgenes, altura y anchura.
Si está imprimiendo en tamaño A4.
Luego el usuario
Tamaño: 8.27 pulgadas y 11.69 pulgadas
@page Section1 {
tamaño: 8.27 pulgadas 11.69 pulgadas;
margen: .5 pulgadas .5 pulgadas .5 pulgadas .5 pulgadas;
margen superior de encabezado mso: .5 pulgadas;
margen de pie de página mso: .5 pulgadas;
fuente de papel mso: 0;
}
div.Section1 {
página: sección 1;
} luego crear un div con todo su contenido dentro de él.
Escriba su contenido aquí... o
@media print {
.page-break {
altura: 0;
salto de página antes de: siempre;
margen: 0;
borde superior: ninguno;
}
}
body, p, a,
span, td {
tamaño de fuente: 9pt;
familia de fuentes: Arial, Helvetica, sans-serif;
}
body {
margen-izquierdo: 2em;
margen-derecho: 2em;
}
.page {
altura: 947px;
padding-top: 5px;
salto de página después de: siempre;
familia de fuentes: Arial, Helvetica, sans-serif;
posición: relativa;
borde inferior: 1px sólido #000;
}
¿Estás seguro de que está funcionando? No pude reproducir esto en la última versión de Firefox y Chrome.
No puedo hacer que @page Section1 funcione con Chrome 41.0.2272.77. ¿Estás realmente seguro de que tu respuesta funciona? Intenta por ejemplo visitar `data:text/html,@page x{size:100pt 200pt}
x
y abre una vista previa de impresión. No veo ninguna diferencia entre eso ydata:text/html,x. Cuando reemplazo@page xcon@page`, entonces funciona, pero ese no es un selector específico de página.
He utilizado HTML para generar informes que se imprimen correctamente en tamaños reales en papel real.
Si usas milímetros como unidades en el archivo CSS deberías estar bien, al menos para páginas individuales. Sin embargo, la gente puede arruinarte cambiando el zoom de impresión en su navegador.
Me parece recordar que todo lo que estaba haciendo era de una sola página, así que no tuve que preocuparme por la paginación, eso podría ser mucho más difícil.
Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.
15 votos
Puedes visitar: github.com/delight-im/HTML-Sheets-of-Paper
0 votos
Posible duplicado de: stackoverflow.com/questions/16649943/css-to-set-a4-paper-size
1 votos
¡El verdadero "HTML para imprimir" está llegando! Consulta toda la historia en stackoverflow.com/q/10641667/287948 y el módulo de fragmentación de nivel 3 de CSS de la W3C, ¡que está llegando!
0 votos
¿Cuál era la intención de hacer eso? ¿Estás dejando MS Office por las tecnologías web? Al menos eso es lo que estoy intentando pero todavía necesito algo de entrada sobre cómo. Responder a eso terminaría la historia que comenzó con esta pregunta.