CSS para impressão em papel

Artigo original ↗ Discussão no Hacker News ↗

Layouts de impressão baseados em CSS estão sendo cada vez mais usados para gerar PDFs, livros, etiquetas e relatórios diretamente de HTML, mas desenvolvedores encontram suporte inconsistente dos navegadores e recursos ausentes como paginação confiável, cabeçalhos/rodapés e tipografia avançada. Muitos compartilham soluções alternativas e ferramentas — como Paged.js, WeasyPrint, PrinceXML e headless Chrome — para obter controle preciso sobre tamanho de página, quebra de tabelas, números de página e notas de rodapé sem recorrer a software tradicional de editoração. A visão geral é que CSS para impressão é poderoso e flexível o suficiente para muitos fluxos de trabalho reais, mas ainda não é robusto ou padronizado o bastante para substituir totalmente a composição tipográfica dedicada ou o ecossistema PDF.

Adoção de CSS para Impressão

  • Muitos comentadores usam HTML/CSS como a principal forma de gerar documentos imprimíveis: faturas, ebooks, livros de RPG, etiquetas, novelas na web, relatórios, CVs, certificados, livros de curso e livros didáticos.
  • As vantagens citadas: iteração rápida, templating fácil, integração com CMS/APIs/Markdown/Asciidoc, arquivos “fonte” pequenos e fluxos de trabalho de “é só usar um navegador”.
  • Alguns relatam grandes economias de tempo em comparação com ferramentas como InDesign para layout de textos longos, quando uma tipografia “boa o suficiente” é aceitável.

Problemas de Navegador e Engine

  • O suporte cross-browser para impressão é descrito como fraco e inconsistente; várias pessoas miram apenas o Chrome.
  • Chrome: o melhor no geral para CSS de impressão para muitos, mas ainda com bugs em tabelas multipágina e margens de impressão.
  • Firefox: relatos de imagens ou páginas inteiras desaparecendo ao imprimir, e uma alegação de bug antigo. Outros dizem que não tiveram esses problemas.
  • Safari: relatado como ignorando margens de página.
  • Impressoras de etiquetas/térmicas: especialmente dolorosas no navegador; as pessoas recorrem a apps nativos, Electron ou daemons de impressão.

Ferramentas e Fluxos de Trabalho

  • Ferramentas populares: Paged.js, WeasyPrint, PrinceXML, Flyingsaucer, wkhtmltopdf, Puppeteer/Playwright + headless Chrome, website2pdf, paper-css, Gutenberg, Hartija e Asciidoctor web-pdf.
  • Paged.js é frequentemente elogiado por implementar recursos de mídia paginada (notas de rodapé, números de página, cabeçalhos/rodapés correntes).
  • Algumas organizações proíbem certos runtimes (por exemplo, Python), restringindo a escolha de geradores.

Preocupações com Tipografia e Qualidade

  • CSS de impressão é visto como muito mais fraco do que ferramentas profissionais de DTP para tipografia avançada: cor CMYK, kerning fino, evitar rios, pontuação pendente, regras específicas de idioma e, especialmente, scripts complexos (por exemplo, japonês).
  • Workarounds (espaços sem quebra, spans com letter-spacing, ajustes manuais) são vistos como remendos e impraticáveis em escala.

PDF vs Formatos Web

  • Alguns argumentam para “apenas gerar PDFs” porque a impressão no navegador é confiável demais.
  • Outros gostam de fluxos HTML-first que depois renderizam para PDF via engines dedicados.
  • As opiniões sobre o próprio PDF se dividem: alguns o veem como “papel digital” excelente; outros não gostam do controle da Adobe, da complexidade de formulários/JS e da UX baseada em páginas nas telas. PDF/A é mencionado como um subconjunto estável e mais sensato.

Técnicas Práticas e Pegadinhas

  • Padrões comuns: @media print, @page para tamanho/margens, unidades físicas (in/mm), regras break-* para evitar títulos órfãos e figuras quebradas, uso de thead/tfoot para cabeçalhos de tabela repetidos, e URLs de links via a::after { content: " (" attr(href) ")"; }.
  • Remover cabeçalhos/rodapés do navegador e adicionar números de página de forma confiável, ou começar a numeração após um título, continuam sendo tarefas difíceis sem engines de mídia paginada ou layouts dirigidos por JS.