Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Page size problem #230

Open
BbIKTOP opened this issue Jun 18, 2018 · 4 comments
Open

Page size problem #230

BbIKTOP opened this issue Jun 18, 2018 · 4 comments

Comments

@BbIKTOP
Copy link

BbIKTOP commented Jun 18, 2018

Hi again,
Another strange problem. If body height is set longer than 296.4mm (for example, 296.5), openhtmltopdf adds the new empty page to the pdf:

@page
{
    size: 210mm 297mm;
    margin: 0;
}
@media print
{
    body, html
    {
        background-color: #ff
        width: 210mm;
        height: 296.4mm;
        padding: 0;
        margin: 0;
        border: 0;
    }
@rototor
Copy link
Contributor

rototor commented Jun 19, 2018

@BbIKTOP Why would you add a fixed height to the body? If you want to limit the maximum amount of content in your output I would rather suggest wrapping the content in a

<div style='height:297mm;width:100%;overflow:hidden;position:absolute;left:0;top:0>
...content...
</div>

This should ensure that you will not get any page breaks. You are likely hitting some corner case here. Would you mind adding a full HTML example to reproduce this error? Thanks.

@BbIKTOP
Copy link
Author

BbIKTOP commented Jun 21, 2018 •
edited
Loading

I just needed a report with the colored background (#044 if it matters)))
So, I set the body to the @page size and body's back to the color needed, and then found that the document does not fits one page, and I observe the small stripe of that color at the very top of the next page. I tried to reduce height and discovered that 296.4 is the minimum to fit one page. Html is simple, just the body with background-color and sizes set (btw, 1px wide vertical lines ain't displayed in the pdf as well):

<html>
    <head>

        <meta charset="UTF-8"/>

<style>
.bgcolor { color: rgb(255, 255, 255); background-color: rgb(0, 50, 40); }
.boxcolor { color: rgb(248, 248, 248); background-color: rgb(217, 81, 43); }
</style>
  <meta name="subject" content="HTML to PDF testing document"/>
  <meta name="description" content="Document for HTML to PDF testing"/>
  <meta name="keywords" content="HTML, PDF, Test"/>
  <meta name="author" content="Viktor"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

       <link rel='stylesheet' type='text/css' href='http://base.etogo.net/css/html2pdf.css' media='print'/>

        <title>
            HTML 2 PDF
        </title>



    </head>


    <body>


<div id="maincontainer" class="bgcolor">
            <div id="rightruler" class="ruler"></div>
        <div class="ruler smallruler" style="left: 0mm;"></div><div class="ruler smallruler" style="left: 5mm;"></div><div class="ruler smallruler" style="left: 10mm;"></div><div class="ruler smallruler" style="left: 15mm;"></div><div class="ruler smallruler" style="left: 20mm;"></div><div class="ruler smallruler" style="left: 25mm;"></div><div class="ruler smallruler" style="left: 30mm;"></div><div class="ruler smallruler" style="left: 35mm;"></div><div class="ruler smallruler" style="left: 40mm;"></div><div class="ruler smallruler" style="left: 45mm;"></div><div class="ruler smallruler" style="left: 50mm;"></div><div class="ruler smallruler" style="left: 55mm;"></div><div class="ruler smallruler" style="left: 60mm;"></div><div class="ruler smallruler" style="left: 65mm;"></div><div class="ruler smallruler" style="left: 70mm;"></div><div class="ruler smallruler" style="left: 75mm;"></div><div class="ruler smallruler" style="left: 80mm;"></div><div class="ruler smallruler" style="left: 85mm;"></div><div class="ruler smallruler" style="left: 90mm;"></div><div class="ruler smallruler" style="left: 95mm;"></div><div class="ruler smallruler" style="left: 100mm;"></div><div class="ruler smallruler" style="left: 105mm;"></div><div class="ruler smallruler" style="left: 110mm;"></div><div class="ruler smallruler" style="left: 115mm;"></div><div class="ruler smallruler" style="left: 120mm;"></div><div class="ruler smallruler" style="left: 125mm;"></div><div class="ruler smallruler" style="left: 130mm;"></div><div class="ruler smallruler" style="left: 135mm;"></div><div class="ruler smallruler" style="left: 140mm;"></div><div class="ruler smallruler" style="left: 145mm;"></div><div class="ruler smallruler" style="left: 150mm;"></div><div class="ruler smallruler" style="left: 155mm;"></div><div class="ruler smallruler" style="left: 160mm;"></div><div class="ruler smallruler" style="left: 165mm;"></div><div class="ruler smallruler" style="left: 170mm;"></div><div class="ruler smallruler" style="left: 175mm;"></div><div class="ruler smallruler" style="left: 180mm;"></div><div class="ruler smallruler" style="left: 185mm;"></div><div class="ruler smallruler" style="left: 190mm;"></div><div class="ruler smallruler" style="left: 195mm;"></div><div class="ruler smallruler" style="left: 200mm;"></div><div class="ruler smallruler" style="left: 205mm;"></div></div>

    </body>
</html>

@danfickle
Copy link
Owner

This is likely to be accumulated float rounding errors. Leave this issue open and I’ll try to debug at some point as it is a bit hackish to have to adjust units slightly to fit.

@BbIKTOP
Copy link
Author

BbIKTOP commented Jun 26, 2018

Dunno, it is the root element, so how could it be rounding? No borders, no paddings or margins - just one element with exact integer height set, nothing to round there, isn't it? Well, thank you, hope, you'll find why it's so

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@rototor @danfickle @BbIKTOP