Estou assumindo que você deseja o máximo controle possível da janela impressa sem usar uma abordagem HTML para PDF ... Use a tela @media para depurar - @media print para css final
Os navegadores modernos podem fornecer um visual rápido do que acontecerá no momento da impressão usando polegadas e pontos em um @media query
.
@media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
html { width:8.5in; }
body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
...
}
Quando o navegador exibir "polegadas", você terá uma idéia melhor do que esperar. Essa abordagem deve terminar, exceto o método de visualização da impressão. Todas as impressoras trabalharão com as unidades pt
e in
, e usando a técnica @media, você poderá ver rapidamente o que vai acontecer e ajustar em conformidade. O Firebug (ou equivalente) agilizará absolutamente esse processo. Ao adicionar suas alterações ao @media, você obtém todo o código necessário para um arquivo CSS vinculado usando o media = "print"
atributo - basta copiar / colar as regras da tela @media no arquivo referenciado.
Boa sorte. A web não foi criada para impressão. Criando uma solução que entrega todo o seu conteúdo, estilos iguais aos vistos no navegador podem ser impossíveis às vezes. Por exemplo, um layout fluido para um público predominantemente de 1280 x 1024 nem sempre se traduz facilmente em uma impressão a laser agradável e elegante de 8,5 x 11.
Referência do W3C para fins purinos: http://www.w3.org/TR/css3-mediaqueries/