Skip to main content

Técnicas para impressão | CSS

  • Técnicas para impressão | CSS

🖨️ Preparando Páginas para Impressão com CSS, Paged.js e Outras Ferramentas

1. Introdução​

Ao converter conteúdo web em PDFs ou documentos impressos, é essencial ajustar estilos e comportamentos que funcionam bem na tela, mas não em papel. O CSS moderno, junto de bibliotecas como Paged.js, permite criar layouts profissionais para impressão diretamente a partir de HTML.

2. Fundamentos do CSS para Impressão​

2.1. Mídia de Impressão​

Use a regra @media print para definir estilos aplicáveis apenas ao modo de impressão:

@media print {
  body {
    font-family: "Times New Roman", serif;
    color: black;
    background: none;
  }
  nav, footer, .no-print {
    display: none;
  }
}

💡 Dica: Sempre esconda menus, botões e elementos interativos que não fazem sentido em papel.

3. Configuração de Página com @page​

A regra @page define margens, orientação e tamanho de página:

@page {
  size: A4 portrait;
  margin: 2cm;
}

Outras opções úteis:

  • size: letter; → Formato americano
  • size: landscape; → Orientação horizontal
  • margin: 1in; → Margens em polegadas

Você também pode definir margens personalizadas por página com seletores:

@page:first {
  margin-top: 5cm;
}

4. Cabeçalhos, Rodapés e Numeração de Páginas​

Usando Paged.js ou PrinceXML, é possível criar cabeçalhos dinâmicos:

@page {
  @top-center {
    content: "Relatório de Vendas 2025";
  }
  @bottom-right {
    content: "Página " counter(page) " de " counter(pages);
  }
}

🔹 Paged.js interpreta esses comandos no navegador e gera PDFs navegáveis e paginados. 🔹 PrinceXML é uma alternativa comercial mais robusta (suporte avançado a PDF/A, links, sumários, etc).

5. Paged.js: Como Funciona​

5.1. Instalação​

Inclua o script na sua página:

<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>

5.2. Renderização​

Paged.js lê o CSS e divide o conteúdo automaticamente em páginas virtuais. Ele respeita:

  • @page e @media print
  • Contadores CSS (counter(page))
  • Regras de quebra de página (break-before, break-after, break-inside)

Exemplo:

h1 {
  break-before: page;
}

6. Outras Ferramentas Úteis​

FerramentaTipoDestaque
Paged.jsJS / Open SourceSimula impressão no navegador
PrinceXMLSoftware comercialSuporte profissional a CSS3 Print
WeasyPrintPythonConversão HTML → PDF
VivliostyleJS / Open SourceVoltado para livros e revistas digitais

7. Boas Práticas​

✅ Defina margens e espaçamentos consistentes ✅ Use fontes seguras para impressão (serifadas geralmente funcionam melhor) ✅ Teste em diferentes tamanhos de papel ✅ Gere PDFs para revisão antes da impressão real ✅ Adicione metadados e sumário com ferramentas como Paged.js hooks

8. Conclusão​

CSS para impressão evoluiu significativamente. Com Paged.js, PrinceXML e Vivliostyle, você pode criar PDFs e livros digitais diretamente a partir de código web, mantendo controle total sobre layout, tipografia e paginação.