Como vimos no post anterior, [CSS] Optimizar a Estrutura do Site para Impressao, agora vamos optimizar o conteúdo para impressão, e uma vez que já isolámos parte do conteúdo da página, podemos avançar com a optimização do seu conteúdo para impressão. Lembra-te que incluímos o nosso CSS com “all”, o que significa que as propriedades vão transitar para impressão. Essencialmente, o que vamos fazer é reajustar as nossas definições de impressão. Legibilidade é o nosso objectivo principal.
Dicas
Ajustar a propriedade Head
Se optimizaste o teu site para para os motores de pesquisa, provavelmente estás a utilizar a tag “h” ao máximo.
Percebe que vais ter opções de cores quando o site está em modo de impressão – poucas pessoas imprimem a cores.
Recomendo que limites o teu heading entre “h1″ e “h3″. Depois de três posições, o resultado impresso irá perder alguma organização.
Padding, margin, border, e font-size serão importantes. Certifica-te que a tag “h1″ é grande o suficiente para facilmente perceber-se que é o assunto/titulo da página a imprimir.
Para a tag “h2″, recomendo utilizar a propriedade bottom-border para estabelecer a tag como o segundo heading.
O “h3″ será do mesmo tamanho ou ligeiramente maior do que o texto. Todas as tags estarão a negrito. Para tornar as coisas mais fáceis, recomendo utilizar margin e padding a 0 (ZERO), pois as duas propriedades controlam a mesma função para a impressão, e será mais fácil utilizar apenas um.
Recomendo que utilizem muito pouca margem abaixo do título, com excepção para a tag “h1″.
Eu uso o seguinte:
h1,h2,h3 { font-weight:bold; }
h1 { font-size:24px; }
h2 { font-size:16px; border-bottom:1px solid #ccc; padding:0 0 2px 0; margin:0 0 5px 0; }
h3 { font-size:13px; margin:0 0 2px 0; }
Ajustar os Parágrafos
A maioria das pessoas não modificam muito os parágrafos, mas existem algumas propriedades que podes optimizar.
O line-height, padding, e margin são as propriedades mais importantes. Também recomendo a configuração da margem inferior do parágrafo para um valor superior ao line-height. Por fim, ajustar o tamanho da fonte a um rácio razoável com os cabeçalhos e utilizar um padrão font-family, isto se já não o estiveres a utilizar. Eu uso o seguinte:
p { font-size:11px; font-family:times new roman, serif; margin:0 0 18px 0; }
Formatar os Links
A impressão não permite a formatação de links como vemos no monitor, então podemos fazer isto de forma simples, bastando para isso adicionar text-decoration:
a { text-decoration:underline; }
Formatação Avançada de Links
Chamo a este método avançado por algumas razões. Primeiro, porque à partida estás a confiar que o CSS não é suportado por todos os browsers – aqui o nosso adversário é o Internet Explorer 6, pois será completamente ignorado pelo IE6 e inferiores. Em segundo lugar, alguns programadores não gostam da ideia de conteúdo gerado pelo CSS. Puristas, por favor, ignorem esta secção.
Mostrar ao utilizador um link pode não ser suficientemente bom.
E se quiseres que eles saibam o URL do link? Basta adicionar o seguinte:
a:link:after,
a:visited:after { content: "(" attr(href) ")"; font-size: 90%; }
Ajustar qualquer Classe Personalizada
Olha para as tuas classes de CSS para teres a certeza que nenhuma das outras configurações desconfigurem a página.
O teu site está agora pronto para ser impresso!
(Nenhum voto por enquanto)
Loading ...
(5 votos, média: 4,60 num total de 5)
