Muitos sites oferecem uma versão das páginas para imprimir. Em geral, essa versão omite os menus de navegação e outros itens que não têm utilidade no papel. Assim, a página impressa fica mais fácil de visualizar. Uma maneira óbvia de criar esse recurso é produzir uma segunda versão de cada página, já sem os itens desnecessários. Nesse caso, um link do tipo “Clique aqui para imprimir” remete a essa segunda versão. Neste tutorial, vamos ver uma solução diferente, que dispensa o armazenamento de uma cópia adicional da página. Uma única versão é criada e armazenada no servidor. Na hora de imprimir, um truque com folhas de estilo é usado para simplificar o layout.

É importante ter em mente que essa solução só pode ser usada se o layout da página for definido por folhas de estilo, não por tabelas. Nesse sistema, o posicionamento dos blocos que compõem a página é feito usando comandos no padrão CSS-P (Cascading Style Sheet Positioning).

1. O truque em ação

Para ver o truque em ação, baixe o arquivo disponível em www.info.abril.com.br/download/3513.shtml e descompacte-o. Você vai obter uma pasta chamada Info-212-Internet. Dentro dela, está o arquivo armazem.html. Abra-o no navegador e observe o desenho da página. Ela tem quatro áreas distintas: uma faixa superior, onde fica o cabeçalho, e três colunas logo abaixo. Tanto a coluna da esquerda como a da direita contêm menus de navegação que não têm utilidade no papel. Assim, é interessante suprimir essas duas colunas ao imprimir a página. Ative, agora, a função de visualização de impressão do seu navegador. No Internet Explorer, o comando para isso é Arquivo/Visualizar Impressão. Você verá a versão para imprimir, sem as duas colunas laterais. A coluna central passa a ocupar quase toda a largura da página, aproveitando melhor o espaço disponível no papel.

2. Entendendo os comandos

Para entender como isso é feito, observe o código-fonte da página. No Internet Explorer, use o comando Visualizar/Fonte para abri-lo. Logo no início, você vai encontrar estas linhas:

<link rel=“tyleshee” href=“tela.css” media=“screen” type= “text/css”>

<link rel=“stylesheet” href=“impressora.css” media=“print” type=“text/css”>

O primeiro comando diz ao navegador para usar a folha de estilos tela.css ao exibir a página no monitor. O segundo especifica que a folha impressora.css deve ser empregada ao imprimir. Note que, usando esse método, não é necessário inserir um link do tipo “Clique aqui para imprimir” na página. Basta usar o comando normal de impressão do navegador. A versão impressa será sempre a simplificada.

3. Formato para a tela

Procure, agora, o arquivo tela.css dentro da pasta Info-212-Internet. Abra-o num editor de textos e examine seu conteúdo. Os quatro blocos iniciais dessa folha de estilos especificam o layout da página. Os demais são para formatação de texto. O primeiro bloco, denominado topo, refere-se à faixa superior. Os três seguintes, chamados esquerda, meio e direita, respectivamente, definem as três colunas da parte inferior da página. Para entender esses comandos, vamos examinar, por exemplo, o bloco referente à coluna esquerda:

#esquerda {
position: absolute;
top: 105px;
left: 10px;
width: 150px;
padding: 5px;
background: # FFFF99;
}

A segunda linha (position: absolute) especifica que a coluna deve ter uma posição fixa na página. A terceira linha (top) indica que a coluna deve ser posicionada a 105 pixels do alto da página. A quarta (left) estabelece que a coluna deve ficar a 10 pixels da borda esquerda da tela. O parâmetro width, na linha seguinte, é usado para que a coluna tenha uma largura fixa de 150 pixels. Se esse parâmetro fosse omitido, a coluna teria uma largura variável em função do tamanho da janela do navegador.

A penúltima linha nesse bloco (padding) diz que deve haver um espaço vazio de 5 pixels em volta do texto. A última (background) especifica a cor de fundo. O código hexadecimal #FFFF99 corresponde à cor amarelo-claro, em valores RGB. Como não especificamos uma altura para a coluna (o que poderia ser feito com o parâmetro height), essa dimensão vai depender do conteúdo dela.

4. A coluna do meio

Vejamos, agora, o bloco referente à coluna central.

#meio {
margin-left: 170px;
margin right: 180px;
padding: 5px;
background: white;
}

Como omitimos o comando position, o posicionamento será relativo. A posição da coluna central vai ser determinada pelos blocos precedentes. Também omitimos o comando width. Assim, a coluna central terá largura variável. Se o visitante redimensionar a janela do navegador, a largura dessa coluna vai se alterar automaticamente. As especificações da faixa superior da página e da coluna direita usam comandodos parecidos com esses.

5. Versão para imprimir

Abra, agora, o arquivo impressora.css. Essa é a folha de estilos usada para imprimir a página. Observe que ela tem os mesmos blocos da folha tela.css, mas a parte de layout emprega parâmetros diferentes. O bloco referente à coluna esquerda, por exemplo, fica assim:

#esquerda {
display:none;
}

Ao especificarmos o valor none para o parâmetro display, estamos dizendo ao navegador para omitir essa coluna. Ela simplesmente não vai aparecer na impressão. Observe que fizemos a mesma coisa com a coluna da direita. Já o bloco que define a coluna central ficou assim:

#meio {
width: 90%
padding: 10px;
background: white;
}

Nesse caso, definimos a largura em 90% da largura do papel. Alterando os parâmetros dessa maneira, você define quais áreas de página serão impressas e em que formato. É um sistema flexível e cômodo, já que o webmaster não precisa se preocupar em criar versões alternativas das páginas só para imprimir.