PDF and HTML look different with Letter Spacing. #130

Closed
dwickwire opened this Issue Aug 17, 2012 · 11 comments

Comments

Projects
None yet
9 participants

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?

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

Collaborator

unixmonkey commented Aug 23, 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 unixmonkey closed this Oct 3, 2013

Contributor

joshuapinter commented Mar 14, 2015

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.

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

Contributor

joshuapinter commented Nov 24, 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!

Working with 0.12.3.2 but the issue persists @joshuapinter

Contributor

joshuapinter commented Sep 14, 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.

sharpdot commented Oct 5, 2016

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

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

BDhara commented May 19, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment