Cómo diseñar css para imprimir una etiqueta

Question

Cuando un usuario de mi sitio hace clic en el botón "imprimir la etiqueta", se lo envía a una página donde solo aparece la etiqueta sobre un fondo blanco y se abre el cuadro de diálogo de impresión. Mi pregunta es acerca de cómo "pensar" el CSS de esta etiqueta para que se imprima en todo el ancho del papel, independientemente del papel que sea (EE. UU., A4, ...).

¿Debo usar porcentajes para dimensionar todo, cuadros, márgenes, ...? ems para fuentes? o puntos? ¿Debería usarse primero un restablecimiento de css?

¿Existe un buen recurso en la red para este tipo de aplicación css?

Actualización: Lo hice con secciones flotantes y anchuras porcentuales que se adaptan bien en papel normal. Así que considera esta pregunta cerrada.

Answer 1

Puede ser todo un reto escalar todo correctamente si la etiqueta contiene diferentes secciones de datos.

La forma en que lo haría sería generar una sola imagen SVG y escalar eso. SVG está diseñado para escalar, mientras que (X) HTML está diseñado para volver a fluir el contenido según la resolución.

SVG es solo un xml que se puede incrustar directamente en su HTML, look here para ver ejemplos.

Answer 2

Debe evitar usar la posición: absoluta/fija, flotar: izquierda/derecha.

Pt es mejor para fuentes de impresión, aunque en realidad no importa la mayoría de las veces.

Answer 3

Supongo que el truco es hacer que el diseño sea lo más fluido posible. Y evite usar px como una medida. Aquí hay un buen artículo: CSS Design: Going to Print