Skip to content
This repository

PDF and HTML look different with Letter Spacing. #130

dwickwire opened this Issue August 17, 2012 · 2 comments

2 participants

Derek Wickwire David Jones
Derek Wickwire


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"
<html xmlns="" xml:lang="en" lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

     <div class="page-break fact-sheet">

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

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


Here is the code doing the rendering:

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

Here is the rendered HTML:

Here is the outputted PDF:
Any suggestions as to what do here?

Derek Wickwire

I just noticed this thread, I wonder if this might be the culprit:

David Jones

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; }
David Jones unixmonkey closed this October 03, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.