Управление разрывами страницы CSS при печати в Webkit

Я пытаюсь улучшить внешний вид 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>

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

Любые идеи?

Ответы

Ответ 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, иначе вы получите "края", делающие это над сгибами

Ответ 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);
})();

У меня было много divs с множеством абзацев. Итак, что я сделал, я пропустил через них, а затем сравнил текущую высоту их с текущей страницей с параметром 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.