- 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
2 comentarios
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.
¡Vale la pena considerarlo al crear páginas para manuales, materiales educativos y hojas de trabajo!