- Estou organizando isso porque, no trabalho, estou recriando e substituindo com uma ferramenta baseada na web formulários que antes eram preenchidos manualmente em papel/Excel usando HTML.
- Explica os conceitos básicos de CSS para controlar como uma página web aparece quando é impressa, além de algumas dicas e truques.
@page
@page é uma regra de CSS que informa ao navegador as configurações de impressão do site.@page inclui o DOM, e na web o elemento <html> é limitado pelas bordas da tela, mas na impressão ele é limitado por @page.- As configurações de
@page correspondem, em linhas gerais, às opções que você vê na caixa de diálogo de impressão do navegador ao pressionar Ctrl+P.
@media print
- Existe a media query
print, que permite escrever estilos aplicados apenas na impressão.
- Adicione
display:none a cabeçalhos, opções, textos de ajuda ao usuário etc. que não devem aparecer no material impresso.
Largura, altura, margem e padding
- É preciso entender o box model, e o motivo para definir
margin: 0 em @page é que se prefere lidar com as margens nos elementos do DOM.
- É mais fácil lembrar que o
<html> ocupa toda a folha física e que as margens ficam dentro do DOM.
Posicionamento de elementos
- Ao projetar o documento, posicione os elementos com HTML/CSS apropriados.
- Também é possível usar posicionamento absoluto quando for necessário criar retângulos que se encaixem em papel adesivo de tamanho específico ou imprimir dados em papéis com rótulos especiais.
Documentos com várias páginas e elementos repetidos
- Ao criar um gerador de impressão com dados tabulares, como uma fatura, quando uma
<table> passa para a segunda página o navegador replica automaticamente o <thead> no topo de cada página.
- Usa-se JavaScript para dividir a tabela em várias tabelas menores e assim gerar as páginas.
Modo retrato/paisagem
- O usuário pode sobrescrever a regra
@page se quiser.
- É possível criar elementos
<style> separados para os modos retrato e paisagem e alterná-los com JavaScript.
Fonte de dados
- Há várias formas de trazer dados para a página: empacotar tudo nos parâmetros da URL ou usar JavaScript para buscar registros do banco de dados via API.
- Defina
contenteditable para permitir que o usuário faça pequenas alterações antes de imprimir.
Opinião do GN⁺
- Este artigo oferece aos desenvolvedores web um guia útil sobre como escrever CSS para impressão. Em especial, será útil para quem trabalha convertendo páginas web em documentos físicos.
- CSS para impressão é um tema frequentemente ignorado, mas como muitas empresas ainda precisam imprimir documentos importantes, esse conhecimento tem valor.
- A abordagem técnica apresentada no artigo parece ter sido testada e validada em um ambiente de trabalho real, oferecendo soluções práticas para resolver problemas concretos.
- O uso da regra CSS
@page e da query @media print é importante para controlar o tamanho do papel e as margens ao imprimir páginas web, e é algo que desenvolvedores web precisam conhecer.
- O artigo vai além de uma compreensão básica de CSS para impressão ao oferecer exemplos práticos e dicas de aplicação real, ajudando a reduzir a distância entre teoria e prática.
2 comentários
Na próxima, quero tentar fazer um toy project com isso.
Comentários do Hacker News
Explicação sobre estilos de impressão preferidos em um site pessoal:
Experiência editando um livro com Pagedjs.org:
Problemas no suporte dos navegadores a CSS para impressão:
Facilidade de imprimir usando CSS:
Situação em que o suporte dos navegadores para impressão é tão ruim que é preciso criar um app nativo:
Reflexão sobre a história e a situação atual do CSS:
Como criar faturas e alguns e-books com HTML & CSS:
Menção ao paper-css, usado para gerar PDFs pelo navegador.
Vantagens de produzir materiais impressos com HTML/CSS:
Experiência usando conhecimentos de CSS para oferecer perfis de uma rede social em formato de impressão: