Por muito que leia artigos online, ainda imprimo uma boa quantidade deles.
CSS
Às vezes imprimo para mostrar a colegas, outras vezes para os ler novamente quando tenho mais tempo. Infelizmente, uma grande quantidade de sites, não fazem qualquer esforço para formatar os seus conteúdos para uma impressão organizada.
Se ao menos, esses programadores soubessem quão fácil é optimizar o site para imprimir e como isto pode aumentar o valor do seu site.
O segredo para a criação de páginas formatadas para impressão é a capacidade de identificar e controlar a “área(s) com conteúdo” do site. A maioria dos websites são compostos por um cabeçalho, rodapé, sidebars/submenus, e uma secção para o conteúdo principal. Se controlarmos a área com o conteúdo, a maioria do trabalho está feito.
Criar um ficheiro CSS para a impressão
Claro que terás pelo menos um CSS para controlar o layout da página e a formatação do conteúdo, mas tens algum CSS para controlar a forma como irá ser a página na impressão?
Adiciona o CSS de impressão, pois isso permitirá que cries Classes personalizadas de CSS que será aplicada somente no momento da impressão.
<!-- CSS principal -->
<link rel="stylesheet" type="text/css" href="/default.css" mce_href="/default.css" href="/default.css" mce_href="/default.css" media="all" />
<!-- CSS de impressão, por baixo -->
<link rel="stylesheet" type="text/css" href="/imprimir.css" mce_href="/imprimir.css" href="/imprimir.css" mce_href="/imprimir.css" media="print" />
Evitar tabelas HTML desnecessária
Por muito que tente orientar a clara utilização de tabelas, não há maneira de evitar a experiência ocasional do “tr” e do “td”.
Os formulários são muito mais fáceis de codificar quando se utiliza tabelas.
Para além disto, um programador deve tentar evitar o uso de tabelas, especialmente quando se considera imprimir. Controlar o conteúdo do site pode ser extremamente desafiador.
Conhecer quais as partes da página não têm nenhum valor de Impressão
Sabes aquele banner todo xpto que tens no topo do teu site? Esquece.
E a publicidade que tens no lado direito e esquerdo da página? Esquece.
Os visitantes imprimem a página pelo conteúdo do mesmo, não para ver as imagens de apoio do teu site. Cria uma classe chamada no-print e acrescenta a declaração DIVs, imagens e outros elementos que não têm nenhum valor para impressão:
.no-print { display:none; }
<!-- Exemplo -->
<div id="navegacao" class="no-print">
.... <!-- Quem precisa de navegação quando quer imprimir apenas o conteúdo? -->
</div>
Utiliza Quebra de Páginas
Quebra de páginas no browser não são tão confiáveis como são no Microsoft Word, especialmente considerando o comprimento variável criado dinamicamente nas páginas, mas, quando bem utilizadas fazem toda a diferença na impressão. O CSS não nos dá uma grande flexibilidade de impressão, mas as propriedades page-break-before / page-break-after são muito úteis. Quebra de páginas são muito mais fiáveis quando utilizadas com DIVs em vez de tabelas.
.page-break { page-break-before: always; } /* coloca esta classe no teu default.css com "display:none;" */
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce eu felis. Curabitur sit amet magna. Nullam aliquet. Aliquam ut diam...
<div class="page-break"></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit....
Dimensiona a tua página para impressão
Obviamente o monitor do computador pode fornecer uma grande quantidade de largura para visualizar uma página, mas recomendo que o conteúdo tenha uma largura de 600px. Isto garante que as palavras não saiam fora da área de impressão. Utiliza esta largura com a quebra de página nas DIVs que criaste no CSS.
Depois de saberes a largura do conteúdo, ajusta as dimensões do conteúdo dentro do conteúdo principal, se necessário.
Teste!
Como qualquer tipo de programação, os testes são importantes.
De notar que se tens um site que tem dados dinâmicos, não vais ser capaz de acertar em tudo, mas podes ser capaz de descobrir um esquema para formatar bem os conteúdos, na maior parte das vezes.
Modificar a estrutura da página para um melhor resultado de impressão é provavelmente mais fácil do que pensas – pelo menos, melhorar o modelo existente.
Nos próximos dias coloco uma segunda parte sobre isto, para analisarmos uma melhor optimização do conteúdo do site para impressão.
Loading ...
(4 votos, média: 4,50 num total de 5)
