Optimización de impresión de páginas web: cómo hacer que se vean bien también en papel

• El diseño responsivo, clave de la experiencia web, debe considerar no solo los dispositivos sino también la adaptación al medio de salida (impresión)
• Por accesibilidad, requisitos legales, viajes y otras razones, la calidad y utilidad de impresión de una página web siguen siendo importantes
• Con funciones de CSS exclusivas para impresión como @media print, @page, unidades absolutas y page-break, es posible implementar un diseño limpio, una división adecuada y una impresión eficiente
• Conviene ocultar elementos innecesarios como la navegación y el pie de página, y complementar para papel la información de enlaces, abreviaturas, etc.
• Considerando la impresión en blanco y negro, el ahorro de tinta y la legibilidad, se debe minimizar el uso de colores y fondos, fomentando mejoras complementarias entre impresión y pantalla

---

Por qué es necesario diseñar la web para impresión

• Desde la accesibilidad, las personas que no pueden mirar una pantalla durante mucho tiempo también pueden obtener información mediante contenido impreso
• Siguen existiendo muchos escenarios de uso de material impreso, como viajes sin conexión a internet o obligaciones legales y de archivo dentro de una organización
• También hay muchas similitudes con formatos de publicación digital como EPUB, por lo que la experiencia de estilos de impresión es una técnica con gran capacidad de extensión
• Como la gente realmente imprime y utiliza sitios web, dar soporte a impresión contribuye a mejorar la calidad de toda la experiencia de usuario

Cómo aplicar estilos de impresión

• Con @media print de CSS se pueden definir estilos exclusivos para impresión
• Existen varios métodos, como <link rel="stylesheet" media="print">, @import url("...") print y @media print { ... } dentro del CSS interno
• Para estilos exclusivos de pantalla se usa @media screen

Cómo probar estilos de impresión

• Navegadores como Edge, Chrome, Firefox y Safari ofrecen funciones para simular el medio de impresión
• El resultado de la simulación puede diferir del impreso real, y la mayoría de los navegadores establecen por defecto la desactivación del fondo (para ahorrar tinta)
• Se recomienda probar considerando el entorno real de impresión

Unidades absolutas y la regla @page

• CSS ofrece diversas unidades absolutas como cm, mm, in, pt y px, que son útiles para ajustar tamaños con precisión en la impresión real
• Con la regla @page se pueden configurar el tamaño del papel (A4, A5, etc.), los márgenes y la orientación
• También es necesario considerar las limitaciones del área imprimible de la impresora y los pies/encabezados que el navegador agrega automáticamente

División de páginas y manejo de párrafos

• En contenidos largos, la división de páginas es esencial, y las propiedades break-before, break-after y break-inside permiten controlar bien las posiciones
• La sintaxis antigua page-break-* sigue teniendo compatibilidad
• Con las propiedades orphans y widows se pueden minimizar las líneas sueltas al inicio o final de un párrafo, aunque algunos navegadores no las soportan
• box-decoration-break ayuda a mantener la consistencia de la UI, como bordes, cuando hay cortes de página

Soporte de impresión para elementos interactivos

• En papel no hay interacción posible con enlaces, abreviaturas y otros elementos, por lo que se puede añadir la URL o información al resultado impreso con a[href]:after, abbr[title]:after, etc.
• Los elementos de formulario deben disponerse como campos de entrada para impresión, y contenedores con scroll pueden requerir expansión con overflow: visible, etc.
• Elementos innecesarios como navegación y pie de página pueden eliminarse con display: none, controlando que solo se imprima main

Color, tinta y legibilidad

• Tomando como base la impresión en blanco y negro y el ahorro de tinta, se puede reemplazar el énfasis visual usando bordes en lugar de colores de fondo
• Con print-color-adjust: exact es posible forzar que solo ciertos elementos mantengan el color (usar solo cuando sea necesario)
• Se recomienda minimizar las imágenes y eliminar elementos de alto consumo de tinta, como anuncios

Conclusión

• La web existe no solo en la pantalla sino también en el mundo físico (el papel)
• Los estilos de impresión en CSS son un elemento clave para mejorar la accesibilidad y el nivel de acabado de la experiencia de usuario
• Para que todas las personas puedan consumir contenido de distintas maneras, el soporte de impresión es una capacidad esencial del desarrollo web moderno a la que hay que prestar atención

[secret3056]

Por otro lado, la publicación en sí no es amigable para imprimir.
Se imprime una UI inútil en papel, como COPY TO CLIPBOARD,
y los fragmentos de código se recortan y se imprimen con la barra de desplazamiento horizontal.

También vale la pena revisar la publicación anterior Resumen de CSS para imprimir en papel.

Imprimir una página web en papel y exportarla como PDF también son cosas distintas (por ejemplo, puedes usar colores sin preocuparte por la tinta o aprovechar hipervínculos), y hay librerías relacionadas como paged.js.

[felizgeek]

¡Vale la pena considerarlo al crear páginas para manuales, materiales educativos y hojas de trabajo!