Sugestões para fazer layouts CSS de pixel-perfect?

Question

Um dos objetivos de negócios exige que eu fazer um formulário na tela que é de pixel-perfect. Se um usuário imprime essa forma, ele irá corresponder exatamente a versão Governo dos EUA Printing Office da forma; a impressora irá produzir um (razoavelmente) cópia scannable deste documento. A solução anterior é PDF, que só irá funcionar até certo ponto para nós.

Estou inclinado para HTML / CSS, e gostaria sugestões sobre ferramentas para auxiliar isso.

Para ferramentas, PixelPerfect no Firefox parece um bom começo. A plataforma alvo para isso é (tambor rolo) IE6, se ele ajuda. O documento parece com este .

Se HTML / CSS é um completo não-go, Adobe Flex é a minha próxima escolha.

Answer 1

Dean, veja Príncipe . Bert Bos e Håkon Wium Lie-lo usado para a produção de seu livro sobre CSS . Eles explicar um pouco sobre isso em um A List Apart artigo .

Answer 2

Se a impressão Pixel Perfect é o objetivo, e nem mesmo PDF você vai chegar lá, você pode muito bem dar-se imediatamente sobre a impressão a partir do browser. Há waaaay muitas variáveis ??quando renderização do lado do cliente: a partir de diferentes navegadores (?! IE6 Boa sorte) para diferentes fontes, para as configurações de usuário, a A4 vs papel de tamanho Carta .

Eu poderia perguntar por que PDF não combina?

Answer 3

Eu concordo que layouts de pixel-perfect são muito, muito difícil de alcançar com html / css, particularmente com formulários. No entanto, penso pdfs pode receber a entrada de formulários web externos, ou ter textfields que quando preenchido será impresso.

Flex saída para pdf seria uma boa idéia, mas eu não acho que usando o flex como um motor de renderização vai ajudar muito com isso.

Outra opção seria fazer o pdf e usar um langage do lado do servidor para personalizá-lo com campos de um formulário Web anterior, e de saída o resultado. (Pode ser feito facilmente com ruby ??/ django / php, há algumas boas bibliotecas pdf lá fora.)

Answer 4

Primeiro, abandonar pixels. O que você está procurando um estilo de impressão, com tudo especificado utilizando unidades físicas (cm / polegadas), o tamanho da fonte em pt, etc. O que é exibido na tela, em que o tamanho da fonte, e se é de pixel-perfeito ou não não parece relevante para a sua exigência de produzir uma cópia scannable .

A questão é agora, é o apoio IE6 para as unidades físicas e de estilo de impressão suficientes completa para isso? Dada a minha experiência com a tomada de estilo de impressão para os clientes, onde IE simplesmente falhar durante o processo de impressão, se você olhou para ele errado, eu diria que não é muito provável - não com a complexidade das formas que você está lidando com

Answer 5

Se você está preocupado com o renderizador (IE, Acrobat, etc.) enroscando-se, você sempre pode tornar o formulário no servidor, e apenas servir uma imagem para o usuário.