CSS para Impressã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).

Esse é umrecurso muito utilizado pelos usuários, principalmente quando o assunto da sua página envolve muito texto!

Quando seu site tem um conteúdo que possa ser impresso, como textos longos, artigos ou um currículo, é uma boa idéia 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.

É necessário ao leitor ter algum conhecimento de 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 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 idéia é 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;}

A diferença entre os atributos display: none; e visibility: hidden é que o primeiro remove completamente o elemento da tela (ou do papel), enquanto o segundo não exibe o elemento, mas deixa o espaço que ele ocuparia em branco. Dependendo do efeito desejado, a diferença é muito grande.

 

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			{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, ao invés 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.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: