css - solo - Ancho de seguridad en píxeles para imprimir páginas web

estilos para impresion css

Question

¿Cuál es el ancho de seguridad 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 US Letter / DIN A4. Así que obtuvimos el tamaño de letra estándar y algunos valores por defecto de DPI. Pero, ¿puedo convertirlos en valores de píxel para especificar en el atributo " width " de la imagen?

Answer 1

Dudo que haya uno ... Depende del navegador, de la impresora (máx. Dpi 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 ...), en la configuración ( paisaje o retrato?), además de que a menudo puede cambiar la escala (porcentaje), etc.
Permita que los usuarios modifiquen su configuración ...

Answer 2

En cuanto a una verdadera "respuesta universal", no puedo proporcionar una. Sin embargo, puedo proporcionar una respuesta simple y definitiva para algunos detalles ...

670 PIXELS

Al menos esto parece ser una respuesta segura para los productos de Microsoft. Leí muchas sugerencias, incluso 675, pero después de probar esto yo mismo 670 es lo que se me ocurrió.

Todo el DPI, problemas de margen, 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 FIJE EL TAMAÑO DE IMPRESIÓN AL 100% en lugar del valor predeterminado de "reducir para ajustar" , todo encaja en la página sin cortarse en este ancho.

Si me envío un correo electrónico HTML y lo recibo con Windows Live Mail 2011 (qué se convirtió Outlook Express) e imprimo la página a 670 de ancho, de nuevo todo encaja. Esto es válido si lo envío a una copia impresa real o a 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 reduje a 670, todo encaja perfectamente.

En cuanto a cómo configuré el ancho, acabo de utilizar una tabla html "envoltura" primitiva y he definido su ancho para que sea 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 los detalles, como qué navegadores están utilizando, etc. y codificar las soluciones para las importantes. Entre IE y FF, cubrirá literalmente alrededor del 90% de los usuarios de la web. Ponga otro código para "todos los demás" que generalmente parece funcionar y llámelo un día ...

Answer 3

No es tan sencillo como se ve. Acabo de encontrarme con una pregunta similar, y esto es lo que obtuve: Primero, un poco de historia en wikipedia .

Luego, 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 conviértalo en pulgadas y luego conviértalo en puntos (divida por 72).

Pero, una vez más, los navegadores tienen todo tipo de problemas con el contenido imprimible, por ejemplo, si intenta usar etiquetas float css, los navegadores basados ​​en Gecko cortarán sus imágenes en la página media, incluso si usa page-break-inside: evitar ; en tus imágenes (mira aquí, en el sistema de seguimiento de errores de Mozilla ).

Hay (mucho) más sobre impresión desde un navegador en este artículo en 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 de papel.

Entonces, o bien solo calcula un buen tamaño de imagen en pulgadas, me refiero a puntos (7.1 "* 72 = 511.2 por lo width: 511pt; funcionaría para el tamaño de letra) independientemente de los tamaños de píxel, o ancho de ancho, y base sus anchos de imagen en el tamaño de papel.

Buena suerte...

Answer 4

Para la impresión, no configuro ningún ancho y elimino cualquier obstáculo que impida que su diseño de impresión tenga un ancho dinámico. Es decir, si reduce y reduce la ventana de su navegador, no se corta ni oculta el contenido, pero el documento 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?

Imágenes

Opciones que puedo pensar:

• escale imágenes en su CSS de impresión a un ancho que puede asumir que encajará en cualquier caso, use pt no px (pero imprimir necesitará más puntos / unidad de todos modos, así que esto no debería ser un problema)
• excluir de ser impreso

Mesas

• eliminar el ancho fijo
• usa el paisaje si realmente tienes tablas con mucha información
• no use tablas para propósitos de diseño
• excluir de ser impreso
• extraer contenido, imprimirlo como párrafos

http://www.intensivstation.ch/en/css/print/

o cualquier otro resultado de google para combinaciones de: CSS, impresión, medios, diseño

Answer 5

Una impresora no entiende los píxeles, entiende los puntos (pt en CSS). La mejor solución es escribir un CSS adicional para imprimir, con todas sus medidas en puntos.

Luego, en tu código HTML, en la sección principal, pon:

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

Answer 6

Una solución al problema que encontré fue 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;
    }
}

Answer 7

Una solución para garantizar que las imágenes no se corten cuando se imprimen en una página web es tener la siguiente regla de CSS:

@media print { 
  img { 
    max-width:100% !important;
  } 
}