Olá.

     É clássico. Você navega, navega e navega até encontrar um bom artigo sobre um assunto de seu interesse. Encontrando-o, você decide imprimí-lo, pois ainda é muito mais conveniente / confortável ler longos textos no papel e não na tela. Ainda mais quando o site abusa da exibição de menus, banners, popup e anúncios em geral. Veja um exemplo de um "abuso" na imagem abaixo:

     Daí você decide imprimir a página. E é aí que a coisa realmente fica feia porque todos aqueles menus, banners, anúncios também são impressos, tornando a leitura do conteúdo da página impressa igualmente desestimulante e difícil de ler. Fica aquele enorme banner do Google dividindo o artigo no meio, quebrando o raciocínio e o fluxo da leitura...

     Tudo bem que se queira fazer algum dinheiro com venda de banners ou exibição de anúncios do Google AdSense, contudo, não é raro acessar um site que tenha 60%, 70% de sua área coberta com anúncios, e aquele pisca-pisca incessante, tornando muito difícil a leitura do conteúdo "real" que ele possui.

     Todos os sites sérios, independente da quantidade de anúncios que tenham, utilizam-se de algum expediente para que seu conteúdo seja impresso corretamente. Há algumas formas de garantir que a impressão da página não contenha os elementos que "atrapalham" a leitura do texto pois, no final das contas, permitir que um menu seja impresso, ou 10 anúncios, não tem o menor aspecto prático. Ninguém vai conseguir clicar no papel pra visitar o site do anunciante, certo? (Certo??)

     Num site sério, com um mínimo de cuidado com os seus visitantes, a mesma página de exemplo acima, seria impressa no papel:

     Bem melhor, de acordo? Na segunda metade deste post eu comentarei sobre uma técnica utilizada para melhorar a qualidade da impressão de páginas. Sua implementação é muito simples e garante visitantes mais felizes. Basicamente a técnica consiste em identificar quando a página está sendo impressa e, via arquivos CSS, esconder os elementos que não precisam ser impressos ou não tem relevância.

Esconde-esconde com arquivos CSS

     A técnica consiste em implementar dois arquivos de estilos CSS para a página e via atributo media determinar que um arquivo de estilos seja utilizado para a visualização da página e que o outro seja utilizado para a impressão da página.

     Normalmente os arquivos de estilos CSS ficam definidos na página na seção HEAD/HEAD em elementos LINK. Veja um exemplo:

     O atributo media = screen determina que se a página for exibida na tela deverá ser utilizado o arquivo de estilos web.css. Já o atributo media = print determina que se a página for impressa deverá ser utilizado o arquivo de estilos print.css.

     Os dois arquivos são essencialmente iguais. A diferença está em que o arquivo print.css, para cada elemento (div, imagem, tabela, etc) que não deva ser impresso, determina o estilo "display : none". Quando o estilo "display : none;" é aplicado a um elemento da página ele não é exibido. Então, quando a página é impressa, o browser a renderiza utilizando o arquivo print.css e este, por sua vez, esconde os elementos que não devam ser impressos.

     Simples assim.

     Espero que seja útil.

Eduardo.