Webkitで印刷するときのCSS改ページの制御

Question

Webkitを使用して印刷されたhtml文書の外観を改善しようとしています。この場合、改ページが発生する場所を制御します。

私は私が使用して必要な改ページを挿入することができるよ：

page-break-after: always; 

をしかし、私はアイテムの途中に挿入される改ページを回避する方法を見つけることができませんが。たとえば、複数のページにまたがって分割されるべきではないhtmlテーブルがあります。

は、要素内にページ区切りが挿入されないようにしていますが、何もしていないようです。改ページ-内側にもかかわらず

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

：私のコードは次のようになり、私はまだ別のページに、第1および第2の行の間のテーブルの分割を取得ディレクティブを避けます。

アイデア？

Answer 1

はwkhtmltopdf http://code.google.com/p/wkhtmltopdf/の最近のバイナリをダウンロードし、以下は動作するようです。

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

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

そうでなければ、折り目の上にそれを作る「エッジ」を得るでしょう、TD上ゼロにマージン、パディングを入れて、divの上の任意のを配置するのが賢明

Answer 2

ネヴァーマインド：これはWebKitの問題であるように見えます：

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

Answer 3

クリフォードライフ状態として、

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

が機能します。しかし、Firefox用ではありません。 firefoxでは、あなたがしなければならないことは、高さを確認し、それが適切である場合page-break-after: always;を追加することです。

平均で、余白は上下に1インチになります。だから、10インチのページを消費することになるピクセル数を測定するために、私はこれを使用：

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

私はその中の段落の多くのdivの各がたくさんありました。だから私がしたことは、それらを繰り返し、現在のページ上の現在の高さを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; 
    } 
}); 

これは私のためにfirefoxで働いていました。