Контроль разрывов страниц CSS при печати в Webkit

Question

Я пытаюсь улучшить внешний вид html-документов, напечатанных с помощью Webkit, в данном случае, обеспечивая некоторый контроль над тем, где происходят разрывы страниц.

Я могу вставлять разрывы страниц там, где мне нужно, используя:

page-break-after: always; 

Однако я не могу найти способ избежать разрывов страниц, вставляемых в середину элементов. Например, у меня есть HTML-таблицы, которые не должны быть разбиты по середине на нескольких страницах. У меня сложилось впечатление, что

page-break-inside: avoid;

предотвратит вставку разрыва страницы внутри элемента, но, похоже, он ничего не делает. Мой код выглядит так:

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

Несмотря на разрыв страницы: избегайте директивы. Я по-прежнему разделяю таблицу между первой и второй строкой на отдельные страницы.

Есть идеи?

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

Благоразумно ставить поля и отступы до нуля на тд, и помещать любые на div, иначе вы получите "края", делающие это на сгибы

Answer 2

Как заявляет cliffordlife,

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

Answer 3

Nevermind: похоже, это проблема webkit:

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