¿Ancho seguro en píxeles para imprimir páginas web?


85

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


3
en lugar de usar el ancho en píxeles, debe usar width:autolo que ajustará el ancho del contenido al ancho del papel
Marko Vranjkovic

Respuestas:


89

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 ...


Solo me gustaría agregar un comentario de que, si bien en el momento de esta respuesta, FF e IE pueden haber tenido entre ellos el 90% de los navegadores utilizados (me parece poco probable que Google ofrezca Chrome a casi cualquier persona que haya buscado con cualquier otro navegador que, en mi opinión, es en este momento un navegador mejor y más ligero), pero es poco probable que lo sigan haciendo, ya que las tendencias cambian y la participación de un navegador a menudo cambia como cualquier otra participación de mercado.
Chris

Esto responde a la pregunta, aunque obviamente es más complicado que un tamaño de px simple.
rune711

45

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...


De hecho, me resultó más fácil crear una versión PHP Image GD del material que quería imprimir (postales, folletos, etc.) que acabo de alimentar con información de una base de datos y se reformateó en consecuencia. Simplemente mantuve la proporción de píxeles correcta. Postal 4x6 (350dpi) == 2135x1435 px
Michael J. Calkins

20

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;
    }
}

5
No está teniendo en cuenta los márgenes de la página. O la posibilidad de tamaños de papel A4.
Blazemonger

1
Esto fue perfecto para mí, tiene mucho sentido.
leedotpang

@Blazemonger con @media print, puede configurarlos. Puede configurar size: lettero size: A4. smashingmagazine.com/2015/01/designing-for-print-with-css
J.Ko

@ J.Ko Ese no era el punto; es el usuario final quien puede usar papel A4 o carta, y el diseñador de CSS no puede estar seguro de cuál está disponible para el usuario.
Blazemonger

10

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?

Imagenes

Opciones en las que puedo pensar:

  • Escale las imágenes en su CSS de impresión a un ancho que pueda asumir que se ajustará en cualquier caso, use pt, no px (pero la impresión necesitará más puntos / unidad de todos modos, por lo que esto no debería ser un problema)
  • excluir de ser impreso

Mesas

  • quitar el ancho fijo
  • use el paisaje si realmente tiene 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


2
Pero, ¿qué pasa con los elementos con un ancho fijo como imágenes y tablas?
aemkei

5

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;
  } 
}

4

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">

Pero las imágenes necesitan atributos de ancho y alto especificados en píxeles. Necesito convertir los valores de PT a píxeles en función del DPI y la dimensión estándar de la impresora.
aemkei

Luego tienes que jugar con los contenedores de imágenes ... o aplicar prueba y error;) Sin embargo, creo que usar dos archivos CSS separados, uno para pantalla y otro para imprimir, es una buena práctica.
ARemesal

1
dale a la <img>etiqueta un surroundig, <div>el div obtiene ancho y alto en pt y el img obtienewidth:100%; height:100%;
Hafenkranich

0

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 ...

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.