Logo
My Account |  Site Map | Contact Us  
Welcome Guest Search | Active Topics | Sign In | Register

HTMLToPDF strange page breaks Options
Klaas
Posted: Tuesday, October 30, 2018 5:29:44 PM
Rank: Newbie
Groups: Member

Joined: 10/30/2018
Posts: 4
Hi.

I'm having problems with page breaks in HtmlToPdf 18.3.23 from Nuget.
Basically, the first 19 pages, only contains a single row of text, after those pages I get the expected results.

The following HTML generates the attached PDF.
I cant attach PDF:s? Anyway first page is just AAA, the second BBB, the third test until page 20, then it gets it right and lists them.

Can someone explain to me why that is?

Code: HTML/ASPX
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        h1 {
            text-align: center;
            font-size: 20px;
            letter-spacing: 14px;
        }

        h2 {
            border-bottom: 1px solid black;
            border-top: 1px solid black;
            text-align: center;
            font-size: 12px;
        }

        h3 {
            text-align: center;
            font-size: 17px;
            letter-spacing: 14px;
        }

        h4 {
            text-align: center;
            font-size: 9.96px;
        }

        h5 {
            font-family: Arial;
            font-size: 10px;
            font-weight: bold;
            margin-bottom: 0px;
        }

        .sub-header {
            font-family: Arial;
            font-size: 8.25px;
            text-align: center;
        }

        .county {
            margin-bottom: 10px;
            font-family: Arial;
            font-size: 10px;
        }

        .company-name {
            text-transform: capitalize;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
    <div class="county">
        <h5>AAA</h5>
        <div style="page-break-inside: avoid">
                <div><span class="company-name">BBB</span></div>
                <div>test</div>
            </div>
        </div>
</body>
</html>
eo_support
Posted: Thursday, November 1, 2018 11:50:28 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 20,746
Hi,

We have looked into this issue. The easiest way to resolve this issue is add small space between your text lines. For example, you can change your company-name CSS rule to:

Code: CSS
.company-name 
{
    text-transform: capitalize;
    font-weight: bold;
    line-height: 12px;
}


Note the additional line-height property added.

The root cause for your issue is text line overlaps. In a "normal" HTML page, text lines generally do not overlap due to a number of factors. For example, the default <P> element would have margins. Also the font designer would set the line height to be sufficient enough so that it can fit the whole letters vertically. However occasionally text lines can overlap due to various reasons. Consider the following HTML:

Code: HTML/ASPX
<div style="font-size: 10px; line-height: 8px;">
    <div>line 1</div>
    <div>line 2</div>
</div>


In the above example, the line height is purposely set to be smaller than the actual line height needed and would cause the two lines to overlap. In this case the Y coordination of the first line can be from 0 to 10, while the second line can be from 8 to 18. The second line would start from 8 instead of 10 due to the line-height setting, which causes the two lines to overlap.

Such intentional overlap is easy to notice and fix. However unintentional overlap can occur due to:

1. Rounding errors. Internally the browser engine uses float values to calculate coordination but due to historical reasons it reports the line coordination in integers. For example, if you were to call getClientRects() on a text line with font-size set to 10, you may get 11;
2. Heavier font styles such as bold. This usually increases the vertical space of a line occupies and increases the potential of lines overlapping with each other;

Please keep in mind that even when text lines coordination overlap, they may not visually overlap and do not cause any problem when the page is displayed visually on the screen. However the direct impact of text line coordination overlap on the HTML to PDF converter is it will cause a single "page-break-inside:avoid" block. Take the above two text line as an example, the following rules apply:

1. "line 1" is not breakable since it's a single text line, breaking in the middle of a text line is not acceptable;
2. The same rule applies to "line 2";
3. Since both line 1 and line 2 are not breakable and they overlap, it means there is no space in between the two lines that can be safe to insert a page break without risking cutting either text line;

The result is a hidden "page-break-inside:avoid" being implicitly created for these two lines. This process repeats many times for all the text lines in your HTML file and resulted in many hidden (and large) "page-break-inside:avoid" blocks. This combines with the first explicit "page-break-inside:avoid" defined in your HTML and caused the converter to adopt a "let's remove one line and see if the rest fits" strategy, which caused the result you are seeing. While in theory its possible to improve this strategy to make it more likely to produce a more desired result, doing so would need to introduce more hidden rules in the paging process and can potentially make it even more confusing and harder to understand (think about how much "trouble" this overlapping text line rule that is already employed can cause) for some cases. As such we are reluctant to complicate it further. Instead we would recommend our users to adjust the HTML to avoid triggering such issues.

Hope this makes sense to you. Please feel free to let us know if you still have any questions.

Thanks!
Klaas
Posted: Thursday, November 1, 2018 5:40:36 PM
Rank: Newbie
Groups: Member

Joined: 10/30/2018
Posts: 4
Ok. I understand. Good explanation.

I have a couple follow-up questions:

1. How do I debug this?
2. What should I (besides line-height) consider carefully if I wanna make sure that I don't sacrifice design? I have to be sure that the layout looks good on a couple of hundreds of pdf:s every week and I cant check them manually.
3. Is there any way to insert a "please page break here if needed" tag?

//Thanks.
eo_support
Posted: Friday, November 2, 2018 5:13:03 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 20,746
Hi,

The best way to avoid this is to avoid using DIV to stack text directly next to other. However you brought up very good points: Not only there is no bullet proof way to avoid this, but also it is very difficult to debug. As such I believe it is necessary for us to investigate this further to see if we can have a better solution for such scenarios. As for now there is no way to insert a "please page break here if needed" tag, that would be something we can consider when we investigate this issue.

We will reply here again if we have an update on this issue.

Thanks!
Klaas
Posted: Tuesday, November 6, 2018 5:37:22 PM
Rank: Newbie
Groups: Member

Joined: 10/30/2018
Posts: 4
What exactly do you mean with "The best way to avoid this is to avoid using DIV to stack text directly next to other." ?
Im trying to modify the HTML not trigger these kind of issues. It looks like I have two different problems I'm trying to work around atm.

The first and most pressing one is to make sure the page doesnt break the following block into 2 pages:
Code: HTML/ASPX
<div class="county-header-block">
                    <div class="county-header">TEST</div>
                </div>

With the css:
Code: HTML/ASPX
.county-header-block {
            background-color: black;
            margin: 0px 0px 3px 0px;
            height: 24px;
            padding: 4px 0px 0px 6px;
            width: 300px;
            line-height: 28px;
        }

        .county-header {
            page-break-inside: avoid;
            font-family: Helvetica;
            font-size: 14px;
            font-weight: bold;
            color: white;
        }

Any tips?
eo_support
Posted: Tuesday, November 6, 2018 6:23:41 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 20,746
We are working on this issue. Give us a few days and we should have an update build for you. You may not need to change any code on your end with the new build.
Klaas
Posted: Wednesday, November 7, 2018 2:50:25 PM
Rank: Newbie
Groups: Member

Joined: 10/30/2018
Posts: 4
I see. Sounds interesting. I'll hold of on trying to fix the existing HTML then.
eo_support
Posted: Friday, November 9, 2018 11:19:04 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 20,746
Hi,

We have posted a new build. You can see your private message for the download location. Please take a look and let us know how it goes.

Thanks!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.