- O design responsivo, peça central da experiência web, deve considerar não só os dispositivos, mas também a adaptação ao meio de saída (impressão)
- Por acessibilidade, exigências legais, viagens e vários outros motivos, a qualidade e a utilidade da impressão de páginas web continuam sendo importantes
- Com recursos específicos de impressão do CSS, como
@media print, @page, unidades absolutas e page-break, é possível implementar um layout limpo, divisões adequadas e impressão eficiente
- Elementos desnecessários, como navegação e rodapé, devem ser ocultados, e informações como links e abreviações precisam ser complementadas para o papel
- Considerando impressão em preto e branco, economia de tinta e legibilidade, convém minimizar o uso de cores e fundos e incentivar melhorias complementares entre impressão e tela
A necessidade do design web para impressão
- Do ponto de vista da acessibilidade, mesmo quem não consegue olhar para a tela por longos períodos pode obter informações por meio de conteúdo impresso
- Falta de internet durante viagens, obrigações legais e de retenção de políticas dentro de organizações e outros cenários mostram que o uso de materiais impressos ainda é bastante variado
- Há muitos pontos em comum com formatos de publicação digital como EPUB, então a experiência com estilos de impressão é uma técnica altamente expansível
- Como as pessoas realmente imprimem sites para uso prático, dar suporte à impressão contribui para melhorar a qualidade da experiência geral do usuário
Como aplicar estilos de impressão
- Usando
@media print no CSS, é possível definir estilos exclusivos para impressão
- Existem várias formas, como
<link rel="stylesheet" media="print">, @import url("...") print e @media print { ... } dentro do CSS interno
- Para estilos exclusivos de tela, use
@media screen
Testando estilos de impressão
- Navegadores como Edge, Chrome, Firefox e Safari oferecem recursos de simulação de mídia de impressão
- O resultado da simulação pode diferir da impressão real, e a maioria dos navegadores define por padrão a desativação de fundos (economia de tinta)
- Recomenda-se testar levando em conta o ambiente de impressão real
Unidades absolutas e a regra @page
- O CSS oferece várias unidades absolutas, como cm, mm, in, pt e px, úteis para ajustes precisos de tamanho na impressão real
- Com a regra
@page, é possível definir tamanho do papel (A4, A5 etc.), margens, orientação e outros aspectos
- Também é preciso considerar os limites da área imprimível da impressora e os rodapés/cabeçalhos adicionados automaticamente pelo navegador
Quebra de páginas e gestão de parágrafos
- Em conteúdos longos, a quebra de páginas é essencial, e as propriedades
break-before, break-after e break-inside permitem controlar os pontos adequados
- A sintaxe antiga
page-break-* ainda mantém compatibilidade
- Com as propriedades
orphans e widows, é possível minimizar linhas soltas no início ou no fim de parágrafos, embora alguns navegadores não ofereçam suporte
box-decoration-break ajuda a manter a consistência visual de bordas e outros elementos de UI quando há quebra de página
Adaptação de elementos interativos para impressão
- No papel, links e abreviações não são interativos, então é possível adicionar URLs e informações à saída com
a[href]:after, abbr[title]:after e afins
- Elementos de formulário podem ser organizados como campos de preenchimento para impressão, e contêineres com rolagem precisam ser expandidos com algo como
overflow: visible
- Elementos desnecessários, como navegação e rodapé, podem ser removidos com
display: none, controlando para que apenas main seja impresso
Cor, tinta e legibilidade
- Partindo do princípio de impressão em preto e branco e economia de tinta, o destaque visual pode ser substituído por bordas em vez de cores de fundo
- Com
print-color-adjust: exact, é possível forçar a preservação de cor apenas em elementos específicos (use somente quando necessário)
- Recomenda-se minimizar imagens ao estritamente necessário e remover elementos com alto consumo de tinta, como anúncios
Conclusão
- A web existe não só na tela, mas também no mundo físico (papel)
- Os estilos de impressão em CSS são um elemento central para elevar a acessibilidade e o nível de acabamento da experiência do usuário
- Para que todos os usuários possam consumir conteúdo de formas diversas, o suporte à impressão é uma competência essencial do desenvolvimento web moderno
2 comentários
Por outro lado, a própria postagem em questão não é amigável para impressão.
UIs sem utilidade na hora de imprimir, como
COPY TO CLIPBOARD, acabam sendo impressas,os snippets de código ficam cortados e a barra de rolagem horizontal também é impressa.
Vale consultar também um resumo de CSS para impressão em papel.
Imprimir uma página web em papel e exportá-la como PDF são coisas diferentes (como usar cores sem se preocupar com tinta, ou poder usar hyperlinks), e há bibliotecas relacionadas como o paged.js.
Vale a pena considerar isso na criação de páginas para manuais, materiais didáticos e folhas de exercícios!