Geek Answers Handbook

HTML to PDF with Wicked PDF and Letter Spacing Issues

Using 0.79 and 0.7.2, the generated PDF looks a little different than my original HTML. Adding the show_as_html flag presents it properly, however inline styles are handled in PDF differently than in HTML preview.

In particular, the problem that I encountered is related to declarations between letters, which also have a float that does not display correctly. So, for example, for a right floating-point element that has a letter spacing, the PDF will place the characters too far away from the center, so the text will partially go beyond the screen, and not move further to the left for the difference in the width of the letter spacing.

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 that performs 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 PDF output: http://imgur.com/sdUPM

I noticed that there are several error messages in wkhtmltopdf that seem to be related. Could this be the culprit of this problem, what is an acceptable workaround?

I tried different fonts, but I really need to use Helvetica.

Any suggestions on what they are doing here or likely to get around?

+5
source share
2 answers

There are many things that can cause problems with the rendering of text and the spacing between letters. If you are using a binary, try to get one that was compiled against QT. If you compiled wkhtmltopdf yourself, make sure that the system compiled on it has a decent set of fonts installed and registered, or the fonts just don't look right.

Also, this css bit can help, especially when copying / pasting with random extra spaces between some characters:

 body { text-rendering: optimize-speed; }
+2
source

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

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

More articles:


All Articles