CSS para definir tamanho de papel A4

Eu preciso simular um papel A4 na web e permitir a impressão desta página como é mostrar no navegador (Chrome, especificamente). Defino o tamanho do elemento para 21 x 29,7 cm, mas quando envio para impressão (ou pré-visualização) ele corta minha página.

Veja este exemplo ao vivo !

body { margin: 0; padding: 0; background-color: #FAFAFA; font: 12pt "Tahoma"; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { width: 21cm; min-height: 29.7cm; padding: 2cm; margin: 1cm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .subpage { padding: 1cm; border: 5px red solid; height: 256mm; outline: 2cm #FFEAEA solid; } @page { size: A4; margin: 0; } @media print { .page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; background: initial; page-break-after: always; } } 
 
Page 1/2
Page 2/2

Eu acho que estou esquecendo alguma coisa. Mas o que seria?

  • Chrome : página de recorte, página dupla ( é exatamente o que preciso para funcionar )
  • Firefox : funciona perfeitamente.
  • IE10 : acredite ou não, é perfeito!
  • Opera : muito buggy na pré-visualização

    Eu olhei para isso um pouco mais eo problema real parece ser com a atribuição de initial a width página sob a regra de mídia de print . Parece que na width: initial Chrome width: initial no elemento .page resulta no dimensionamento do conteúdo da página se nenhum valor de comprimento específico for definido para width em qualquer um dos elementos pai ( width: initial , neste caso, resolve para width: auto … mas, na verdade, qualquer valor menor que o tamanho definido na regra @page causa o mesmo problema).

    Assim, não só o conteúdo é agora muito longo para a página (em cerca de 2cm ), mas também o preenchimento da página será ligeiramente maior do que os 2cm iniciais e assim por diante (parece renderizar o conteúdo em width: auto para a largura de ~196mm e, em seguida, dimensionar todo o conteúdo até a largura de 210mm ~, mas estranhamente exatamente o mesmo fator de escala é aplicado ao conteúdo com qualquer largura menor que 210mm ).

    Para corrigir este problema, você pode simplesmente na regra de mídia de print designar a largura e a altura do papel A4 para html, body ou diretamente para .page e, nesse caso, evitar a palavra-chave initial .

    DEMO

     @page { size: A4; margin: 0; } @media print { html, body { width: 210mm; height: 297mm; } /* ... the rest of the rules ... */ } 

    Isso parece manter todo o resto do jeito que está em seu CSS original e corrigir o problema no Chrome (testado em diferentes versões do Chrome no Windows, OS X e Ubuntu).

    CSS

     body { background: rgb(204,204,204); } page[size="A4"] { background: white; width: 21cm; height: 29.7cm; display: block; margin: 0 auto; margin-bottom: 0.5cm; box-shadow: 0 0 0.5cm rgba(0,0,0,0.5); } @media print { body, page[size="A4"] { margin: 0; box-shadow: 0; } } 

    HTML

        

    DEMO

    https://github.com/cognitom/paper-css parece resolver todas as minhas necessidades.

    Papel CSS para impressão feliz

    Solução de impressão front-end – pré-visualizável e recarregável ao vivo!