CSS para imprimir en papel

Artículo original ↗ Discusión en Hacker News ↗

Los diseños de impresión basados en CSS se usan cada vez más para generar PDFs, libros, etiquetas e informes directamente desde HTML, pero los desarrolladores se encuentran con soporte inconsistente en los navegadores y con funciones ausentes como paginación fiable, encabezados/pies y tipografía avanzada. Muchos comparten soluciones y herramientas —como Paged.js, WeasyPrint, PrinceXML y Chrome sin interfaz— para obtener control preciso sobre el tamaño de página, los saltos de tabla, los números de página y las notas al pie sin recurrir al software tradicional de autoedición. La visión general es que CSS para impresión es lo bastante potente y flexible para muchos flujos de trabajo reales, pero aún no es lo bastante robusto ni estandarizado para sustituir por completo a la composición tipográfica dedicada o al ecosistema PDF.

Adopción de CSS para impresión

  • Muchos comentaristas usan HTML/CSS como su forma principal de generar documentos imprimibles: facturas, ebooks, libros de RPG, etiquetas, novelas web, informes, CVs, certificados, libros de curso y libros de texto.
  • Ventajas citadas: iteración rápida, plantillas fáciles, integración con CMS/APIs/Markdown/Asciidoc, archivos “fuente” pequeños y flujos de trabajo de “simplemente usar un navegador”.
  • Algunos informan de un gran ahorro de tiempo frente a herramientas como InDesign para maquetación de textos largos, cuando una tipografía “lo bastante buena” es aceptable.

Problemas del navegador y del motor

  • El soporte de impresión entre navegadores se describe como pobre e inconsistente; varias personas se centran solo en Chrome.
  • Chrome: para muchos, el mejor en general para CSS de impresión, pero aún con fallos en tablas multipágina y márgenes de impresión.
  • Firefox: informes de imágenes o páginas enteras que desaparecen al imprimir, y una afirmación sobre un fallo de larga data. Otros dicen no haber tenido esos problemas.
  • Safari: se informa que ignora los márgenes de página.
  • Impresoras de etiquetas/térmicas: especialmente dolorosas en el navegador; la gente recurre a aplicaciones nativas, Electron o demonios de impresión.

Herramientas y flujos de trabajo

  • Herramientas populares: Paged.js, WeasyPrint, PrinceXML, Flyingsaucer, wkhtmltopdf, Puppeteer/Playwright + Chrome sin interfaz, website2pdf, paper-css, Gutenberg, Hartija y Asciidoctor web-pdf.
  • Paged.js es elogiado con frecuencia por implementar funciones de paged media (notas al pie, números de página, encabezados/pies de página repetidos).
  • Algunas organizaciones prohíben ciertos runtimes (por ejemplo, Python), lo que limita la elección de generadores.

Preocupaciones de tipografía y calidad

  • Se considera que CSS para impresión es mucho más débil que las herramientas profesionales de DTP para tipografía avanzada: color CMYK, kerning fino, evitar ríos, puntuación colgante, reglas específicas por idioma y, especialmente, escrituras complejas (por ejemplo, japonés).
  • Las soluciones alternativas (espacios no separables, spans con letter-spacing, ajustes manuales) se ven como chapuzas e imprácticas a escala.

PDF frente a formatos web

  • Algunos sostienen que “simplemente generes PDFs”, porque imprimir en el navegador es demasiado poco fiable.
  • A otros les gustan los flujos de trabajo HTML-first que luego renderizan a PDF mediante motores dedicados.
  • Las opiniones sobre el PDF en sí están divididas: algunos lo ven como “papel digital” excelente; otros no gustan del control de Adobe, la complejidad de formularios/JS y la UX basada en páginas en pantallas. Se menciona PDF/A como un subconjunto estable y más sensato.

Técnicas prácticas y trampas

  • Patrones comunes: @media print, @page para tamaño/márgenes, unidades físicas (in/mm), reglas break-* para evitar encabezados huérfanos y figuras partidas, uso de thead/tfoot para encabezados repetidos de tablas, y URLs de enlaces mediante a::after { content: " (" attr(href) ")"; }.
  • Eliminar los encabezados/pies del navegador y añadir de forma fiable números de página o empezar la numeración después de un título sigue siendo complicado sin motores de paged-media o maquetaciones dirigidas por JS.