openhtmltopdf
openhtmltopdf copied to clipboard
Published
20 hours ago •
danfickle
danfickle
Dynamically sized page margin content
If i have na element defined as running at the top of the page, and the content of this element is bigger than the page margin i get result where the header overflows the body.
Of course i could just increase the margin, but in my case, the header will be dynamic, and there is no way to know how big it can be..
Screenshot
Page 1
Page 2
Reproducible code:
<html>
<head>
<style>
* {
font-family: 'Arial';
}
@page {
size: A4;
font-size: 16px;
margin: 2cm;
@top-center {
content: element(header);
}
@bottom-center {
content: element(footer);
}
}
.header {
page-break-inside: avoid;
position: running(header);
}
.footer {
page-break-inside: avoid;
position: running(footer);
}
table {
width: 100%;
font-size: 16px;
margin: 1cm;
border-collapse: collapse;
}
td, th {
padding: 6px;
border: 1px solid gray;
}
tfoot td {
background-color: aqua;
}
thead th {
background-color: coral;
}
</style>
</head>
<body>
<div class="header">
<p>This example shows how to use table pagination.</p>
<p>This example shows how to use table pagination.</p>
<p>This example shows how to use table pagination.</p>
<p>The table header and footer are automatically reproduced on each page.</p>
</div>
<table>
<thead>
<tr><th>Title 1</th><th>Title 2</th></tr>
</thead>
<tbody>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>Hello World! Hello World! Hello World!
Hello World! Hello World! Hello World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
<tr><td>Hello</td><td>World!</td></tr>
</tbody>
</table>
</body>
</html>
Dynamically sized repeating page content needs float: top and float: bottom, neither of which we currently support. The good news is that I'm implementing footnotes in #711 which is giving me a good understanding of the issues around float:bottom so I may eventually implement them.
