Contrôle des sauts de page CSS lors de l'impression dans Webkit

Question

Je tente d'améliorer l'aspect des documents html imprimés en utilisant Webkit, dans ce cas en exerçant un certain contrôle sur l'occurrence des sauts de page.

Je suis en mesure d'insérer des sauts de page où j'ai besoin à l'aide:

page-break-after: always; 

Cependant, je ne peux pas trouver un moyen d'éviter les sauts de page sont insérés au milieu des éléments. Par exemple, j'ai des tables html qui ne devraient pas être divisées au milieu sur plusieurs pages. J'ai eu l'impression que

page-break-inside: avoid; 

empêcherait un saut de page d'être inséré à l'intérieur de l'élément, mais il ne semble pas faire quoi que ce soit. Mon code ressemble:

.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> 

Malgré la page-break-inside: éviter la directive, je reçois toujours la scission de table entre la première et la deuxième ligne dans des pages séparées.

Des idées?

Answer 1

Téléchargé binaire récente de wkhtmltopdf http://code.google.com/p/wkhtmltopdf/, et ce qui suit semble fonctionner.

.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> 

Référence: http://code.google.com/p/wkhtmltopdf/issues/detail?id=9#c21

Prudent pour mettre la marge et le rembourrage à zéro sur le td, et placez-le sur une div, sinon vous aurez « bords » rendant sur les plis

Answer 2

de Nevermind: ressemble à ceci est un problème de WebKit:

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

Answer 3

Comme états cliffordlife,

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

fonctionnera. Mais pas pour Firefox. Dans Firefox, ce que vous devez faire est de vérifier la hauteur, puis ajouter page-break-after: always; quand il est pertinent.

En moyenne, la marge sera de 1 pouce en haut et en bas. Ainsi, pour mesurer le nombre de pixels d'une page de 10 pouces consomme, je ceci:

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); 
})(); 

J'ai eu beaucoup de divs chacun avec beaucoup de paragraphes en eux. Donc, ce que j'ai fait, c'est que j'ai itéré à travers eux, et ensuite comparé la hauteur actuelle des eux sur la page en cours à la valeur 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; 
    } 
}); 

Cela a fonctionné pour moi dans firefox.