CODEWITHSUNDEEP
phphtmlwkhtmltopdf
kitensei
kitensei

Reputation: 2530

wkhtmltopdf footer size issues

I have a problem converting an HTML file to pdf, when trying to add a footer, the size rendered as PDF is not the one specified in the css.

The size of the footer must be exactly 155mm, but if I tell wkhtml2pdf to have a bottom border of 155mm, the footer starts almost at half of the page.

I have tried with a simpler html page of 50mm with 5 stripes of 10mm each, and with the switch -B 50mm I have a margin below the actual footer of 50mm

The command that I am running is: wkhtmltopdf.exe -B 150mm -L 0 -R 0 -T 0 --footer-html footer.html page.html page.pdf

To have the footer placed correctly, I have to use -B 119mm

Can someone help me or point me to the right direction ? I read many posts about that but could not solve my problem, it seems that windows installation act differently from Linux one, but I will only install it on windows host, so no problem about a windows-only solution

page.html

<!doctype html>

<html lang="fr">
<head>
  <meta charset="utf-8">

  <title>Header</title>

  <link rel="stylesheet" href="css/normalize.css?v=1.0">

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
coucou

</body>
</html>

footer.html

<!doctype html>

<html lang="fr">
<head>
  <meta charset="utf-8">

  <title>Footer</title>

  <link rel="stylesheet" href="css/normalize.css?v=1.0" media="all">
  <link rel="stylesheet" href="css/footer.css?v=1.0" media="all">

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>

    <div id="bvr">

        <div class="bvr-cut">
            <div class="payment-recipient">
               blahblah
            </div>
            <div class="payment-account">01-88205-8</div>
            <div class="payment-amount">
                <span class="val">3</span>
                <span class="val">2 5</span>
            </div>
            <div class="payment-sender">
               blahblah
            </div>
        </div>

        <div class="bvr-cut">
            <div class="payment-recipient">
               blahblah
            </div>
            <div class="payment-account">01-88205-8</div>
            <div class="payment-amount">
                <span class="val">3</span>
                <span class="val">2 5</span>
            </div>
            <div class="payment-sender">
               blahblah
            </div>
        </div>
        <div class="bvr-code">
            <div class="col c12">
               blahblah       
            </div>
        </div>
    </div>

</body>
</html>

footer.css

@charset "UTF-8";

#bvr {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    background: #FC0;
    font-family: "Helvetica-Neue", Helvetica, sans-serif;
    height:155mm;
    page-break-after: auto;
    display: block;
    clear: both;
    border: 1px solid #000;
}

.bvr-cut {
    float:left;
    width: 230px;
    background: #ccc;
}

.payment-recipient {
    height: 72px;
    position: relative;
    background: #0cf;
}

.payment-account {
    text-align: right;
    font-weight: 600;
    padding-right: 4.5em;
    margin-bottom: .6em;
    background: #12F;
}

.payment-amount {
    background: #FCC;
    text-align: right;
    margin-bottom: .8em;
}

.payment-amount > span.val {
    border: 1px solid #000;
    padding-right: 2em;
}

.payment-sender {
    position: relative;
    background: #f0c;
}

.bvr-ref {
    display: block;
    background: #FF0;
}

.bvr-code {
    background: #c0f;
}

Upvotes: 2

Views: 5614

Answers (1)

kitensei
kitensei

Reputation: 2530

After searching, I found out that the problem didn't come from wkhtmltopdf but to a processed size issue in windows systems.

If I run that code on unix based systems everything works great, but on windows it doesn't. In fact, font size (and any other size: height, width, etc.) in windows must be scaled with a 1.33 ratio in order to render exactly the same as it does in unix.

I couldn't find a link in english, but here a little explaination which worked great for me (search "1.33") in the webpage.

Basically, I created two classes in my css:

html: { font-size: 93.1%; }
body: { height: 88mm; }

/*–––––––––––––––––––––––– system hacks –––––––––––––––––––––––– */

/**
 * Unix* system based servers render font much
 * bigger than windows based server.
 * Force windows font to 100% and rescale the
 * linux rendering by the magic factor (1.33)
 */
.linux {
  font-size: 70%;
}

/**
 * base size: 88mm
 *
 * for wkhtmltopdf generation,
 * body size must be multiplied by 1.33 factor on windows systems
 */
.win body {
  height: 117.04mm;
}

And with a bit of php, I've added dynamically the class to the <html> tag based on server system.

Upvotes: 1

Related Questions