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!