Ora a página sai completamente desformatada, com textos cortados pelo tamanho físico finito da página, ora a página sai com um excesso de informações irrelevantes.

A discussão sobre qual o resultado, digamos, ideal em uma impressão é certamente um tópico de muitas opiniões. Cameron Adams em seu post sobre impressão de páginas que o diga.

Como eu também tenho minha opinião, =), não poderia deixar de expressá-la! Porém, vou começar explicando tecnicamente como funcionam as técnicas (com o perdão da redundância para um ajuste fino de impressão de páginas web para, só então, argumentar um pouco entre os prós e contras destas técnicas.

Tudo começa com CSS

Se você está lendo este artigo certamente sabe o que é (ou são) CSS. Usar CSS na hora da impressão é uma das (muitas) formas de se conseguir uma impressão personalizada do documento exibido em tela.

A vantagem de aplicar CSS é sua facilidade. Com uma simples folha de estilos nova, você pode dar um visual mais organizado e limpo à sua impressão.

CSS para impressão

Talvez você não saiba mas é possível definir exatamente em quais tipos de mídia sua folha de estilos será aplicada. Você pode ter CSS que se apliquem apenas na exibição em tela, apenas na impressão, num palm, em leitores de tela, num projetor… Veja a listagem completa.

Para aplicar um arquivo CSS externo apenas na impressão é muito simples:

<link href="arquivo.css" media="print" rel="stylesheet" type="text/css" />

O segredo está ali no atributo media. Definido em print o arquivo será aplicado apenas na impressão do documento. Se você fizer uma pré-visualização da impressão (print preview) também funciona.

Agora que nosso arquivo já está sendo chamado pela página é hora de fazer algumas considerações e adicionar regras para formatar e ajustar nosso documento.

Fontes

Fontes sem serifa e tamanhos em pixel? Não, não na impressão. =) Embora a combinação anterior seja muito comum quando visualizamos uma página na tela, quando o assunto é impressão a combinação melhor aceita é outra: Fontes serifadas e tamanhos em pontos!

Se você não sabe a diferença entre uma fonte serifada e uma não, não se preocupe, é bem fácil. A fonte serifada tem aquelas “perninhas”/enfeites/detalhes/decorações nos cantos para facilitar a leitura! Se você disser que eu escrevi “perninhas”, eu nego! =)

Veja a imagem abaixo que ilustra muito bem a diferença:

Diferença visual entre uma fonte serifada e outra sem serifa
Imagem original: http://pt.wikipedia.org/wiki/Serifa

Um exemplo prático? Claro:

body {
font: 12pt georgia, serif;
}

No exemplo acima, definimos que o corpo da página terá fonte Georgia (ou na falta desta, uma outra serifada disponível) com tamanho 12 pontos. Nada de novo, certo? =)

Com muita facilidade você pode construir suas folhas de estilo usando como base o tamanho de fonte definido para o body. Se você costuma usar esta técnica, ótimo! Basta alterar em um único local o tamanho da fonte e todo o restante dos estilos reflete a atualização.

E um CSS sem a definição do tipo de mídia?

Quando você não define um tipo de mídia para seu arquivo CSS, automagicamente o valor all é assumido, indicando que sua folha de estilos será aplicada a todos os tipos de mídia. Isso, porém, nem sempre é bom. =)

Provavelmente você vai acabar criando uma regra que não é adequada na maioria das mídias e depois você terá todo um trabalho para sobreescrever esta regra adequadamente. A melhor forma, na minha opinião, é aplicar a folha de estilos apenas nos tipos de mídia que você realmente quer.

O atributo media permite que você passe uma lista, separada por vírgulas, com os tipos de mídia que a folha de estilos vai ser aplicada. Exemplo: (saiba mais)

<link href="arquivo.css" media="screen, print, tv" rel="stylesheet" type="text/css" />

Com menos regras genéricas afetando sua folha para impressão, você terá um controle mais claro sobre quais estilos estão sendo aplicados, o que vai facilitar sua vida e suas primeiras aventuras no mundo da impressão web. =)

Para construir o restante do arquivo CSS é muito simples. Basta criar as regras da mesma forma que você faz quando cria uma folha de estilos comum, para visualizar no monitor. Porém, veja abaixo algumas dicas sobre o que fazer e o que evitar na hora de construir seus estilos.

Preto no branco

Como estamos falando de impressão, a combinação básica preto e branco é a escolha ideal. Por questões claras de contraste, essa combinação deve ser usada na maioria dos casos. Cores somente onde for estritamente necessário e, pode ter certeza, a maioria das pessoas vai imprimir em preto e branco. =)

Cuidados com os links

Existem dois cuidados básicos com links da página a ser impressa:

• Que eles seja visualmente identificáveis;
• Que eles sirvam para alguma coisa.

A primeira parte é fácil, se você colocar um sublinhado em seus links eles já vão se tornar mais facilmente identificáveis.

Para entender a segunda parte, pare e pense: para que serve um link numa folha de papel? Você não pode clicar nele, como vai saber para onde aquele link aponta?

A solução para isso é exibir, após o texto do link, a URL de destino do link. Usando apenas CSS você consegue isso com facilidade. Vou pegar o exemplo das páginas deste blog para ilustrar:

#post a[href]:after {
content: " (" attr(href) ") ";
}

Na regra acima, eu defino que todos os links dentro da div#post terão seus destinos (o atributo href) exibidos após o link com a propriedade content.

Tudo muito lindo e maravilhoso… se “nosso amigo” Internet Explorer entendesse a regra. Quem imprimir a página pelo Internet Explorer não vai ter os links com a real utilidade, so sorry. ;P

Float e position

Evite usar elementos com as propriedades float e position com valores diferentes de none e static, respectivamente. Não é proibido usar eles, claro. Se você conhece muito bem CSS, não terá problemas ao lidar com essas propriedades.

Apesar disso, mesmo que você seja um guru do CSS, alguns navegadores apresentam inconsistências na implementação destas propriedades. Se você precisar usar algumas destas propriedades, faça alguns testes para garantir o resultado esperado.

Fazendo a faxina na página

É muito provável que vários dos elementos da sua página não seja interessantes na hora da impressão. Exemplos:

• Menu de navegação;
• Publicidade;
• Vídeos/Flash/etc… (caso existam)
• Textos estáticos em geral, de baixa importância para o conteúdo principal da página.

Cores de fundo

Por padrão, os navegadores não vão imprimir as cores de fundo dos elementos, porém bordas sim. Aproveite-se disso e use bordas para fazer uma melhor delimitação ou separação do conteúdo da página.

E juntando tudo, o que temos?

Quando você combina todas essas dicas, o resultado de sua impressão é uma página mais clara, leve e organizada, com foco no conteúdo principal.

Porém, existe uma grande discussão acerca do que exatamente o usuário está interessado quando ele vai imprimir uma página. Será que ele está interessado realmente no conteúdo da página? Ele não pode ter gostado do layout da página e gostaria de imprimir para analisar mais tarde? Uma publicidade bem direcionada que chamou sua atenção?

Verdade seja dita, você nunca vai conseguir contemplar todos os gostos ou desejos que as pessoas tenham ao imprimir sua página. Deixar da melhor e mais usada forma eu já considero como um grande progresso! =)

Resumindo

Preparar um CSS para impressão vai garantir que as pessoas tenham uma melhor experiência quando imprimirem suas páginas. Uma página limpa garante uma leitura mais agradável, sempre.

E como preparar os estilos para impressão é uma tarefa realmente simples, que tal gastar os próximos 15 minutos e melhorar a experiência de impressão do seu site/blog? =)

Referências

CSS

Tipos de mídias CSS

O que são fontes serifadas

Múltiplas mídias para seu CSS

Propriedade content

Post do Cameron Adams sobre impressão de páginas

Impressão web no A List Apart

Criando páginas amigáveis para impressão

Mais sobre páginas amigáveis para impressão

Uma introdução sobre fontes

Mais dicas na hora da impressão