Controllo delle interruzioni di pagina CSS durante la stampa in Webkit

Question

Sto tentando di migliorare l'aspetto dei documenti HTML stampati con Webkit, in questo caso esercitando un controllo su dove si verificano le interruzioni di pagina.

sono in grado di inserire interruzioni di pagina in cui ho bisogno utilizzando:

page-break-after: always; 

Tuttavia, non riesco a trovare un modo per evitare interruzioni di pagina di essere inseriti nel bel mezzo di elementi. Ad esempio, ho tabelle html che non dovrebbero essere divise a metà tra più pagine. Ho avuto l'impressione che

page-break-inside: avoid; 

impedirebbe un'interruzione di pagina venga inserita all'interno dell'elemento, ma non sembra essere di fare qualsiasi cosa. Il mio codice è simile:

.dontsplit { border: 2px solid black; page-break-inside: avoid; } 

<table class="dontsplit"> 
    <tr><td>Some title</td></tr> 
    <tr><td><img src="something.jpg"></td></tr> 
</table> 

Nonostante il page-break-inside: evitare direttiva ho ancora ottenere la scissione tavolo tra la prima e la seconda fila in pagine separate.

Qualche idea?

Answer 1

scaricati una recente binaria di wkhtmltopdf http://code.google.com/p/wkhtmltopdf/, e la seguente sembra funzionare.

.dontsplit { border: 2px solid black; page-break-inside: avoid; } 

<table> 
    <tr><td><div class="dontsplit">Some title</div></td></tr> 
    <tr><td><div class="dontsplit"><img src="something.jpg"></div></td></tr> 
</table> 

di riferimento: http://code.google.com/p/wkhtmltopdf/issues/detail?id=9#c21

prudente mettere margine e padding a zero sul TD, e collocare sul div, altrimenti si otterrà "bordi" fare sopra le pieghe

Answer 2

Nevermind: Sembra che questo è un problema webkit:

https://bugs.webkit.org/show_bug.cgi?id=5097

Answer 3

Come dice cliffordlife,

.dontsplit { border: 2px solid black; page-break-inside: avoid; } 

funzionerà. Ma non per Firefox. In Firefox, ciò che devi fare è controllare l'altezza e quindi aggiungere page-break-after: always; quando è rilevante.

In media, il margine sarà 1 pollice in alto e in basso. Così, per misurare il numero di pixel di una pagina da 10 pollici consumerebbe, ho usato questo:

var pageOfPixels; 
(function(){ 
    var d = document.createElement("div"); 
    d.setAttribute("style", "height:9in;position:absolute;left:0px;top:0px;z-index:-5;"); 
    document.body.appendChild(d); 
    pageOfPixels = $(d).height(); 
    d.parentNode.removeChild(d); 
})(); 

ho avuto un sacco di div ciascuno con un sacco di punti in loro. Quindi, quello che ho fatto è stato l'iterazione attraverso di essi, e poi ho confrontato l'altezza corrente di essi nella pagina corrente con il valore pageOfPixels.

var currentPosition = 0; 
$('.printDiv').each(function (index, element) { 
    var h = $(this).height(); 
    if (currentPosition + h > pageOfPixels) { 
     //add page break 
     $('.printDiv').eq(index - 1).css("page-break-after", "always"); 
     currentPosition = h; 
    } else { 
     currentPosition += h; 
    } 
}); 

Questo ha funzionato per me in Firefox.