Dicas de CSS para impressão

Postado por em
republicado de tableless.com.br

Dicas de CSS para impressão

Autor(a): Dani Guerrato

Uma das premissas básicas do Design Responsivo é oferecer a melhor experiência do usuário, independente do meio utilizado para acessar a informação. Muitas vezes nos preocupamos muito com smartphones, tablets e outros dispositivos móveis e esquecemos de um tipo de mídia que ainda é essencial para a leitura: o papel. Pois é, o usuário pode sentir a necessidade de imprimir uma página na web por muitos motivos: portabilidade, guardar o conteúdo “offline” ou simplesmente por que – eReaders que me desculpem – é muito mais confortável ler em um papel. Mas nem todos os sites da web estão preparados para serem impressos. São muitos os elementos de um layout que na hora da impressão não servem para mais nada além de nos fazer gastar tinta a toa e distrair do foco do texto. Neste artigo vou dar algumas dicas básicas de CSS para impressão que vão ajudar a contornar os problemas mais comuns e deixar o seu layout prontinho para o papel. Vamos a elas!

Para ilustrar este post eu criei uma pequena demo utilizando como base um outro artigo aqui do Tabless só para ter um conteúdo.

Primeiros passos

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

1. Criando um arquivo .css com estilos específicos para impressão e chamando no head do site:

  1. <!-- CSS para impressão -->
  2. <link rel="stylesheet" type="text/css" href="/print.css" media="print" />

2. Ou através de media types no final da sua folha de estilos principal:

  1. /*CSS para impressão*/
  2. @media print {
  3. }

Ressetando estilos

Dependendo do seu layout atual talvez seja uma boa ressetar algumas propriedades como cor de fundo, margens e espaçamentos para “começar do zero” sua folha de impressão. Definir o valor de texto para preto também é uma boa prática, já que dificilmente o usuário prefere imprimir colorido. Também desativamos sombras de texto e outros filtros.

  1. * {
  2. background:transparent !important;
  3. color:#000 !important;
  4. text-shadow:none !important;
  5. filter:none !important;
  6. -ms-filter:none !important;
  7. }
  8.  
  9. body {
  10. margin:0;
  11. padding:0;
  12. line-height: 1.4em;
  13. }

Agora podemos definir uma margem única para todo o layout utilizando @page. Já que estamos no “mundo real” podemos descartar medidas em pixels. Repare que o valor está em centímetros.

  1. @page {
  2. margin: 0.5cm;
  3. }

Controlando o conteúdo

A regra essencial na hora de criar boas folhas de estilo para impressão é: aprenda a controlar o conteúdo. Muitas das áreas de um site não precisam ser impressas, ou, pelo menos não exatamente de maneira idêntica a versão online. Elementos como navegação, banner, footer podem, e devem, ser retirados para criar uma leitura mais agradável. Para se livrar deste conteúdo o bom e velho display none é seu amigo. Isto também vale para videos, audio, etc. Você pode criar uma listinha negra com o que deseja retirar:

  1. nav, footer, video, audio, object, embed { 
  2. display:none; 
  3. }

Você pode criar duas classes para facilitar este trabalho. “Print” para os elementos que deseja que sejam mostrados apenas na impressão e “no-print” para aqueles que você quer esconder. Basta colar ese código na sua folha de estilos para impressão e aplicar as classes no HTML.

  1. .print {
  2. display:block;
  3. }
  4.  
  5. .no-print { 
  6. display:none; 
  7. }

Lembre-se de inverter estes atributos no CSS normal.

  1. .print {
  2. display:none;
  3. }
  4.  
  5. .no-print { 
  6. display:block; 
  7. }

Uma recomendação essencial para facilitar o seu trabalho nesta hora é: utilize tabelas apenas para dados tabulares ou você terá um grande problema para fazer esta separação entre layout e conteúdo. Mas, se você é um leitor aqui do Tableless, não preciso me preocupar em falar isto, certo?

Outro ponto importante é a questão das imagens. Não queremos que imagens grandes sejam cortadas para fora do papel. Temos duas soluções neste caso: determinar uma largura máxima em um valor fixo como pixels ou estabelecer o tamanho máximo como 100%.

  1. img {
  2. max-width: 100%;
  3. }

Se a sidebar for algo relevante ao seu leitor, você pode posiciona-la abaixo do texto.

  1. aside {
  2. display:block;
  3. page-break-before: always;
  4. }

Agora é hora de dar uma espaço maior ao conteúdo principal.

  1. .wrap { 
  2. width: 100%; 
  3. margin: 0; 
  4. float: none !important; 
  5. }

Estilos de Texto

A maior parte das pessoas imprime em preto e branco pois é mais prático e econômico. Lembre-se disto na hora de definir seus estilos de texto. Nesta hora também é legal aproveitar para reajustar o tamanho, margem, padding e altura da linha dos elementos para garantir uma melhor leiturabilidade. Ah, se você estiver utilizando uma fonte display maluca super estilosa para os títulos e parágrafos talvez seja interessante trocar para algo mais “normal”, de preferência serifado já que existe um consenso que este tipo de letra é melhor para a leitura impressa. Alterar a únidade de px/em para pontos (pt) também é uma boa prática. Não se esqueça de definir novos tamanhos também para os títulos.

  1. body {
  2. font: 12pt Georgia, "Times New Roman", Times, serif;
  3. color: #000;
  4. }
  5.  
  6. h1 {
  7. font-size: 24pt;
  8. }
  9.  
  10. h2 {
  11. font-size: 18pt;
  12. }
  13.  
  14. h3 {
  15. font-size: 14pt;
  16. }

Outra dica bacana é expandir a atribuição de citações.

  1. q:after {
  2. content: " (" attr(cite) ")";
  3. }

Links

Muitas vezes diferenciamos links de texto apenas por cores. Isto obviamente não vai funcionar para quem imprimir em preto e branco. Vamos garantir que todos fiquem grifadinhos para facilitar a identificação.

  1. a, a:visited {
  2. text-decoration: underline;
  3. }

Ok, agora seu usuário já sabe dizer o que é texto e o que é link. Mas não é preciso nem dizer que é impossível clicar em um papel. Um truque bacana para solucionar este problema é especificar a URL entre parenteses após o link para que seja fácil encontrar a referência no futuro.

  1. a:link:after, a:visited:after {
  2. content: " (" attr(href) ") ";
  3. }

Este parâmetro não é compatível com browsers antigos. Mas temos que nivelar por cima, certo? Não é interessante mostrar links internos para imagens ou JavaScript. Para isto utilizamos o seguinte parâmetro.

  1. a:after, a[href^="javascript:"]:after, a[href^="#"]:after { 
  2. content: ""; 
  3. }

Como links muito grandes podem quebrar o parágrafo vale a pena acrescentar mais uma regrinha.

  1. p a {
  2. word-wrap: break-word;
  3. }

Sobre viúvas e orfãs

Já reparou que na hora de imprimir as vezes fica uma última linha solitária de texto ou palavra perdida em uma página por falta de espaço na página anterior? Em tipografia esta linha chata é chamada de viúva e pode causar um desperdício enorme de espaço como, por exemplo, imprimir uma página inteira a mais com uma única palavra. Para controlar melhor o fluxo de texto podemos utilizar a propriedade “widows” e determinar o número mínimo de linhas que podem sobrar sozinhas no topo de uma página.

  1. p {
  2. widows: 3;
  3. }

Outro pepino tipográfico semelhante é quando resta apena a primeira linha na página atual pois, por falta de espaço, o restante do parágrafo foi empurrado para a próxima página. Neste caso a linha é chamada de orfã. Mas podemos resolver este problema mais uma vez com o poder do CSS determinando um número mínimo de linhas que devem ficar no final da página.

  1. p {
  2. orphans: 3;
  3. }

Quebras de página

Se o seu texto é especialmente longo (no caso de um artigo ou até mesmo um livro) talvez seja interessante acrescentar quebras de página. Para isto adicione a classe .page-break ao seu CSS. É possível determinar quebras anteriores (page-break-before) ou posteriores (page-break-after) ao elemento html. Estas duas propriedades aceitam os seguintes valores:
auto, always, avoid, left, right e inherit.

Exemplo de aplicação em uma classe de CSS.

  1. .page-break { 
  2. page-break-before: always; 
  3. }

Elementos customizados

Talvez seja interessante incluir um cabeçalho ou rodapé especialmente criado para a impressão, com uma versão em preto e branco do logotipo ou qualquer outro elemento que você desejar incluir. É só criar uma classe especial para a impressão. Basta usar a nossa classe especial “print”. Vale até deixar uma mensagem com a URL do site.

  1. <header class="header print">
  2. <h1>Artigo "Dicas de CSS para a impressão" escrito pela autora Dani Guerrato retirado do site www.tableless.com.br.</h1>
  3. </header>

Demo

Se você quiser testar o resultado final baixe a folha de estilos utilizada neste artigo no GitHub e use como base e crie seus próprio layout pronto para a impressão. Não se esqueça de ler alguns dos artigos indicados abaixo para mais dicas ótimas. Até a próxima!

Comentários

Postar um comentário