Sterowanie łamaniem stron CSS podczas drukowania w pakiecie Webkit

Question

Próbuję poprawić wygląd dokumentów HTML drukowanych przy użyciu pakietu Webkit, w tym przypadku uzyskując pewną kontrolę nad tym, gdzie występują podziały strony.

jestem w stanie wstawić podziały stron gdzie potrzebne przy użyciu:

page-break-after: always; 

Jednak nie mogę znaleźć sposób, aby uniknąć przerw strona jest umieszczona w środku przedmiotów. Na przykład mam tabele html, które nie powinny być dzielone w środku na wiele stron. Odniosłem wrażenie, że uniemożliwiłbym wstawienie strony do elementu, ale wydaje się, że nic nie robi. Mój kod wygląda następująco:

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

Pomimo page-break-wewnątrz: unikać dyrektywę wciąż otrzymuję podział tabeli pomiędzy pierwszym i drugim rzędzie na oddzielne strony.

Wszelkie pomysły?

Answer 1

Pobrano niedawno binarny z wkhtmltopdf http://code.google.com/p/wkhtmltopdf/ i dodaje wydaje się działać.

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

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

Ostrożne umieścić marginesu i dopełnienie do zera na td, i umieścić każdy na div, inaczej dostaniesz „krawędzie” uczynienie go na fałdach

Answer 2

Nevermind: wygląda na to, że jest to kwestia WebKit:

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

Answer 3

Jako stan cliffordlife,

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

będzie działać. Ale nie dla firefox. W firefox, co musisz zrobić, to sprawdzić wysokość, a następnie dodać page-break-after: always;, gdy jest to istotne.

Średnio margines wynosi 1 cal na górze i na dole. Tak więc, aby zmierzyć ile pikseli strona 10 cali będzie konsumować, użyłem to:

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

miałem dużo DIV każdego z wielu akapitów w nich. Tak więc zrobiłem iterację przez nich, a następnie porównałem aktualną wysokość ich na bieżącej stronie z wartością 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; 
    } 
}); 

To działało dla mnie w firefox.