Wicked_pdf: PDF and HTML look different with Letter Spacing.

Created on 17 Aug 2012 · 12Comments · Source: mileszs/wicked_pdf

Hello,

Using both 0.79 and 0.7.2 the PDF generated looks slightly different than my original HTML. Adding the show_as_html flag presents it as expected however the inline-styles are being handled differently in the PDF then they are in the HTML preview.

Specifically the problem I'm having is with letter-spacing declarations which also have a float not being rendered correctly. So for instance on a right float element which has the letter-spacing, the PDF will space the characters too much and from center such that the text goes partially off the screen rather than bumping further to left for the difference of the letter-spacing width.

Here is the original HTML snippet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  </head>
  <body>
     <div class="page-break fact-sheet">

    <table width="800" border="0">

      <tr>
        <td colspan="3"><span style="font-family:Helvetica, Arial, sans-serif;font-size:10pt;margin-top:18px;text-transform:uppercase;float: right;letter-spacing:2pt">Winter 2013</span></td>
      </tr>
    </table>

</div>
  </body>
</html>

Here is the code doing the rendering:

      render :pdf => 'file_name',
             :template => 'template.html.erb',
             :layout => 'pdf.html'

Here is the rendered HTML: http://jsfiddle.net/wX4DQ/

Here is the outputted PDF: http://imgur.com/sdUPM
Any suggestions as to what do here?

Source

dwickwire

👍1

Most helpful comment

I found the same thing happen when I was printing my PDFs. I tried a few things first, like alter the DPI and use a custom font but none of that worked.

What did work was updating wkhtmltopdfto the latest version (0.12.2.1 at the time of writing) by using the edge binary gem:

gem 'wkhtmltopdf-binary-edge'

Hope this helps others.

joshuapinter on 14 Mar 2015

👍3

All 12 comments

I just noticed this thread, I wonder if this might be the culprit: http://code.google.com/p/wkhtmltopdf/issues/detail?id=72&q=letter

dwickwire on 17 Aug 2012

There are a lot of things that can cause issues with text rendering and letter spacing. If you are using a binary, try to get one that was compiled against QT. If you compiled wkhtmltopdf yourself, make sure the system you compiled it on has a decent set of fonts installed and registered, or typefaces will just not look right.

Also, this bit of css can help, especially with copy/pasting having random extra spaces between some characters:

body { text-rendering: optimize-speed; }

unixmonkey on 23 Aug 2012

👎1

I found the same thing happen when I was printing my PDFs. I tried a few things first, like alter the DPI and use a custom font but none of that worked.

What did work was updating wkhtmltopdfto the latest version (0.12.2.1 at the time of writing) by using the edge binary gem:

gem 'wkhtmltopdf-binary-edge'

Hope this helps others.

joshuapinter on 14 Mar 2015

👍3

Thanks @joshuapinter that fixed it for me as well! Output looks so much better now.

ehutzelman on 23 Nov 2015

@ehutzelman :+1:

joshuapinter on 24 Nov 2015

@joshuapinter Ran across the same issue going through the README for the first time, and the same fix worked well.

Thanks for working on this fantastic library, it's working great!

aguynamedben on 26 Apr 2016

🎉1 👍1

Working with 0.12.3.2 but the issue persists @joshuapinter

suhailgupta03 on 14 Sep 2016

@suhailgupta03 Then you might have a different problem. If you find out what it is, make sure to post back here to help others.

joshuapinter on 14 Sep 2016

same problem here. using version 0.12.3 (with patched qt)

sharpdot on 6 Oct 2016

I also have issue with letter-spacing in pdf output.
wkhtmltopdf 0.12.3 (with patched qt)

vyagudin on 20 Oct 2016

Also have same problem in 0.12.4.. do anyone has a solution for this?

BDhara on 19 May 2017

I have the same problem with 0.12.3. It appears to be rounding whatever letter-spacing value I give to the nearest pixel, but I need a letter spacing to be -0.6px.