CODEWITHSUNDEEP
htmlpdfunicodepdf-generationwkhtmltopdf
Michiel Borkent
Michiel Borkent

Reputation: 34870

Smiley emoticon showed as weird character in PDF made with wkhtmltopdf

I'm trying to convert the following HTML to a PDF using wkhtmltopdf, version 0.12.2.1 (with patched qt):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
&#x1f60b;
</body>

</html>

The HTML contains the hex character 😋 which shows up fine in the HTML as an emoticon, but in my PDF it looks like this:

pdf hex character

Why is it displayed like that and how can I fix this?

The command I'm using is:

wkhtmltopdf /tmp/test.html /tmp/foo.pdf

Upvotes: 2

Views: 4631

Answers (1)

Steve Bauman
Steve Bauman

Reputation: 8688

For someone encountering this now, I'm using the Windows binary 0.12.2.3 (on Windows 10 1809) and managed to get wkhtmltopdf rendering emoticons by setting the font family to a local Windows font-family that recognizes fonts:

For a quick test, insert this into HTML page and regenerate your PDF:

<style>
    body {
        font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji",
            Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif,
            LastResort;
        }
</style>

You should see your emojis being rendered now, but you will likely have to tailor the above CSS to your own app.

To know which font family to use, I went to Full Emoji List here: https://unicode.org/emoji/charts/full-emoji-list.html

Then I right clicked an emoji that was being natively rendered by Chrome and copied the font family.

Upvotes: 2

Related Questions