html - para - media print css

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

Puedo insertar saltos de página donde necesito usar:

page-break-after: always; 

Sin embargo, no puedo encontrar una manera de evitar que se inserten saltos de página en medio de los elementos. Por ejemplo, tengo tablas html que no deberían dividirse en el medio en varias páginas. Tuve la impresión de que

page-break-inside: avoid;

evitaría que se insertara un salto de página dentro del elemento, pero no parece estar haciendo nada. Mi código se ve como:

.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 separación de páginas: evitar directivas, sigo dividiendo la tabla entre la primera y la segunda fila en páginas separadas.

¿Algunas ideas?

Answer 1

Como afirma Cliffordlife,

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

trabajará. 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. Entonces, para medir cuántos píxeles consumiría una página de 10 pulgadas, utilicé esto:

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

Tuve muchos divs cada uno con muchos párrafos en ellos. Entonces, lo que hice fue iterar a través de ellos, y luego comparé la altura actual de ellos en la página actual con el valor de 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 me funcionó en Firefox.

Answer 2

Descargué un binario reciente de wkhtmltopdf http://code.google.com/p/wkhtmltopdf/ , y lo 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 rellenar a cero en el td, y colocar cualquiera en el div, de lo contrario obtendrás "bordes" haciéndolo sobre los pliegues

Answer 3

No importa: parece que esto es un problema de webkit:

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