vivliostyle.js
vivliostyle.js copied to clipboard
vivliostyle
repeat-on-break element leaves gap when position is applied
I am trying to create a PDF that has a footer on each page. The footer has repeat-on-break: footer; and position: running(footer);. This positions a footer on each page as expected, but a blank space is left where the footer would have been without position: running(footer);.
This problem also affects elements that have repeat-on-break: header; and position: absolute;.
To Reproduce The simplest way I can reproduce this issue is with the attached file. The .page span spans two pages. The blank space is at the bottom of the first page. test.html.txt
Expected behavior The gap should be filled with content from the next page.
@sambazley Thanks for reporting the issue.
It seems that repeat-on-break works well only on static positioned elements, and has problem with position: absolute or position: running() elements.
By the way, for running footers (with position: running()), repeat-on-break should not be necessary. Check the example:
<!DOCTYPE html>
<html>
<head>
<style>
@page {
size: A4 portrait;
margin-bottom: 5cm;
@bottom-center {
content: element(footer);
}
}
#abs {
background: red;
width: 50%;
height: 5cm;
position: running(footer);
display: block;
}
.page {
background: green;
width: 100%;
display: block;
}
</style>
</head>
<body>
<span id="abs">abs</span>
<span class="page">
page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>
page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>
page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>
page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>
page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>
page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>page<br>
page<br>page<br>
</span>
</body>
</html>
@MurakamiShinyu thank you for your help. This solution works for the PDF, although moving the footer element to the top of the body element means the HTML file displays the footer at the top of the page. Ideally the HTML page will have a single footer at the bottom of the document and the PDF will have a footer at the bottom of each page.
I've found a work around using your example with the following:
body {
display: grid;
}
#abs {
order: 1;
}