To provide additional context for the issue at hand, there are situations where HTML elements span multiple pages in a PDF. In order to address this, I am looking to add borders around the HTML elements that are split across different PDF pages. The following image illustrates the problem: a large div containing multiple images spanning multiple pages. I would like to add a border-bottom and border-top to the overflowing element.
One approach that I am considering to achieve this is to implement a JavaScript function that is executed prior to converting the HTML to PDF (this is how you do it in IronPdf : https://ironpdf.com/examples/execute-custom-javascript/). The function would examine every element in the HTML and determine if it is in contact with the header or footer of the PDF page. If an element touches the bottom of the page, a border-bottom would be added to that page. Similarly, if an element touches the top of the page, a border-top would be added to the page.(Hmmm maybe I could add a
tag instead ??)
To implement this approach, the following steps could be taken:
- Calculate the height of each page in pixels
- Iterate through each HTML element and check if it intersects between two pages
- If an element intersects between two pages, add the required border styles to the corresponding PDF pages. For instance, a border-bottom to the first page and a border-top to the second page.
I came across an interesting idea on StackOverflow (https://stackoverflow.com/a/71366961/10541061) that I found worth exploring. The approach involves creating a div to mimic the height of each PDF page and inserting custom footer and header elements within that div. However, the challenge with this technique is that the PDFs are dynamically generated and merged, which means that the number of pages varies and the styling needs to be added programmatically.
It's worth noting that iText7 appears to automatically add the required borders in this scenario. However, I'm currently working with IronPDF and have discovered that this feature has not been implemented in their tool yet, according to my discussions with their team.
So it seems we have to do this the native way. I would love anyone insight into this while I am still digging this. Will keep this updated if I find anything interesting. I guess if this gets too complex , I would probably just stick with page-break-inside: avoid to prevent any element from intersecting pages. (This approach may not be the most ideal solution, as it has the potential to introduce large white gaps in the PDF. Furthermore, it doesn't technically guarantee page intersection, especially when an element spans multiple pages and continues to break)
