O básico do CSS para impressão

Por Erika Sarti, em 02_08_2008. Atualizado em 10_08_2011.

Introdução

Você já deve ter visto em muitos sites um link com a opção "versão para impressão" ou "imprima esta página" (ou algo equivalente). Aqui no Infowester mesmo este recurso está presente no início ou final de praticamente todos os textos.

Quando seu site tem um conteúdo que possa ser impresso, como textos longos, artigos ou um currículo, é uma boa ideia utilizar declarações CSS (Cascading Style Sheets) próprias para a mídia impressa, assim você pode controlar aparência do que irá para o papel, deixando a página mais amigável e mais agradável de ser ler. É isso que você verá a seguir.

É necessário ao leitor ter algum conhecimento de HTML e CSS para compreender o artigo.

Como deve ser uma página impressa?

Cada caso é um caso, mas a maioria dos desenvolvedores concorda em algums aspectos:

• Definir todas as cores em tons de cinza;
• Sublinhar os links, e de preferência imprimir seus endereços;
• Escolher uma fonte serifada para os textos, que é mais fácil de ser lida no papel, já que foi criada para isso;
• Definir as unidades de texto em pontos, e não em pixels;
• Remover elementos não essenciais, como menus, barras laterais e, dependendo do caso, anúncios publicitários;
• Quando aplicável, destacar o endereço do site e o autor do texto.

Uma folha de estilo separada para a impressão

Para efeito de organização, você pode criar uma folha de estilos separada para a impressão e adicioná-la ao header de seu site:

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

Dentro do arquivo print.css, já no elemento body, você pode mudar vários atributos, como a cor de fundo e a aparência do texto:

	body	{background: #FFF; color: #000; font: 12pt serif;}

Depois, você pode definir uma outra cor para os links, adicionando um sublinhado para destacá-los no meio do texto:

	a:link, a:visited	{color: #333; text-decoration: underline;}

Se o seu texto tiver muitos links externos, uma boa ideia é imprimí-los também. Você pode fazer isso adicionando a seguinte linha à sua folha de estilos para impressão:

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

Para esconder elementos, como menus, barras de navegação e propagandas, use o atributo display: none;:

	#menu, #lateral		{display: none;}

Quando o texto estiver dentro de um div de largura fixa, é uma boa idéia ajustar a largura e a margem para a folha de papel:

	#texto			{loading="lazy" width: 100%; margin: auto;}

Se o seu layout utiliza outros elementos coloridos, como títulos e bordas, você pode querer alterar as cores para tons de cinza também.

Finalizando

Este é um exemplo claro da importância de ter um código HTML semântico e organizado. O ideal numa página é que você consiga mudar totalmente a aparência dela sem mexer no HTML, apenas no CSS (como no CSS Zen Garden, por exemplo). Se isso é possível para o que será exibido na tela, também é perfeitamente aplicável à mídia impressa.

Todos os navegadores atuais têm a opção de visualização de impressão, mas você também pode testar a aparência da sua folha de estilos impressa salvando a sua página em PDF, em vez de gastar papel desnecessariamente.

Esse é um assunto muito complexo, mas aqui abordamos apenas o básico. O mesmo princípio usado para ter uma folha de estilo para impressão pode ser usado para modificar a aparência do seu layout para a exibição em dispositivos portáteis, por exemplo. Existem no mercado ótimos livros para que você possa se aprofundar no assunto, além de sites mais completos, como o próprio site da W3C (em inglês).

Erika Sarti é web designer e trabalha como free-lancer desde 2000, sendo também responsável pelo layout do Infowester. Mais informações em seu blog - www.erikasarti.com - e em seu portfólio - www.erikasarti.net -.