Impressão CSS: Evitando DIVs recortados na metade entre páginas?

Eu estou escrevendo um plug-in para um software que pega uma grande coleção de itens e os coloca em HTML em um WebView em Cocoa (que usa o WebKit como seu renderizador, então basicamente você pode assumir que este arquivo HTML está sendo aberto em Safári).

As DIVs produzidas são de altura dinâmica, mas não variam muito. Eles são geralmente em torno de 200px. De qualquer forma, com cerca de seiscentos desses itens por documento, estou tendo um tempo muito difícil para imprimir. A menos que eu tenha sorte, há uma input cortada ao meio na parte inferior e superior de cada página, e isso torna realmente difícil usar as impressões.

Eu tentei page-break-antes, page-break-after, page-break-dentro e combinações dos três sem sucesso. Eu acho que pode ser o WebKit não renderizando as instruções corretamente, ou talvez seja a minha falta de compreensão de como usá-las. De qualquer forma, eu preciso de ajuda. Como posso evitar o corte dos meus DIVs ao imprimir?

Isso deve funcionar:

@media print { div{ page-break-inside: avoid; } } 

Por favor, note suporte ao navegador atual (12-03-2014) :

  • Chrome – 1.0+
  • Firefox (Gecko) – 19.0+
  • Internet Explorer – 8.0+
  • Opera – mais de 7.0
  • Safari – 1.3+ (312)

Apenas uma solução parcial: a única maneira de fazer isso funcionar no IE era include cada div em sua própria tabela e definir o quebra de página na tabela para evitar.

Eu tenho o mesmo problema bu nenhuma solução ainda. O page-break-inside não funciona em navegadores, mas no Opera. Uma alternativa pode ser usar page-break-after: avoid; em todos os elementos filho do div para manter juntos … mas nos meus testes, o atributo de evitar não funciona por exemplo. no Firefox …

O que funciona em todos os navegadores ppular são quebras de página forçadas usando, por exemplo. page-break-after: sempre

Os valores possíveis para quebra de página são: auto, always, avoid, left, right

Eu acredito que você não pode usar a propriedade page-break-after em elementos absolutamente posicionados.

page-break-inside: evite; definitivamente não funciona no webkit, na verdade, tem sido um problema conhecido há mais de 5 anos https://bugs.webkit.org/show_bug.cgi?id=5097

No que diz respeito à minha pesquisa, não há nenhum método conhecido para realizar isso (estou trabalhando para descobrir meu próprio hack)

O conselho que posso dar é, para realizar essa funcionalidade no FF, embrulhar o conteúdo que você não quer quebrar dentro de um DIV (ou qualquer outro container) com overflow: auto (apenas tome cuidado para não causar barras de rolagem estranhas aparecer dimensionando o recipiente muito pequeno).

Infelizmente, o FF é o único navegador que consegui fazer isso, e o webkit é o que mais me preocupa.

page-break-inside: avoid; me deu problemas usando wkhtmltopdf.

Para evitar quebras no texto, adicione display: table; para o CSS do div contendo texto.

Espero que isso funcione para você também. Obrigado JohnS.

Uma armadilha que eu encontrei foi um elemento pai tendo o atributo “overflow” definido como “auto”. Isso nega elementos div div com o atributo page-break-inside na versão impressa. Caso contrário, page-break-inside: avoid funcionar bem no Chrome para mim.

No meu caso, eu consegui consertar as dificuldades de quebra de página no webkit definindo meus divs selecionados para quebra de página: evite e também configure todos os elementos para exibir: inline. Então, assim:

 @media print{ * { display:inline; } script, style { display:none; } div { page-break-inside:avoid; } } 

Parece que as propriedades de quebra de página só podem ser aplicadas a elementos inline (no webkit). Eu tentei aplicar apenas a exibição: inline para os elementos específicos que eu precisava, mas isso não funcionou. A única coisa que funcionava era aplicar inline a todos os elementos. Eu acho que é um dos div grandes contêineres que está bagunçando as coisas.

Talvez alguém possa expandir isso.