An HTML to PDF library for the JVM. Based on Flying Saucer and Apache PDF-BOX 2. With SVG image support. Now also with accessible PDF support (WCAG, Section 508, PDF/UA)!
I'm trying to generate a PDF that should look like this:
Where the content within the red section should be in an other page (one, two, or more depending of its length) when it overflows the container. As you can see, currently it overflows the section and I have only one page.
I've tried different css properties on the container:
display
widows
-fs-page-break-min-height
I had almost something working with -fs-page-break-min-height, at least a page break, but nothing was repeated on the second page (logo, header, etc).
Any advice on how it could be achieved?
Below is the html/css used so far:
<html lang="en"><head>
<style>
@page {
size: A4 portrait;
height: 297mm;
width: 210mm;
margin: 0 auto;
}
body {
min-height: 100vh;
min-width: 100vw;
margin: 0 auto;
font-family: "TradeGothic CondEighteen";
font-size: 9pt;
color: rgb(51, 51, 51);
}
.header {
height: 17mm;
width: 100%;
}
.main-header {
height: 68mm;
margin: 0 14.5mm;
}
.main-content {
height: 176mm;
margin: 0 14.5mm;
}
.main-content .content-container {
display: block;
}
.main-content .content-container .content-container-row {
display: table;
}
.main-content .content-container .content-container-row.colspan3 {
display: block;
}
.main-content .content-container .left,
.main-content .content-container .middle,
.main-content .content-container .right {
display: table-cell;
}
.main-content .content-container .left {
width: 60mm;
}
.main-content .content-container .middle {
width: 4mm;
}
.main-content .content-container .right {
width: 117mm;
}
.main-content .content-container .right .analyst-comment {
height: 77mm;
display: block;
page-break-inside: always;
border: 1px solid red;
}
.main-content .content-container .right .analyst-comment .analyst-comment-content {
display: block;
}
.footer {
height: 36mm;
margin: 0 14.5mm;
} </style>
</head>
<body>
<div class="header">
Logo
</div>
<div class="main-header">
Main header
</div>
<div class="main-content">
<div class="content-container">
<div class="content-container-row colspan3">
Title
</div>
<div class="content-container-row">
<div class="left">Sub title</div>
<div class="middle"> </div>
<div class="right">
<div class="analyst-comment">
<div>Content to overflow on the next page</div>
<div class="analyst-comment-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac lacus iaculis risus molestie viverra suscipit id augue. Donec molestie quam feugiat elit venenatis, in eleifend arcu hendrerit. Praesent ultrices quam sit amet lacus tempus gravida non ac risus. In at dolor convallis sapien scelerisque posuere. Sed lorem orci, semper ac ligula sit amet, vestibulum ullamcorper eros. Nullam in nisl diam. Nulla eu justo dapibus eros bibendum dictum.</p>
<p>Nunc semper turpis arcu, vitae congue eros accumsan luctus. Suspendisse molestie lectus a ultricies tempus. Phasellus mollis turpis vel mauris vulputate, ut tempor nunc tristique. Morbi euismod gravida purus, id viverra orci maximus at. Mauris ac ultrices enim, at pretium eros. Curabitur placerat egestas vestibulum. In vitae ipsum finibus, tincidunt sem commodo, venenatis neque. In egestas ut dui eget venenatis. Aenean purus eros, dignissim sit amet dolor in, semper cursus libero. In quis nunc nec eros commodo porta. Sed velit nunc, dictum vel bibendum fringilla, sollicitudin at orci. Nulla eu massa orci.</p>
<p>Sed hendrerit enim eu est sagittis, sed luctus nisl fringilla. Aliquam volutpat mi vel nunc gravida, ac viverra lectus finibus. Maecenas at urna non elit auctor convallis. Nulla finibus nisl urna, vitae suscipit leo cursus eu. Sed a iaculis mi, non rhoncus enim. Curabitur luctus, dui sed auctor vestibulum, ligula erat rutrum nibh, vel tempus nisl risus sit amet nulla. Maecenas tincidunt tempus nisl, eu gravida lacus facilisis quis. Morbi gravida dolor pharetra laoreet efficitur. Integer mattis tempus fermentum.</p>
<p>Sed et tempor mauris. Aenean nunc quam, tempus quis nibh nec, luctus tempus lectus. Nullam tristique ultricies lacus, sit amet porttitor libero placerat ut. Sed interdum purus nec felis pretium, a pharetra nibh faucibus. Suspendisse ex quam, interdum et rhoncus id, fringilla vel odio. Cras quis venenatis leo. Duis vel libero ut arcu convallis lobortis. Nulla a vulputate sem. Curabitur elementum nunc ut leo hendrerit feugiat. Praesent purus purus, viverra faucibus suscipit rhoncus, aliquet nec mauris. Fusce at metus ac arcu sollicitudin fermentum vel eu turpis.</p>
<p>Aliquam erat volutpat. Etiam bibendum mattis fringilla. Nam molestie malesuada ipsum, a interdum enim molestie vel. Morbi rhoncus venenatis justo. Cras ullamcorper odio lectus, in iaculis orci pellentesque eu. Nunc eget consequat purus. Suspendisse maximus, tortor non aliquam bibendum, velit lorem sollicitudin enim, a rutrum diam ligula et eros. Etiam iaculis placerat magna, eget posuere est vestibulum vitae. Morbi suscipit nulla ac purus scelerisque, eget scelerisque orci pharetra. Fusce ac felis dapibus sem maximus pretium. Pellentesque at est nibh. Morbi a tempor tellus, in vulputate diam.</p>
<p>Sed dictum porttitor felis. Morbi malesuada mi quis nulla sollicitudin dictum in ut augue. Vestibulum pellentesque blandit quam ut ullamcorper. Sed ut venenatis odio. Mauris posuere enim a purus varius, sed suscipit diam efficitur. Vivamus eget lorem fermentum, fermentum enim et, vehicula nisi. Sed in interdum justo.</p>
<p>Nulla pretium arcu sit amet porttitor lobortis. Maecenas feugiat vulputate ipsum ut sodales. Donec iaculis dapibus massa sit amet consequat. Sed justo ipsum, rhoncus eu nisl ac, interdum faucibus erat. Praesent sit amet erat ante. Proin venenatis velit nec imperdiet pretium. Fusce libero eros, dapibus eget interdum sit amet, tempor quis est. Nunc scelerisque, neque at faucibus dapibus, magna quam consectetur urna, vitae auctor diam quam non lorem. Quisque nec porttitor mi. Morbi vitae augue viverra, interdum enim ut, commodo nulla. Maecenas lectus enim, tincidunt ut orci et, porttitor bibendum dui. Nulla ultrices congue blandit.</p>
<p>Maecenas a ornare arcu, eu pharetra enim. Aliquam ut lacus vel dolor egestas gravida. Cras et turpis elit. Nulla ut ultrices justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean semper dui tincidunt pellentesque pretium. Sed feugiat ipsum vitae felis tempor, ac auctor ipsum efficitur.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
Footer
</div>
</body></html>
Hello community,
I'm trying to generate a PDF that should look like this:
Where the content within the red section should be in an other page (one, two, or more depending of its length) when it overflows the container. As you can see, currently it overflows the section and I have only one page.
I've tried different css properties on the container:
I had almost something working with -fs-page-break-min-height, at least a page break, but nothing was repeated on the second page (logo, header, etc).
Any advice on how it could be achieved?
Below is the html/css used so far:
Thank you in advance for any help.