Media Print

Existe uma técnica de CSS muito simples e relativamente pouco utilizada conhecida como Media Print, que fornece uma adaptação do conteúdo de um site para impressão. Para você ter uma idéia do porque utilizar esta técnica vou te dar um exemplo prático. Imagine um site de RPG com fundo preto e letras em brando, cheio de imagens grandes e vários itens de menu. Este site fornece diversas dicas e informações sobre diversos games. Como muitas dessas dicas podem ser utilizadas durante um jogo, nada mais natural do que alguém querer imprimir e guardar. Imagine você imprimindo uma página com fundo preto e letras em branco na sua impressora. Não faz sentido alguém imprimir banners, publicidade, itens de menu, animações etc. O conteúdo deve ser impresso sem consumir recursos desnecessários da impressora.

Através de um folha de estilos alternativa, você pode controlar a aparência do que pode ser impresso, deixando na página somente aquilo que interessa ao usuário, ou seja, o conteúdo. Você pode fazer isso somente utilizando CSS sem ter que alterar o seu XHTML. Veja como fazer.

Removendo o Conteúdo

O primeiro passo que você deve fazer é criar uma outra folha de estilos, e ir removendo por CSS todos os elementos da página desnecessários para impressão, como background e marca d’águas colocando o <body> na cor branca, removendo menus, banners, publicidade etc. basicamente você pode agrupar todos este itens e usar a declaração display:none; como no exemplo:

#menu, .navegacao, .banners, .publicidade, .animacoes { display:none; }

O próximo passo é ajustar o conteúdo que deve ser impresso na página. Por causa de uma falha no Mozilla e também no Netscape 6.x ao imprimir grandes conteúdos inseridos dentro de objetos com a propriedade float, você precisa retirar todo os float dos elementos que contem o conteúdo da seguinte maneira:

#conteúdo { float:none; }

Por que isso é necessário? Se você tem uma página onde o conteúdo ultrapassa a quantidade de uma folha impressa, por exemplo um documento de 5 páginas, e este conteúdo está dentro de algum elemento com float, você só vai conseguir imprimir a primeira folha do documento. Por isso é necessário utilizar float:none em elementos com propriedades de flutuação.

Para não se perder na hora de criar sua folha de estilos para impressão procure seguir os seguintes passos.

  1. É interessante deixar que seja impresso somente o nome do site, o nome do artigo ou do texto, o conteúdo e um rodapé.
  2. Procure colocar uma margem no body de 5%, deixando o fundo branco com letras em preto.
  3. Sempre adapte o tamanho da fonte para pt. Eu recomendo 12pt.
  4. Anule as propriedades de flutuação se houver utilizando float:none;
E como ficam os links?

Se no documento que você imprimiu tiver algum link, após impresso, normalmente você não vai conseguir identificar qual a URL a qual ele faz referência. Eric Meyer deu uma solução muito interessante. Em browsers que aceitam CSS2, como o Mozilla Firefox, você pode inserir a URL respectiva na frente de cada link da seguinte maneira:

#conteudo a:link:after { content: " (" attr(href) ") "; }

A declaração #conteudo refere-se ao elemento no XHTML que contém o texto a ser impresso. Se você testar em um browser como o Mozilla, você verá a URL de cada link na frente e entre parênteses. Em browsers sem este tipo de suporte, não haverá nenhum efeito, não haverá URL na frente de cada link e você não saberá qual URL ele linkava!

Para finalizar link sua folha de estilos media print no seu documento XHTML da seguinte maneira.

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

Para saber mais:

Dois bons artigos no A List Apart, aqui e aqui.