Folhas de estilo de impressão: tornar uma página web utilizável em papel e em PDF

Objetivo

Uma página que, ao ser impressa ou salva como PDF, contém o conteúdo e nada além disso, com tipografia legível, tabelas íntegras, destinos de links visíveis e quebras de página em lugares sensatos.

Pré-requisitos

Marcação semântica (as regras de impressão vão atuar sobre nav, header, footer, aside e main), a pré-visualização de impressão de um navegador para testes e o conhecimento dos mecanismos descritos no guia de impressão da MDN: @media print para regras exclusivas de impressão, a at-rule @page para dimensões, orientação e margens da página, os eventos beforeprint/afterprint para ajustar o documento em torno de um pedido de impressão e window.print() para abrir a caixa de diálogo.

Passos

1. Adicione um bloco @media print no final da folha de estilo (a especificidade continua valendo). Oculte os elementos de moldura: nav, header, footer, aside, .toolbar, button { display: none }; remova o posicionamento fixed e sticky, que de outro modo se repete em todas as páginas.
2. Redefina a página: fundo branco, texto preto, uma fonte serifada ou a fonte do corpo em um tamanho escolhido para papel, e max-width: none na coluna de conteúdo para que ela aproveite a largura da página.
3. Expanda o que a tela esconde: abra os elementos details, mostre todos os painéis de abas e corpos de acordeão e imprima os textos truncados por inteiro. Use o evento beforeprint onde o CSS não alcança (por exemplo, listas virtualizadas que só renderizam as linhas visíveis).
4. Mostre os destinos dos links: a[href^="http"]::after { content: " (" attr(href) ")" }, excluindo âncoras internas e links cujo texto já é a própria URL. Mostre os títulos de abbr da mesma forma, se forem relevantes.
5. Controle as quebras: break-inside: avoid em tabelas, figuras, blocos de código e grupos semelhantes a cartões; break-after: avoid em títulos, para que não fiquem isolados no fim de uma página; break-before: page antes das seções principais, quando apropriado; mantenha thead com o valor padrão display: table-header-group (não o sobrescreva), pois os motores de impressão podem repetir as linhas de cabeçalho em cada página que a tabela ocupa.
6. Defina @page { size: A4; margin: 2cm } (ou letter) e considere @page :first para uma margem diferente na primeira página.
7. Cor: os navegadores costumam descartar cores e imagens de fundo na impressão; quando um fundo carrega significado (indicadores de status, realce de sintaxe), defina print-color-adjust: exact somente nesse elemento e use, no restante, uma borda ou um rótulo de texto.
8. Teste na pré-visualização de impressão em dois navegadores, em retrato e em paisagem, e uma vez como "salvar como PDF"; verifique o número de páginas e se nada importante foi ocultado por um seletor amplo demais.

Resultado esperado

A impressão gera um documento compacto com todo o conteúdo, sem navegação, com código e tabelas legíveis e URLs que o leitor consegue digitar a partir do papel.

Limites e base de verificação

O comportamento segue a documentação da MDN citada; o suporte a quebras de página e os recursos de @page variam entre os motores, e os geradores de PDF headless têm seus próprios padrões. Conteúdo interativo (mapas, gráficos desenhados em canvas) precisa de uma imagem estática alternativa, fornecida à parte.

Ocultar a moldura do site, não todos os cabeçalhos

header, footer e aside têm como escopo a seção mais próxima; por isso, um simples header { display: none } também remove o bloco de título de um artigo, as notas de rodapé de uma seção e a atribuição de uma citação. Em vez disso, selecione a moldura no nível da página por posição ou por classe:

@media print {
  body > header, body > footer, body > nav,
  .site-sidebar, .toolbar { display: none; }
  article header, article footer { display: block; }
}

Mantenha os botões que mostram estado (um alternador acionado, a aba selecionada) e oculte apenas os controles sem significado no papel. Depois, execute o passo 8 com a pergunta invertida: liste o que a versão impressa deve conter e confirme que cada item está presente, em vez de procurar o que está faltando.