letter-spacing is too large with wkhtmltopdf

Question

I'm using wkhtmltopdf to download a webpage as pdf.

But the css property letter-spacing seems doesn't work

font-size:20px; letter-spacing:0px;

font-size:20px; letter-spacing:1px;

The spacing is very large for 1px...

I tried with 2 differents font-family

Answer 1

Its a known issue. https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1575 . No fix for it. Only to avoid using letter-spacing

Answer 2

Issue every one face with letter spacing, perfect solution is here.

import pdfkit
#SnippetBucket.com code for pdfkit
path_wkthmltopdf = r'/var/www/aukcnydom/wkhtmltox/bin/wkhtmltopdf'
config = pdfkit.configuration(wkhtmltopdf=path_wkthmltopdf)
#more better and more accurate code for DPI set
config.default_options = {
        'page_size': 'A4',
        'print_media_type': True,
        'dpi': 96
    }
pdfkit.from_string(mark_safe(unicode(self.document)),settings.MEDIA_ROOT +"/"+ path, options=options, css=style,  configuration=config)

Than in css. Add your letter-spacing.

p{letter-spacing: 0.4mm !important; text-align: justify ; font-kerning: normal; text-rendering: optimize-speed;}
/* SNIPPETBUCKET.COM, CSS CODE WITH LETTER SPACING */

This way simply resolve your issue and work perfectly letter spacing.

Note: I had given sample, you may apply applicable changes with your code.

Answer 3

I had the same problem, I set the dpi to 96 (in wkhtmltopdf options) and worked, not sure why though.

Answer 4

letter-spacing is broken in wkhtmltopdf.
But i found other ways around for kerning:

1. You may set position for every letter. Kerning is used for headings so there are not so much letters usually.

2. You may alter the font file and set the custom kerning you want. Usually it would be enough to alter latin letters. I've tested this and it worked well. Used FontForge (http://fontforge.github.io/) for this. But may be there is a more convenient software.

Answer 5

I had the same issue and I have solved it by

sudo wget http://pastebin.com/raw.php?i=AmfYN3er -O /etc/fonts/conf.d/10-wkhtmltopdf.conf

http://www.jeremydaly.com/how-to-install-wkhtmltopdf-on-amazon-linux/

Answer 6

Using wkhtmltopdf 0.12.4 or 0.12.5 on Windows you can use --dpi 300 on the wkhtmltopdf command line, to almost solve the issue. If you zoom a lot you may still notice some letters have negligible differences in spacing, but the letters no longer overlap. And with --dpi 600 makes it almost perfect. The rendered pdf file size was not increased in my scenarios.

Answer 7

I had the same issue. I had to add the flage --disable-smart-shrinking and then played with dpi by increasing and decreasing progressively.

    wkhtmltopdf --page-size A4 --print-media-type --lowquality --disable-smart-shrinking --encoding UTF-8 --no-outline --image-quality 100 --javascript-delay 3000 --orientation Portrait --dpi 65 --margin-top 0in --margin-right 0in --margin-bottom 0in --margin-left 0in "http://localhost:3000/wa/reports/"

Answer 8

in the CSS add the Following Code for Body

body {
font-kerning: normal;
text-rendering: optimizeLegibility;
}

and the --dpi 200. This Worked for Me.

Answer 9

We faced the same problem. One workaround is to set the dpi flag to 96.

As setting the DPI to such a low value (print usually uses at least 300) resulted in blurry images, we tried to use SVG font files, which did the trick.

Answer 10

There's a miscalculation on wkhtmltopdf's side regarding letter-spacing. I managed to pin it down for 100+ dpi results to being exactly that multiple, considering the dpi as a 'percentage'. In other words:

• If you render with --dpi 500; make sure to divide your letter-spacing by 5
• If you render with --dpi 300; make sure to divide your letter-spacing by 3
• etc

You could go with all the --dpi 92 options, but then you get issues with bad kerning and blurry images and you get to go work around all that stuff again.

In my solution I got a regex replace going on which recalculates any such found letter-spacings in the html string just before handing it over to wkhtmltopdf.