Dicas de CSS para impressão

0

Uma das condições básicas do Design Responsivo é fornecer a melhor experiência do usuário, qualquer que seja o meio usado para acessar a informação. Muitas vezes nos preocupamos muito com tablets, smartphones e outros dispositivos móveis e esquecemos um tipo de suporte que é essencial para a leitura: o papel. Isso mesmo, o usuário poderá sentir a necessidade de imprimir uma página na web por vários motivos: guardar o conteúdo “offline”, portabilidade, ou simplesmente por que gostam mais de ler em um papel. Mas nem todos os websites estão prontos para serem impressos. Existem vários elementos de um layout que na impressão não servem para nada além de nos fazerem gastar tinta e distrair do foco do texto. No artigo de hoje vamos dar algumas dicas simples de CSS para impressão que vão auxiliar a contornar os problemas mais comuns e deixar o seu layout pronto para sair no papel. Vamos lá!

code-1568556_960_720

Primeiros passos

Você pode definir o CSS para impressão de duas formas.

  1. Criando um arquivo .css com estilos próprios para impressão e chamando no head do site,
  2. Ou com media types no fim da sua folha de estilos principal.

 

Apagando estilos

Tudo depende do seu layout atual mas talvez seja uma boa ideia apagar certas propriedades como margens, cor de fundo e espaçamentos para começar tudo de novo em sua folha de impressão.

Outra boa ideia é definir o valor de texto para preto, pois dificilmente o usuário imprime colorido. Desative também sombras de texto e outros filtros.

Agora você pode definir uma margem única para todo o layout usando @page. Já que estamos em modo offline podemos descartar medidas em pixels. O valor estará em centímetros.

web-1668930_960_720

Controlando o conteúdo

A regra principal quando você criar folhas de estilo para impressão é aprender a controlar o conteúdo. Muitas das áreas de um site não necessitam ser impressas, ou, pelo menos não de maneira igual a versão online. Elementos como banner, navegação, footer podem ou devem, ser retirados para criar uma leitura mais fácil. Para se libertar deste conteúdo o display none será seu amigo. Isto também vale para áudio, vídeos, etc. Você pode criar uma lista negra com o que quer retirar.

É possível criar duas classes para tornar este trabalho mais fácil. “Print” para os elementos que quer que sejam apresentados somente na impressão e “no-print” para aqueles que você deseja esconder. Basta colar o código na sua folha de estilos para impressão e empregar as classes no HTML. Não esqueça de inverter estes atributos no CSS normal.

Uma recomendação muito importante para facilitar o seu trabalho nesse momento é: use tabelas somente para dados tabulares ou você pode ter um grande problema para criar esta separação entre conteúdo e layout.

Outro fator importante são as imagens. Devemos ter cuidado para que as imagens grandes não sejam cortadas para fora do papel. Nesse caso, temos duas soluções: delimitar uma largura máxima em um valor fixo como pixels ou determinar o tamanho máximo como 100%.

Se a sidebar for relevante para seu leitor, você pode posicioná-la abaixo do texto.

Agora você deve dar uma espaço maior ao conteúdo principal.

 

Estilos de Texto

A maior parte das pessoas imprime em preto e branco pois é mais barato e prático. Não esqueça disto na hora de esclarecer seus estilos de texto. Nesta hora também é bom aproveitar para readaptar a margem, padding, tamanho, altura da linha dos elementos para certificar uma melhor leitura. Outra coisa importante: se você estiver usando uma fonte display estilosa para os parágrafos e títulos talvez seja melhor trocar para uma mais frequente, de preferência serifado já que existe um acordo que esse tipo de letra é melhor para a leitura impressa. Modificar a unidade de px/em para pontos (pt) também é uma boa tática. Não se esqueça de alterar novos tamanhos para os títulos também.

 

Com essas dicas de CSS para impressão será mais fácil que seu website saia direitinho na hora de imprimir.

Deixe uma resposta