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: https://i.sstatic.net/I0cqO.jpg

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?

Killifish

I'm not sure if I should add this as an answer or a comment so here goes.. Have you tried using alternative aligning techniques like <td align="right" style="...">WINTER WRAP UP</td>? That does not fix the letter spacing but it might help with the overflow. Also, you could cheat if you control the source and don't care about searchability: <td><img src="/RMagick/spacing?phrase=WINTER%20WRAP%20UP" /></td>. – High

Actually, I think the float issue is a red harring, I should have disregarded that. The letter-spacing is an issue regardless of float assignment. – Killifish

I agree, my fist suggestion would not have helped with that but second one would have (Granted, it's much work and not without it's price to overcome a bug). – High

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

Anaxagoras

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

Manicurist