13 de julho de 2007

Usando CSS para imprimir

Ola pessoal tudo bem? Neste post, tentarei explicar como usar css para melhorar a impressão de paginas web.


Media Type



O css tem diferentes media types ,que são usados para diferenciar aonde o css vai ser apresentado.O media type para paginas web,é o screen certo:e o media type para imprimir eh o print.A primeira coisa que se deve fazer quando estiver criando um css para impressão,é colocar o media type:


<link rel="stylesheet" media="print" src="imprimir.css">


Retirando coisas inúteis


A pessoa que imprime a sua pagina,não vai poder clicar no menu drop-down,nem no efeito em flash e muito menos nos anúncios do google adsense,então para economizar tinta,é melhor tirar essas coisas:


#flash,#menu,#anuncios { display:none; }


Modificando a Fonte


Segundo alguns sites que eu li,é melhor usar as fontes serifadas (serif) para impressão.Além de usar a unidade pt,que foi criada especialmente para as versões impressas.



body, #conteudo { font-family: serif; font-size: 12pt; }

Feijão com Arroz



A maioria dos usuários,preferem imprimir sites nas cores preto e branco,porque cartuchos com essas tintas são mais comuns,mais baratos.Então,para facilitar a vida deles,vamos mudar as cores do site para preto e branco:



#conteudo {color: #000; background: none #FFF; }

Links



Pra que servem links em folhas de papel, se não pode clicar neles? Vejam o exemplo da wikipedia. Quando alguém imprime um artigo de la,vem com todas as URLs do lado.E como fazer isso? Simples:


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


Mas como sempre,isso não funciona no ie =( . Mas nos browsers modernos,funciona direitinho!


Referencias:



Já sabem,qualquer erro no código ou qualquer duvida pode reclamar!

Abraços!

1 comentários:

Anderson disse...

Opa Guido, td tranquilo?

Me tire uma dúvida, no que diz respeito ao postado eu entendi, e não tem mistério realmente, mas e para você poder definir se a página será A4 ou Ofício, as margens laterais, superior e inferior, salto de página, essas coisas?

Bem agradeceria se pudesse me responder por e-mail, pois é mais dinâmico. anderson@cambiall.com

Um abraço.

Anderson Nunes