Resumen de CSS para imprimir en papel

 (voussoir.net)
26 puntos por GN⁺ 2024-03-04 | 2 comentarios | Compartir por WhatsApp
  • En la empresa estoy trabajando en recrear y reemplazar con una herramienta web formularios que antes se llenaban a mano en papel/Excel usando HTML, así que hice este resumen.
  • Explica los conceptos básicos de CSS para controlar cómo se ve una página web al imprimirse, junto con algunos consejos y trucos.

@page

  • @page es una regla de CSS que le indica al navegador la configuración de impresión del sitio web.
  • @page incluye el DOM, y mientras que en la web el elemento <html> está limitado por los bordes de la pantalla, al imprimir queda limitado por @page.
  • La configuración de @page coincide de forma aproximada con las opciones que se obtienen en el cuadro de diálogo de impresión del navegador al presionar Ctrl+P.

@media print

  • Existe la media query print, con la que se pueden escribir estilos que solo se aplican al imprimir.
  • Se agrega display:none a encabezados, opciones, textos de ayuda para el usuario y otros elementos que no deberían aparecer en la impresión.

Ancho, alto, margen y padding

  • Hace falta entender el modelo de cajas, y la razón para establecer @page margin: 0 es que se prefiere manejar los márgenes desde los elementos del DOM.
  • Es más fácil recordar que <html> ocupa todo el papel físico y que los márgenes están dentro del DOM.

Posicionamiento de elementos

  • Al diseñar un documento, se colocan los elementos usando HTML/CSS adecuados.
  • También se puede usar posicionamiento absoluto cuando hay que crear rectángulos que encajen en papel de etiquetas de un tamaño específico, o cuando se necesita imprimir datos en papel con etiquetas especiales.

Documentos de varias páginas y elementos repetidos

  • Al escribir un generador de impresión que incluya datos tabulares, como una factura, si una <table> pasa a la segunda página, el navegador duplica automáticamente <thead> en la parte superior de cada página.
  • Se generan páginas dividiendo la tabla en varias tablas pequeñas con JavaScript.

Modo vertical/horizontal

  • El usuario puede sobrescribir la regla @page si así lo desea.
  • Se pueden crear elementos <style> separados para modo vertical y horizontal, y alternarlos usando JavaScript.

Fuente de datos

  • Hay varias maneras de llevar datos a la página: se pueden empaquetar todos en parámetros de URL o usar JavaScript para traer registros de la base de datos mediante una API.
  • Se establece contenteditable para que el usuario pueda hacer pequeños cambios antes de imprimir.

Opinión de GN⁺

  • Este artículo ofrece una guía útil para desarrolladores web sobre cómo escribir CSS para impresión. Será especialmente útil para quienes trabajan en convertir páginas web en documentos físicos.
  • El CSS para impresión suele ser un tema ignorado, pero como muchas empresas todavía necesitan imprimir documentos importantes, este conocimiento tiene valor.
  • El enfoque técnico presentado en el artículo parece haber sido probado y validado en entornos de trabajo reales, y ofrece soluciones prácticas para resolver problemas reales.
  • El uso de la regla CSS @page y la media query @media print es importante para controlar el tamaño del papel y los márgenes al imprimir páginas web, y es algo que los desarrolladores web deben conocer.
  • El artículo ayuda a cerrar la brecha entre la teoría y la práctica al ofrecer ejemplos y consejos concretos sobre cómo aplicar CSS para impresión en la realidad, más allá de una comprensión básica del tema.

Lecturas relacionadas

2 comentarios

 
cosine20 2024-03-11

La próxima vez me gustaría probar con esto para hacer un proyecto de juguete.
 
GN⁺ 2024-03-04
Comentarios de Hacker News

  • Explicación de los estilos de impresión preferidos en un sitio web personal:

    • Los encabezados de sección se imprimen de forma que no queden al final de una página dejando el contenido al inicio de la siguiente sin encabezado.
    • Los gráficos y diagramas se imprimen completos dentro de una sola página, sin desbordarse entre páginas.
    • Se imprime la URL de los hipervínculos para que los enlaces no queden solo como texto subrayado.

  • Experiencia editando un libro con Pagedjs.org:

    • Había algunos errores en la vista previa, pero el resultado final fue perfecto, y ahorró una cuarta parte del tiempo en comparación con usar InDesign.
    • Si ya conoces tanto HTML/CSS como InDesign, Pagedjs es una mejor opción para maquetaciones de texto largo.

  • Problemas con el soporte de los navegadores para CSS de impresión:

    • No existe una funcionalidad equivalente para ciertas capacidades en CSS, como poner notas al pie en cada página.
    • Pregunta si existe algún motor de maquetación HTML sencillo que permita experimentar con propiedades CSS personalizadas y cubrir esas carencias.

  • La facilidad de imprimir usando CSS:

    • Cualquier app puede generar HTML+CSS para preparar fácilmente documentos impresos limpios y bonitos.
    • Es más fácil escribir tipografía en CSS en unos minutos que aprender PostScript o TeX.

  • Situaciones en las que el soporte del navegador para impresión es tan malo que obliga a crear una app nativa:

    • Actualmente hay que descargar un PDF para poder imprimir.
    • Piden a los desarrolladores de Chrome/Blink, Safari/Webkit y Firefox/Mozilla que al menos permitan que los hacks funcionen.

  • Reflexión sobre la historia y la situación actual de CSS:

    • CSS empezó pensando en los medios impresos, pero el soporte de los navegadores se quedó atrás.

  • Cómo crear facturas y algunos libros electrónicos usando HTML & CSS:

    • Presentan cómo usar print-css.rocks y Weasyprint.

  • Mención de paper-css, usado para generar PDF a través del navegador.

  • Ventajas de producir materiales impresos con HTML/CSS:

    • Usan HTML/CSS para todo lo necesario en la producción de materiales impresos.

  • Experiencia usando habilidades de CSS para ofrecer perfiles de una red social en formato imprimible:

    • Permitieron imprimir perfiles en una red social orientada a trabajadores de fábrica.
    • También comparten la experiencia de haber creado un editor en línea para generar certificados de talleres y cursos.