Uso de Estilos CSS para Impressão

O uso do CSS nos permite com facilidade formatar visualmente um conteúdo. Isso é bem simples hoje, encontramos facilmente sites que utilizam estilos, sejam bem construídos ou não, mas utilizam. Porém, na maioria dos casos não se tira proveito do que o CSS pode oferecer no que diz respeito à formatação dependente do dispositivo. Entende-se dispositivo aqui, qualquer meio possível de apresentar tal conteúdo. O monitor é um dispositivo, um Handheld também, e o papel, claro também é.

Para definir um estilo específico para um dispositivo basta usar o atributo media. Veja alguns exemplos:

<link media="screen" href="monitor.css"
type="text/css">
<link media="print" href="impressao.css"
type="text/css">
<link media="handheld" href="movel.css"
type="text/css">

Existem outros dispositivos disponíveis tais como projection e tv, mas o que pretendo falar hoje é sobre o uso do estilo para impressão. Muitas vezes acessamos uma página, seu conteúdo é útil para nós e desejamos imprimir para ler mais tarde ou guardar. Legal, Ctrl+P, Ok, vou na impressora pegar as folhas, 5 folhas para uma página de texto? Cartucho de tinta caro pra caramba e sai um monte de folha à toa. Putz, mais que fonte pequena para leitura. É, isso acontece muito, pois estamos aplicando em um dispositivo um conteúdo formatado para outro. Como sabemos, ou deveríamos, cada meio tem suas características e funcionalidades específicas, logo, temos que planejar como nosso conteúdo se comportará nos meios que desejamos que o mesmo se apresente.

Em se tratando de estilo para impressão, precisamos focar em um ponto básico: Papel x Tela. Com isso, conseguiremos mapear as características e funcionalidades de cada caso, conseguindo assim apresentar o que realmente importa de maneira mais prazerosa.

Joga fora no lixo

O primeiro passo ao criar um estilo específico para impressão é definir quais itens que são apresentados em tela que não devem sair no papel. Por exemplo, ninguém usará o menu de acesso às seções do site no papel, logo, este é um item que não tem necessidade no papel. O cabeçalho muitas vezes pode também sumir completamente, ou talvez, ser trocado por um outro, mais simples, contendo apenas a marca da empresa. O que importa é eliminar os itens sem utilidade. Use a propriedade display para isso:

#menu, #cabecalho {
    display: none;
}

Uso da Tipografia

Outro ponto fundamental, relacionado à forma e à função, está no uso da tipografia. As fontes têm características funcionais diversas, uma delas, a legibilidade, está diretamente associada ao meio de uso. Em tela, fontes sem serifas são mais indicadas para leitura (texto corrido), haja vista que os monitores não têm níveis de detalhes suficientes para apresentar as serifas como deveriam, tornando-as um ruído e não um auxílio à leitura. Mas no papel, as fontes serifadas são melhores. Aconselho usar fontes como Georgia ou Times para este fim.

O corpo de letra também é muito importante e sua especificação deve ser em pt, unidade padrão para tamanho de texto. O corpo de letra, entrelinhamento, os espaços entre títulos e subtítulos também deve ser levados em conta na configuração das fontes, também aconselho a fazerem inúmeros testes utilizando vários valores para as tags h1, h2, p, entre outras usadas em seu código.

* {
    font-size: 10pt;
}
h1 {
    font: italic 2.4em Georgia, "Times New
    Roman", Serif;
}

p {
    font: 1.1em Georgia, "Times New Roman",
    Serif;
    line-height: 1.2em;
}

Uso de Links

No papel eles não terão função de conduzir o visitante a um outro local, porém teremos necessidade de informar onde conseguir tal informação. Se na página foi criado um link para um outro documento é porque há alguma necessidade, certo? Destacamos os links e apresentamos o endereço (menos no Internet Explorer, pra variar) do mesmo:

a {
    text-decoration: underline;
    color: #000;
}

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

comente este artigo

• Css
• Php
• Web Standards
• Design Gráfico