CODEWITHSUNDEEP
twitter-bootstrapwkhtmltopdf
Fabio Baldissera
Fabio Baldissera

Reputation: 593

wkhtmltopdf not rendering percentage widths correctly

I am using wkhtmltopdf to generate PDFs from bootstrap layouts, for the most part, the results are very close to what is rendered by the browser. However, I noticed that using segmented "bootstrap rows" (composed by many col-xs) makes so the total width does not add up to 100%.

I am using 12 col-xs-1 in one part of the document, and the result can be seen here: right column alignment is off, depeding on the number of col-xs used

Here is the CSS for the class of the columns (or at least the part I tried to change):

.col-xs-1 {
    float: left;
    width: 8.333333%;
}

I increased the width % up to 8.37% and nothing changes, the size remains the same. But, when I increase it to 8.38%, then it`s too large and breaks the layout (the last column go to the next line).

Again, in the browser it looks good. It seems to me that there is a rounding error or something that is messing with the widths of the columns. It becomes very obvious when you have borders.

Does anyone have any suggestion on what should I try?

Upvotes: 0

Views: 2363

Answers (1)

Fabio Baldissera
Fabio Baldissera

Reputation: 593

Ok, so the problem is that wkhtmltopdf does not render decimal pixels (10.5px = 10px ...)

A "fix" for the problem was to increase the dpi setting. I set it to 2000 dpi, and the final file size and processing time remained the same, while solving the problem. There could be a side effect that I am not aware right now, but so far it seems to work fine for what I am doing.

Another fix could be to make sure that the 100% width is a number multiple of 12 (or N columns you are using). I did not test that, but seems logical.

Anyways, documenting here to hopefully help someone with the same problem.

Upvotes: 4

Related Questions