Site Overlay

Controle de quebra de páginas

Enquanto no navegador o nosso conteúdo existe em apenas uma página, na impressão existe a necessidade de se quebrar o conteúdo em páginas de acordo com a configuração do usuário. Por padrão isto será feito de acordo com o tamanho da sua página, mas é possível tomar controle sobre isto e definir regras específicas para informar em qual parte do seu conteúdo a quebra de página será feita. Atualmente, existem três propriedades disponíveis na maioria dos navegadores para isso: page-break-before, page-break-inside e page-break-after.

O page-break-before e page-break-after definem se a quebra de página deve ocorrer antes ou depois do elemento. A propriedade aceita os valores always, utilizado para forçar a quebra, ou avoid, indicando para o navegador que a quebra deve ser evitada. Com eles é possível, por exemplo, ao imprimir uma relação de posts de um blog, deve existir uma quebra de página entre um post e outro.

article {

page-break-after: always;

}

 

Ou caso você precise de um controle mais refinado das quebras, você pode definir um elemento vazio para posicionar as quebras em pontos específicos do seu conteúdo.

 

.page-break {

display: none;

}

@media print {

.page-break {

display: block;

page-break-before: always;

}

}

 

E então adicionar uma tag div, por exemplo, com a classe .page-break onde for necessário forçar a quebra de página.

Já com o page-break-inside, que aceita apenas as opções auto e avoid, podemos definir que o conteúdo de um parágrafo não deve ser quebrado entre duas páginas. 

p {

page-break-inside: avoid;

}

Este tipo de controle é interessante para blocos de conteúdo extensos tais como manuais, documentações ou até mesmo e-books criados em HTML. Além destas três propriedades existem outras duas, utilizadas para definir os limites de linhas que deve ficar em uma página ou em outra: orphans e widows. Mas infelizmente estas propriedades não possuem um suporte extenso pelos navegadores.

8

Source: scriptcase / Controle de quebra de páginas

Comments

comments

Leave a Reply

Your email address will not be published.