¿Sugerencias para hacer diseños CSS perfectos para píxeles?

Question

Un objetivo comercial requiere que haga un formulario en pantalla que sea perfecto para píxeles. Si un usuario imprime este formulario, coincidirá exactamente con la versión del formulario de la Oficina de Imprenta del Gobierno de EE. UU. la impresora producirá una copia (razonablemente) escaneable de este documento. La solución anterior es PDF, que solo funcionará hasta cierto punto para nosotros.

Me estoy inclinando hacia HTML / CSS, y quisiera sugerencias sobre herramientas para ayudarlo.

Para las herramientas, PixelPerfect en Firefox parece un buen comienzo. La plataforma de destino para esto es (drum roll) IE6, si es útil. El documento se parece a esto .

Si HTML / CSS es un no-go completo, Adobe Flex es mi próxima opción.

Answer 1

Dean, echa un vistazo a Prince . Bert Bos y Håkon Wium Lie lo usaron para la producción de su libro en CSS . Explican un poco sobre esto en una lista aparte artículo .

Answer 2

Si el objetivo es la impresión perfecta de píxeles, y ni siquiera el PDF lo llevará allí, puede renunciar de inmediato a la impresión desde el navegador. Hay muuuchas demasiadas variables cuando se procesa en el lado del cliente: desde diferentes navegadores (¿IE6? ¡Buena suerte!) A diferentes fuentes, a configuraciones de usuario, a papel de tamaño A4 vs Carta.

¿Puedo preguntar por qué el PDF no es adecuado?

Answer 3

Estoy de acuerdo en que los diseños perfectos en píxeles son muy, muy difíciles de lograr con html / css, particularmente con los formularios. Sin embargo, creo que los archivos PDF pueden recibir información de formularios web externos o tener campos de texto que, una vez completados, se imprimirán.

Flex salida a PDF sería una buena idea, pero no creo que usar flex como motor de renderizado ayude demasiado con esto.

Otra opción sería hacer el pdf y usar un idioma del lado del servidor para personalizarlo con campos de un formulario web anterior, y generar el resultado. (Se puede hacer fácilmente con ruby ??/ django / php, hay algunas buenas bibliotecas pdf por ahí).

Answer 4

Primero, abandone los píxeles. Lo que está buscando es una hoja de estilo de impresión, con todo lo especificado utilizando unidades físicas (cm / pulgadas), tamaño de fuente en pt, etc. Lo que se muestra en la pantalla, en qué tamaño de fuente y si es perfecto para píxeles o no parece relevante para su requisito de producir una copia escaneable .

La pregunta es ahora, ¿es el soporte de IE6 para unidades físicas y hojas de estilo de impresión lo suficientemente completas para eso? Dada mi experiencia en la creación de hojas de estilo de impresión para clientes, donde IE simplemente se bloqueará durante el proceso de impresión si lo mira mal, diría que no es muy probable, no con la complejidad de los formularios con los que está tratando.

Answer 5

Si le preocupa que el renderizador (IE, Acrobat, etc.) se arruine, siempre puede renderizar el formulario en el servidor y simplemente mostrar una imagen al usuario.