¿Cuál es el ancho seguro en píxeles para imprimir una página web?
Mi página incluye imágenes grandes y quiero asegurarme de que no se corten cuando se impriman.
Conozco los diferentes márgenes del navegador y los tamaños de papel Carta EE. UU. / DIN A4. Así que obtuvimos un tamaño de letra estándar y algunos valores de DPI predeterminados. Pero, ¿puedo convertirlos en valores de píxeles para especificar en el widthatributo de la imagen ?
Respuestas:
En cuanto a una verdadera "respuesta universal", no puedo dar una. Sin embargo, puedo dar una respuesta simple y definitiva para algunos detalles ...
670 PÍXELES
Al menos, esta parece ser una respuesta segura para los productos de Microsoft. Leí muchas sugerencias, incluidas 675, pero después de probar esto yo mismo, se me ocurrieron 670.
Dejando de lado todos los DPI, los problemas de márgenes, las diferencias de hardware, esta respuesta se basa en el hecho de que si uso la vista previa de impresión en IE9 (con márgenes estándar) y CONFIGURO EL TAMAÑO DE IMPRESIÓN AL 100% en lugar del valor predeterminado de "encoger para ajustar" , todo cabe en la página sin que se corte en este ancho.
Si me envío un correo electrónico HTML y lo recibo con Windows Live Mail 2011 (en lo que se convirtió Outlook Express) e imprimo la página con un ancho de 670, nuevamente todo encaja. Esto es válido si lo envío a una copia impresa real o un archivo MS XPS (impresión virtual).
Antes de experimentar, estaba usando un ancho arbitrario de 700. En todos los escenarios mencionados anteriormente, parte de la página se cortaba. Cuando lo reduje a 670, todo encajó a la perfección.
En cuanto a cómo configuré el ancho, utilicé una tabla html de "envoltura" primitiva y definí su ancho en 670.
Si puede dictar el software del usuario final, estos asuntos pueden ser sencillos. Si no puede (como suele ser el caso, por supuesto), puede probar detalles como qué navegadores están usando, etc. y codificar las soluciones para los más importantes. Entre IE y FF, cubrirá literalmente alrededor del 90% de los usuarios web. Ponga algún otro código para "todos los demás" que generalmente parece funcionar y llámelo un día ...
No es tan sencillo como parece. Me acabo de encontrar con una pregunta similar, y esto es lo que obtuve: Primero, un poco de antecedentes sobre wikipedia .
A continuación, en CSS, para papel, tienen pt, que es punto, o 1/72 de pulgada. Entonces, si desea tener el mismo tamaño de imagen que en el monitor, primero debe conocer el DPI / PPI de su monitor (generalmente 96, como se menciona en el artículo de wikipedia), luego convertirlo a pulgadas, luego convertirlo a puntos (dividir por 72).
Pero, de nuevo, los navegadores tienen todo tipo de problemas con el contenido imprimible, por ejemplo, si intenta usar etiquetas css flotantes, los navegadores basados en Gecko cortarán sus imágenes en la mitad de la página, incluso si usa el salto de página dentro: evitar ; en sus imágenes (consulte aquí, en el sistema de seguimiento de errores de Mozilla ).
Hay (mucho) más sobre la impresión desde un navegador en este artículo sobre A List Apart .
Además, debe tratar el ancho "Reducir para ajustar" en la vista previa de impresión y los distintos tamaños y orientaciones del papel.
Entonces, o simplemente averigua un buen tamaño de imagen en pulgadas, quiero decir puntos, (7.1 "* 72 = 511.2, por width: 511pt;lo que funcionaría para el papel de tamaño carta) independientemente de los tamaños de píxeles, o elija el ancho porcentual y base el ancho de su imagen en el tamaño del papel.
Buena suerte...
Una solución al problema que encontré fue simplemente establecer el ancho en pulgadas. Hasta ahora, solo he probado / confirmado que esto funciona en Chrome. Funcionó bien para lo que lo estaba usando (para imprimir una hoja de 8.5 x 11)
@media print {
.printEl {
width: 8.5in;
height: 11in;
}
}
@media print, puede configurarlos. Puede configurar size: lettero size: A4. smashingmagazine.com/2015/01/designing-for-print-with-css
Para imprimir, no establezco ningún ancho y elimino los obstáculos que impiden que su diseño de impresión tenga un ancho dinámico. Lo que significa que si hace que la ventana de su navegador sea cada vez más pequeña, no se corta / oculta ningún contenido, pero el documento simplemente se alarga. De esta manera, puede estar seguro de que el resto será manejado por la impresora / creador de pdf.
¿Qué pasa con los elementos con un ancho fijo como imágenes o tablas?
Opciones en las que puedo pensar:
http://www.intensivstation.ch/en/css/print/
o cualquier otro resultado de Google para combinaciones de: CSS, impresión, medios, diseño
Una solución para garantizar que las imágenes no se corten cuando se impriman en una página web es tener la siguiente regla CSS:
@media print {
img {
max-width:100% !important;
}
}
Una impresora no comprende los píxeles, comprende los puntos (pt en CSS). La mejor solución es escribir un CSS adicional para imprimir, con todas sus medidas en puntos.
Luego, en su código HTML, en la sección de cabecera, ponga:
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">
<img>etiqueta un surroundig, <div>el div obtiene ancho y alto en pt y el img obtienewidth:100%; height:100%;
Dudo que haya uno ... Depende del navegador, de la impresora (ppp máximo físico) y de su controlador, del tamaño del papel como usted señala (y es posible que también desee imprimir en papel B5 ...), de la configuración ( ¿paisaje o retrato?), además de que a menudo puede cambiar la escala (porcentaje), etc.
Deje que los usuarios modifiquen su configuración ...
width:autolo que ajustará el ancho del contenido al ancho del papel