Tutorial Anterior Da Série Aprende CSS Com Maicon Sobczak > CSS – Criação de Layout

Somos desenvolvedores web. Estudamos para saber como tornar a visualização dos elementos da página o mais confortável possível para o internauta que vê a página do seu computador. São aplicados efeitos e ela entra para galerias como exemplo de design e conteúdo bem aplicados.

Aí um visitante decide imprimir um artigo interessante ou um case para estudo. Descobre então, que são impressas duas páginas só com menu e anúncios e que o texto é um filete que se estende por quatro páginas.

Pois é amigo. A deslumbramento com o mundo virtual fortalece a idéia de que se algo precisa ser visto é na tela do computador e que as outras mídias (entenda-se papel) não são mais utilizadas pelo internauta.

Precisamos entender que um número grande de pessoas prefere ler no papel, principalmente textos extensos. Outros tem medo de não conseguir mais encontrar a página ou o conteúdo online. Há também os que precisam levar a informação para locais sem acesso à internet ou para uma leitura no parque.

Motivos não faltam para dedicar algumas horas do desenvolvimento no preparo das informações para impressão. E esta mentalidade deve estar presente já na fase inicial do desenvolvimento e não deixada para depois que o website estiver online.

E se você pequisar um pouco verá que até grandes portais negligenciam esta parte.

Vamos ver neste tutorial quais propriedades CSS são aceitas na impressão, as melhores práticas e considerações.

Somente Na Impressão

Os arquivos de folha de estilo não formatam apenas os elementos para visualização no navegador, mas para outras mídias e dispositivos como televisão e impressoras. Podemos definir para qual mídia o arquivo CSS será válido através da regra media na tag de importação do arquivo. Para saber os valores possíveis visite o tutorial Princípios CSS desta série.

Ao importar o arquivo normalmente sem definir a mídia, ele é valido para todas. Para que seja válido apenas quando o documento for impresso atribuímos print à regra media.

Uma variante da linha acima é utilizar o @import.

Um efeito colateral de utilizar o @import é um pequeno delay que às vezes ocorre no carregamento que faz com que o conteúdo da página fique alguns segundos sem a formatação.

Quando for importar duas folhas de estilo no mesmo arquivo defina para qual mídia são aplicáveis, pois se uma delas não tiver media ira afetar a outra devido ao efeito cascata do CSS.

A página

Vamos criar uma página básica, com menu, título, imagem, link e caixa de destaque.

• Inicial
• Sobre
• Blog
• Contato

CSS para Impressão

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean odio sem, mattis malesuada, consectetuer eu, ultricies convallis, lacus. Praesent non orci. Donec sagittis metus vel massa. Nulla facilisi. Proin justo. Aenean ac massa. Quisque vel risus. Morbi ipsum. Integer odio eros, dapibus eget, egestas sed, lacinia dictum, nunc. Maecenas pellentesque rhoncus lectus. Nulla facilisi. Pellentesque eget libero et tortor hendrerit venenatis. Aliquam tempus, felis in ornare congue, lacus mi consectetuer risus, sit amet luctus orci nisl at dui. Aenean ligula sem, pretium sed, tincidunt sit amet, accumsan eget, justo. Nam in massa. Cras turpis velit, volutpat eu, vestibulum at, pellentesque vel, dui.

Link para algum lugar

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent rutrum malesuada urna. Aliquam sollicitudin. Pellentesque id nisi. Duis in mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ac elit. Etiam posuere venenatis ante. Nunc ullamcorper neque ac justo. Donec id purus. Aenean non enim eget diam aliquam tristique. Mauris pellentesque pulvinar dui. Donec et arcu ut leo laoreet vulputate. Aenean a magna et massa ornare congue. Phasellus a tellus vitae enim ornare laoreet.

Integer viverra, odio sed sollicitudin malesuada, magna mauris cursus nulla, non ultricies arcu massa in tellus. Duis velit nibh, porttitor non, sodales at, iaculis eget, lectus. Curabitur vitae ante.

Integer viverra, odio sed sollicitudin malesuada, magna mauris cursus nulla, non ultricies arcu massa in tellus. Duis velit nibh, porttitor non, sodales at, iaculis eget, lectus. Curabitur vitae ante. Mauris dapibus consequat mi. Sed at quam a lacus varius tempus. Phasellus scelerisque suscipit justo. Morbi ac justo eu arcu ornare facilisis. Donec et est. Morbi et lectus. Suspendisse et augue. Vivamus enim eros, condimentum vel, sodales vel, ullamcorper vitae, purus.

Donec non felis quis augue interdum accumsan. Nulla at libero. Nunc ultricies auctor sapien. Praesent quis quam et massa tincidunt luctus. Vivamus nibh. Sed ligula. Nunc non est a augue tempor lacinia. Mauris lectus pede, porta tempus, ultrices sed, dignissim sed, justo. Suspendisse porta. Fusce arcu. Sed vehicula libero a odio.

Subtitulo

Ut magna urna, tincidunt nec, eleifend sit amet, auctor pretium, nisi. Suspendisse arcu enim, commodo at, facilisis in, feugiat sit amet, quam. Praesent ut lacus. Maecenas sed metus. Nulla sed urna. Donec vitae ipsum quis quam cursus porttitor. Curabitur justo elit, pulvinar eu, condimentum consectetuer, tristique vel, velit. Suspendisse libero massa, scelerisque eget, malesuada ut, ultricies aliquam, neque. Curabitur elementum est sed magna. Morbi enim. Ut dignissim mattis justo. Nunc justo.

Fusce purus. Curabitur eu ligula. Vestibulum ultricies hendrerit elit. Nulla a metus. Aenean aliquam. Phasellus nec massa. Nullam vehicula neque id magna ornare elementum. Phasellus luctus, lorem non ornare laoreet, ligula elit ultrices metus, vel scelerisque dolor velit nec risus. Ut orci. Nullam luctus, mauris et ultricies mattis, nisi felis auctor dui, sed elementum nisl felis sit amet lectus. Donec mauris odio, condimentum sit amet, semper sed, scelerisque eu, est. Aliquam pellentesque, ipsum id fermentum pretium, augue orci convallis magna, ut vulputate magna est vel enim. Nulla quis est mattis massa scelerisque tristique. Vestibulum id turpis. Proin ultrices. Proin lacinia nisi vehicula nunc. Nullam nec velit nec erat aliquam scelerisque.

Nullam luctus venenatis sapien. Praesent laoreet pharetra ipsum. Nulla diam nulla, vehicula vitae, venenatis a, sodales in, sem. Phasellus pulvinar ante ut sapien. Integer feugiat massa vel dolor. Integer luctus, ipsum a interdum blandit, dui odio pretium sapien, at vestibulum pede mi quis est. Cras odio. Donec urna. Sed viverra dictum elit. Quisque et magna eget leo lacinia feugiat. Nulla faucibus porttitor nisl. Vivamus sit amet lectus quis nisi euismod egestas. Aenean ultrices urna fringilla dui. Mauris id libero et turpis hendrerit pretium. Proin interdum pulvinar enim. Duis nunc.

E estilizar com as regras abaixo:


/*----------------------RESET--------------------*/

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; outline: none;}

body{line-height:1; font-size:62.5%; background:#fff; font-family:Arial, Helvetica, sans-serif;} /*---- 1.0 em = 10px---*/

h1, h2, h3, h4, h5, h6{font-size:100%;}

/*----------------------RESET--------------------*/

p, a{font-size:1.3em; line-height:1.8em; margin-bottom:10px;}

.box p{margin:0;}

.box{position:relative; float:right; width:300px; padding:10px; margin:10px; background:#DCF1F1; border:1px solid #CDE2ED;}

.global-div{width:900px; height:auto; padding:0 15px 30px 15px; position:absolute; float:none; left:50%; margin:5px 0 0 -470px ; border:5px solid #eaeaea; }

.global-div img{float:left; margin-right:20px; border:1px solid #eaeaea; z-index:500; }

h1{font:italic bold 5em Georgia, "Times New Roman", Times, serif; text-align:center; margin:20px 0; background:#333; color:#fff; padding:10px; letter-spacing:-0.04em; text-shadow:0px 0px 5px #eaeaea; }

h2{font:3em Georgia, "Times New Roman", Times, serif;}

ul{list-style:none; margin-left:300px;}

ul li{display:inline; margin-right:50px;}


Primeiramente foram resetados os valores para não haver discrepância na interpretação das regras pelos navegadores. Em seguida definidos os tamanhos de fonte, flutuação e cor das divs, aparência dos títulos e menu.

Sem complicação e na medida para que sejam explicados os principais aspectos e cuidados na formatação de uma página para impressão.

Propriedades Para Impressão

O CSS 2 possui algumas propriedades dedicadas apenas para formatação de conteúdo a ser impresso.

Quebra de página
As regras mais úteis são relacionadas a quebra de página e são aplicáveis apenas em elementos nível de bloco, como parágrafos, cabeçalhos (h1-6) ou display:block. Elas são:

• page-break-after – Quebra a página depois do elemento.
• page-break-before – Quebra a página antes do elemento especificado. Útil para deixar os títulos no topo da página.
• page-break-inside – Configura a quebra de linha dentro do elemento, como por exemplo, tabelas.

Vejamos os valores disponíveis para estas propriedades:

• auto – Comportamento padrão. Quebra somente quando necessário, se não incomodar deixa quieto.
• always – Sempre haverá quebra de página.
• avoid – Faz o possível para evitar uma quebra.
• left – Força a quebra de página para que o conteúdo inicie em uma página à esquerda.
• right – Força a quebra de página para que o conteúdo inicie em uma página à direita.

Número de linhas

Para definir quantas linhas serão deixadas no início ou final da página. Úteis em listas.

• orphans – Define o número mínimo de linhas que devem ficar no final da página quando a quebra de linha ocorrer no meio do elemento.
• windows – Mesma definição da orphans, mas para início da página.

@page

O CSS disponibiliza a regra @page para controle sobre outros aspectos da impressão, como tamanho da folha, extremidades e se é do lado direito ou esquerdo. O problema é que nem todos os navegadores interpretam esta regra, o que torna a implementação mais demorada e um tanto sem sentido.

Sendo assim, neste tutorial não será abordada a @page. Vou deixar alguns links para quem ficou curioso:

Página do W3C
Tutorial de formatação de um livro utilizando a @page.

Elementos Não Impressos

Os navegadores por padrão não suportam a impressão do plano de fundo dos elementos. Imagens ou cores são ignorados. Assim como efeitos introduzidos pelo CSS 3, como sombra.

Partindo para o bom senso, não há porque permitir a impressão do menu, dos links para outros blogs, publicidades (a não ser que pagas para isso também) e banners com animações que não terão sentido estáticas.

Para eles nós temos o display: none.

Os Textos

O CSS suporta a definição do tamanho dos elementos em pixels, centímetros, unidade relativa (em) e pontos. Cada um tem o seu lugar, sendo que o px e em geram melhores resultados no monitor. No papel funciona melhor o ponto. E para texto de parágrafo de preferência com o valor 12pt.

Nessa hora podemos pensar um pouco na economia de recursos e deixar a cor do texto um pouco menos preta. Ao invés de #000, um #333 ou até menos dependendo da importância do trecho. Mudança sutil, mas que faz diferença na quantidade dos recursos. Pense no meio-ambiente.

Links

Não há sentido em simplesmente mostrar um link na versão impressa. O leitor não terá como clicar nele e se tiver interesse, não saberá para onde o link leva. A solução é mostrar o endereço completo do link quando a versão for impressa.

Isso é possível utlilizando a regra :after do CSS.


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


Depois de um link será inserido o conteúdo do atributo href. Nos navegadores atuais o funcionamento é 100%, já nas versões anteriores alguns não dão suporte, como o IE6.

Existe uma variante que é colocar os endereços dos links no rodapé das páginas. Útil quando a quantidade de links for grande. Pórem, você só atinge este resultado com javascript.

Na Prática

Vamos alterar o arquivo CSS que estiliza a página criada no ínicio do tutorial adicionando as regras para impressão e mudando alguns valores. Salve com o nome de “impressao.css”.


body{font-family:Georgia, "Times New Roman", Times, serif; margin:5% 3%; }

p, a{margin-bottom:10px; font-size:11pt; line-height:18pt; color:#333;}

a{color:#06F;}

.box p{margin:0;}

.box{position:relative; float:right; width:300px; padding:10px; margin:10px; border:1px solid #999;}

.global-div img{float:left; margin:5px 20px 0 0; border:1px solid #999;}

h1{font:italic bold 40pt Georgia, "Times New Roman", Times, serif; text-align:center; margin-bottom:12pt;}

h2{font:18pt Georgia, "Times New Roman", Times, serif;}

ul{display:none;}

.quebra{page-break-before:always;}

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


Foi definida margem para o “body” que tornou-se o recipiente da página já que a “global-div” não foi estilizada simplesmente porque na impressão não desempenha papel relevante. O valor foi definido em porcentagem, mas pode ser em pontos, escolha sua.

Nos elementos de parágrafos foi alterado o tamanho da fonte, a medida para o espaçamento entre linhas e a cor. A formatação do link foi incluída porque o Internet Explorer 8 deixa os links a serem impressos automaticamente da cor preta.

A div “box” não tem definido a cor de fundo já que não adianta. Em compensação para as bordas foi escolhido um cinza escuro para destacar a caixa. Os cabeçalhos perderam os efeitos CSS 3 assim como cor de fundo, da letra (que fica automaticamente preta) e o espaçamento entre caracteres. Veja novamente que a medida das letras agora é em pontos.

No fim foi escondido o menu. O subtítulo que tinha uma classe sem serventia na versão para tela agora quebra a página e os links tem o endereço adicionados entre aspas ao lado deles.

Vá no menu “arquivo –> visualizar impressão” no seu navegador e veja o resultado.

A primeira página será igual a imagem acima. A segunda começa com o cabeçalho porque no arquivo definimos assim.

No Final

Indo pelas diretrizes apresentadas neste tutorial você não terá problemas na hora de estilizar uma página para impressão. Claro que existem casos específicos e nem sempre o que foi apresentado aqui resolvera os problemas que surgirem. Até adianto um, que é a respeito de float. Evite ao máximo esta regra ao estilizar para impressão e a dor de cabeça será muito leve.

DOWNLOAD: Descarregue o código utilizado neste tutorial: CSS Impressão, em formato .zip.

Tutorial Seguinte Da Série Aprende CSS Com Maicon Sobczak > CSS – Diferença Entre Browsers