Control de saltos de página CSS al imprimir en Webkit

Question

Estoy intentando mejorar la apariencia de los documentos html impresos con Webkit, en este caso ejerciendo cierto control sobre dónde ocurren los saltos de página.

soy capaz de insertar saltos de página en las que necesito usando:

page-break-after: always; 

Sin embargo, no puedo encontrar una manera de evitar los saltos de página que se insertan en el medio de artículos. Por ejemplo, tengo tablas html que no deben dividirse en el medio en varias páginas. Tenía la impresión de que

page-break-inside: avoid; 

impediría un salto de página sea insertado dentro del elemento, pero no parece estar haciendo nada. Mi código es el siguiente:

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

A pesar de la página-break-inside: evitar la Directiva todavía consigo la escisión mesa entre la primera y segunda fila en páginas separadas.

¿Alguna idea?

Answer 1

descargado un archivo binario reciente de wkhtmltopdf http://code.google.com/p/wkhtmltopdf/, y la siguiente parece funcionar.

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

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

prudente para poner el margen y el relleno a cero en el TD, y colocar ninguna en el div, de lo contrario obtendrá "bordes" por lo que es a través de los pliegues

Answer 2

importa: Parece que este es un tema webkit:

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

Answer 3

Como estados de cliffordlife,

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

funcionarán. Pero no para Firefox. En Firefox, lo que tendrá que hacer es verificar la altura y luego agregar page-break-after: always; cuando sea relevante.

En promedio, el margen será de 1 pulgada en la parte superior e inferior. Por lo tanto, para medir el número de píxeles consumiría una página de 10 pulgadas, utilicé esta:

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

que tenía un montón de divs cada uno con una gran cantidad de puntos en ellos. Entonces, lo que hice fue iterar a través de ellos, y luego comparé la altura actual de los mismos en la página actual con el valor 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; 
    } 
}); 

Esto funcionó para mí en firefox.