HTML to PDF with Wicked PDF and letter-spacing issues

Question

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:

<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>

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

I noticed there are a few bug reports on wkhtmltopdf about this which seem to be related. Could that be the culprit of this issue, what's an acceptable work-around?

I've tried different fonts but I really have to use Helvetica.

Any suggestions as to what do here or a plausible work around?

Answer 1

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; }

Answer 2

I had a similar problem, and I managed to solve it by changing the font-family with one imported from Google. More details and a possible solve can be found in this question. Shortly said, this was the code to solution the issue:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
    font-family: "Open Sans";
}