Media Print
Por: Henrique C. Pereira
Publicado em Thursday 22 September 2005 às 00:07Categoria: HTML/CSS/JScript
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.
- É interessante deixar que seja impresso somente o nome do site, o nome do artigo ou do texto, o conteúdo e um rodapé.
- Procure colocar uma margem no body de 5%, deixando o fundo branco com letras em preto.
- Sempre adapte o tamanho da fonte para pt. Eu recomendo 12pt.
- 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.
Comentários dos leitores
Este artigo possui 7 comentários
Muito bom esse tópico, nunca tinha ouvido falar neste problema do FLOAT, mais uma boa dica ;)
abraços.
ps: bem que seus artigos poderiam ter um estilo próprio para impressão ;)
Eu estava esperando alguém falar… hehehehe :) Devo fazer o meu neste final de semana!
Henrique PARABÉNS pelo artigo e pelo site, que trás artigos exelentes. Boa Idéia criar um "css zen garden" no seu site. Com certeza eu vou enviar o meu CSS.
Até Mais
É realmente todas as matérias estão muito boas cada vez q eu leio novas coisas eu fico imprecionado com a quntidade de coisas q é possivel fazer com a linguagem… tem tag pra burro espalhada nesse trem e antes nos faziamos com tanta gambiarra…
Uma solução que eu achei melhor do que anular diversas partes do css, como por exemplo, as floats.
Foi utilizar o media="screen" para o css referente à página que será exibida no computador, assim o media="print" poderá ser inciado do zero.
Cara esse seu post eh tudo o q eu tava precisando!!
Procurei mil maneiras e nenhuma eu achava, cheguei a utilizar striptags do php para remover as tags html e não adiantou,
sendo que a resposta tava na minha frente kkkkk
Parabens pelo post!
valeww
fui
bom este texto,
Pena que não pude ler tudo pois fica aparecendo umas propagandas em cima.
Se desse prá ler, iria me ajudar bastante…