WickedPDF Rendering differently locally vs production

Question

I have installed wkhtmltopdf 0.12.3 (with patched qt) on my desktop machine and the exact same version on my Centos virtual machine.

I am using WickedPDF and Rails to convert HTML to PDF.

When the PDF is generated it has slight differences in the font. Some weird letter spacing. I have attached images showing this.

You can see the gap between the e and n this however is not present on my local machine. Image below:

Does anyone know why this would happen?

Any advice would be appreciated.

Thanks

This is the Ruby code which I am using to generate the PDF with WickedPDF

def generate_pdf
    pdf = WickedPdf.new

    pdf_file = pdf.pdf_from_string(ActionController::Base.new().render_to_string('card_requests/show.pdf.haml', layout: 'pdf', locals: {card_request: self}),
      dpi: '300',
      margin: {top: 0, bottom: 0, left: 0, right: 0},
      page_height: '2.25in',
      page_width: '3.75in',
      disable_smart_shrinking: false
    )

    tempfile = Tempfile.new(["#{self.name.gsub(' ', '_').downcase}_biz_card", '.pdf'], Rails.root.join('pdfs'))
    tempfile.binmode
    tempfile.write pdf_file
    tempfile.close

    self.pdf = File.open(tempfile.path)
    tempfile.unlink

    self.save

  end

Here is also the show.pdf.haml file with the CSS at the top:

!!! 5
%html
  %head
    :css
      html * {
        margin: 0 !important;
        padding: 0 !important;
        page-break-inside: avoid !important;
      }
      body {
        margin: 0 !important;
        padding: 0 !important;
        page-break-inside: avoid !important;
        text-rendering: optimize-speed;
      }
      .card-preview {
        font-family: 'TradeGothic';

        background-size: contain;
        width: 369px;
        height: 220px;
        page-break-after: avoid !important;
        position: relative;
      }

      #card-name {
        color: #ED1D27;
        font-weight: bold;
        font-size: 12pt;
        position: absolute;
        top: 37px;
        left: 39px;
        width: 328px;
      }

      #card-title {
        color: #2E2D2D;
        font-weight: bold;
        position: absolute;
        top: 54px;
        left: 39px;
        font-size: 9pt;
      }

      #card-office-phone {
        color: #4e4e48;
        position: absolute;
        top: 148px;
        left: 39px;
        font-size: 8.5pt;
      }

      #card-cell-phone {
        color: #4e4e48;
        position: absolute;
        top: 135px;
        left: 39px;
        font-size: 8pt;
        width: 200px;
      }

      #card-email {
        color: #4e4e48;
        position: absolute;
        top: 161px;
        left: 39px;
        font-size: 8.5pt;
      }

      #card-website {
        color: #4e4e48;
        position: absolute;
        top: 174px;
        left: 39px;
        font-size: 8pt;
      }
      .hide {
        display: none;
      }
    %meta{:charset => "utf-8"}
  %body
    .card-preview{style: "background-image: url('#{Rails.root.join('app', 'assets', 'images', 'card_template_2.svg')}')"}
      #card-name
        = card_request.name
      #card-title
        = card_request.title
      #card-office-phone{class: (card_request.office? ? "" : 'hide')}
        == office 555 555 5555 #{card_request.ext? ? "ext #{card_request.ext_phone}" : ''}
      #card-cell-phone{class: ((card_request.cell? && !card_request.cell_phone.blank?) ? "" : 'hide'), style: (card_request.office? ? "" : 'top: 148px; left: 39px;')}
        = (card_request.cell? ? "cell 555 555 5555" : '')
      #card-email
        = card_request.email
      #card-website
        www.website.com

I have since fixed this issue by following this:

https://taskman.eionet.europa.eu/issues/20890

It fixes kerning issue on CentOS for me.

As per the how to ask a question on Stackoverflow, please show the relevant code. — Mike 'Pomax' Kamermans
My local machine is Linux Mint. Do you think that would make a big difference? — Arthur
All of this is important information to put in the post. Especially if the OS are difference, the text shaper might be different, which would invalidate any and all assumptions around "the same fonts will look the same". — Mike 'Pomax' Kamermans
The link in the question requires login.Please link to something publicly accessible. — maurice

Jaswinder Jaswinder · Accepted Answer · 2018-09-28T11:44:55

I was facing a similar issue of spaces after certain specific letters like

Reg istration  ---> space after letter 'g'

O pen   ---> space after Capital letter 'O'

The above issue could be due to system specific fonts configs. I referred an issue reported over github for the same https://github.com/wkhtmltopdf/wkhtmltopdf/issues/45

This issue occurs on a production instance (AWS AMI linux) with CentOS 6.x but was working perfectly with ubuntu 14.04. I looked into the system fonts configs 51-local.conf over CentOS at path /etc/fonts/conf.d .If there is no file with name wkhtmltopdf at the same path then use the default fonts file 51-local.conf to have the below configuration as custom fonts.

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
 <match target="font">
  <edit mode="assign" name="rgba">
   <const>rgb</const>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="hinting">
   <bool>true</bool>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="hintstyle">
   <const>hintslight</const>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="antialias">
   <bool>true</bool>
  </edit>
 </match>
 <match target="font">
  <edit mode="assign" name="lcdfilter">
   <const>lcddefault</const>
  </edit>
 </match>
</fontconfig>

Also, If you are using wicked_pdf.rb initializer configuration exec path as /usr/local/bin/wkhtmltopdf for development environment. try to replace the path with /bin/wkhtmltopdf for production bundle

WickedPDF Rendering differently locally vs production

1 Answers