Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

letter-spacing is too large with wkhtmltopdf

Tags:

wkhtmltopdf

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

like image 305
Paul Avatar asked Dec 12 '15 16:12

Paul


People also ask

How do you reduce kerning?

Alt-Left or Right Arrow Keys to Increase or decrease kerning on a Mac, and Option-Left or Right Arrow Keys to Increase or decrease kerning on a PC! To reset your kerning, Command Option Q on a Mac and Control Alt Q, on a PC and the numbers in the character panel will go back to zero.

What is the adjustment of spacing between individual letterforms?

Kerning is the spacing between individual letters or characters. Unlike tracking, which adjusts the amount of space between the letters of an entire word in equal increments, kerning is focused on how type looks — creating readable text that's visually pleasing.


2 Answers

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

like image 138
Aldarund Avatar answered Oct 09 '22 13:10

Aldarund


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.

like image 36
Tejas Tank Avatar answered Oct 09 '22 15:10

Tejas Tank