9

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;

enter image description here

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

enter image description here

The spacing is very large for 1px...

I tried with 2 differents font-family

Paul
  • 1,290
  • 6
  • 24
  • 46

11 Answers11

5

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

Aldarund
  • 17,312
  • 5
  • 73
  • 104
5

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.

Tejas Tank
  • 1,100
  • 2
  • 16
  • 28
3

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

Daniel Facciabene
  • 103
  • 1
  • 7
  • 1
    I had found many suggested dpi 96, but in practicle it did not works. I had keep same issue. – Tejas Tank Sep 01 '17 at 14:41
  • Yeah I found many siggested dpi96, that's why I tried it in the first place and Ir worked for me. I presume you have some non-default configuration that makes it not work, you should try difrferent dpi values and see which one gets a better result, then keep approximating. Some value has to work for you too. – Daniel Facciabene Sep 04 '17 at 18:41
  • dpi 200 did the trick for me. setting that worked for me:`-T 0 -B 0 -L 0 -R 0 --disable-smart-shrinking --print-media-type --dpi 200 --page-size letter` – pangyuteng Aug 17 '18 at 17:21
3

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.

Gerardo Grignoli
  • 14,058
  • 7
  • 57
  • 68
2

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.

Max Vetriakov
  • 19
  • 1
  • 5
2

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/
Petran
  • 7,677
  • 22
  • 65
  • 104
2

in the CSS add the Following Code for Body 

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

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

Nikhilesh Manurkar
  • 65
  • 1
  • 7
2

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.

Marco Jansen
  • 61
  • 1
  • 5
1

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/"
onlyme
  • 3,776
  • 2
  • 23
  • 17
0

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.

cseelus
  • 1,447
  • 1
  • 20
  • 31
0

Using Google or another online font can be an option that can be tried. Like in the mentioned post it's been used to solve the same problem in Rotativa.

Rotativa Pdf generation does not respect HTML character spacing

Deep Panda
  • 88
  • 9