Propriedades de impressão CSS

Existem propriedades de CSS como page-break-after e page-break-before que servem para alterar o aspecto das páginas web ao ser impressas em papel. Estes atributos servem em concreto para forçar quebras de página antes ou depois de elementos da página. Com page-break-after podemos definir se desejarmos uma quebra de página depois de um elemento, enquanto que com page-break-before definimos a possibilidade de incorporar uma quebra de página antes de um elemento.

Lembremos que com CSS se podem definir tanto os estilos que desejamos aplicar na hora de ver a página no monitor como na hora de imprimi-la com uma impressora. Isso já o explicamos no artigo CSS para imprimir páginas web. Porém, estes dois atributos são um pouco diferentes, porque podemos utilizá-los livremente na especificação de estilos em global da web, sendo que, tanto page-break-after como page-break-before, não têm representação no momento de visualização da página na tela do computador, porém, sim na hora de imprimi-la na impressora.

Atributo CSS page-break-after

Serve para forçar, ou não, uma quebra de linha depois de um elemento da página. Pode-se colocar em elementos de bloco, como tabelas ou camadas DIV. Um uso típico seria:

<div style=”page-break-after: always;”>
Conteúdo do div
…
</div>

Então, na hora de imprimir a web, se inserirá uma quebra de linha depois do bloco DIV.

Atributo CSS page-break-before

De maneira similar ao anterior atributo, page-break-before serve para dizer se queremos, ou não, forçar uma quebra de linha de página antes de um elemento. Se o colocamos com o valor always, faremos que sempre se mude de página antes de imprimir tal elemento.

Isto pode ser muito bom para, por exemplo, tabelas ou outros elementos que não queremos que se rompam em duas partes, se coincide uma quebra de linha no meio da impressão da página. Com isso fazemos que se mude de página, com uma quebra de página forçada e assim na nova página é mais fácil que tenhamos espaço suficiente para que caiba a impressão desse elemento.

Por exemplo, poderia se dar este uso:

<table border=”1″ style=”page-break-before: always;”>
Outras etiquetas da tabela
…
</table>

Outros possíveis valores dos atributos

Tanto page-break-after como page-break-before permitem outros tipos de valores, à parte do always que vimos nos dois exemplos anteriores.

• auto: é o valor padrão. Só coloca a quebra de página se for necessário..
• always: coloca sempre uma quebra de linha, depois ou antes do elemento.
• avoid: evita colocar uma quebra de linha antes ou depois.
• left: insere uma ou duas quebras de página, de modo que se possa assegurar que a seguinte página seja uma página esquerda (page-break-after), ou para assegurar que a página onde se começa o elemento seja uma página esquerda (page-break-before). Imaginemos um livro aberto, que tem páginas à esquerda e à direita para saber ao que se refere uma página esquerda.
• right: insere uma ou duas quebras de página, para assegurar que se possa inserir o elemento ao princípio de uma página de direita (page-break-before) ou para assegurar que depois do elemento comece uma página direita (page-break-after).

Compatibilidade de page-break-before e page-break-after com distintos navegadores

À princípio, tanto Internet Explorer como Firefox e outros navegadores como Opera, suportam este atributo. O problema é que em Internet Explorer, pelo menos na versão 7, funciona umas vezes e outras não. Isto é uma pena, porque não podemos estar seguros se a impressão será tal como definimos com CSS para o documento.

Para solucioná-lo, colocamos um DIV vazio (porém com um espaço em branco &nbsp;) antes ou depois do elemento ao que queremos atribuir as quebras de página. Logo, colocando o page-break-after ou page-break-before a esse DIV vazio. Ademais de separar por um <p> o DIV vazio do elemento. O código seria algo parecido a isto:

[Conteúdo da página]
<div style=”page-break-before: always;”> </div>
<p>
<table cellspacing=”2″ cellpadding=”6″ border=”1″ >
<tr>
   <td>Esta tabela</td>
   <td>Aparecerá em</td>
   <td>uma nova página</td>
</tr>
</table>
[Mais conteúdo da página]

Como se pode deduzir do exemplo, a página terá um conteúdo. Logo, se forçará uma quebra de página antes do DIV que tem o &nbsp;, de modo que, ao imprimir, a tabela seguinte aparecerá sempre ao princípio de uma página nova.

Vi por aí outros hack CSS para solucionar a compatibilidade de Explorer com estes atributos, porém complicam um pouco a solução. Assim me funcionou corretamente sempre o page-break-after ou page-break-before em todos os navegadores. window.google_render_ad();