utf8 support

[amarantedaniel]

Texts don't render correctly depending on what text you write.

doc.text('A • B', 20, 20)
doc.save()

renders þÿA " B

In the original version of jsPDF this is fixed. What are the plans on implementing that?

[HackbrettXXX]

Did you add a font supporting these utf8 characters?
If yes, could you give us a link to the respective issue/pull request?

[amarantedaniel]

I'm using the default font, but the same code works when using MrRio/jsPDF so I assumed it wasn't a font problem

[HackbrettXXX]

When I run the code with MrRio/jsPDF, it renders to A " B, which also not correct.

[KenjiTakahashi]

We're having similar problem over here. It happens with many characters, such as …, €, etc. When using default fonts, it renders þÿ (which is utf16 BOM "cast" to ansi). When using utf8 compatible font, the character gets stripped completely.
I'm trying to get to the bottom of this, please let me know if you have any insights!

[yGuy]

If you think this is a bug, please do provide ways to reproduce the bug.
Adding characters outside the ASCII range does not and cannot work with default fonts which only cover the ascii range.
Please see the custom font examples, which do work, as far as I can tell.

[KenjiTakahashi]

Alright, so I got around to it and indeed it is not jspdf problem, sorry!
It works fine when using Unicode aware font, but in our real code, jspdf is called by Highcharts and it is removing part of our custom font-family definitions when exporting to PDF (why? no idea).

Still, I have to say that the font situation here is complicated. I don't know if there's any improvement that can be made, though. Maybe even stating explicitly in the readme/docs that default fonts are not Unicode aware would be nice?

[Jollyfant]

@KenjiTakahashi - I'm facing a similar challenge with local exporting of Highcharts where I need unicode symbols.

I've converted a unicode aware font Lucida Sans Unicode font (named l_10646) using the jsPDF fontconverter and included it. Then, I modified the highcharts code to call: pdf.setFont("l_10646") before it calls win.svg2pdf.

But still the exported PDF shows garbled unicode characters. Can you share your approach and how you fixed it?

[HackbrettXXX]

Did you load the font file after jsPDF?

[Jollyfant]

Yep and when checking with e.g. pdf.__private__getFont("l_10646") it exists. So maybe there are some extra settings with Highcharts that need to be modified and @KenjiTakahashi may have the answer.

[HackbrettXXX]

Does it work if you manually add text to the pdf with this font?

[Jollyfant]

Yep, good idea and that works! The encoding is fine and the symbols are there. Highcharts makes a call to svg2pdf so perhaps the problem is there.

win.svg2pdf(svgElement, pdf, { removeInvalid: true });

[HackbrettXXX]

What does the SVG look like that's passed to svg2pdf? Does it use your custom font?

[KenjiTakahashi]

First thing I'd do is to use some pdf editor (I use masterpdfeditor) and check if the text is actually using your font. Like I mentioned, highcharts is doing funky stuff with font-family declarations, so if it is not being used, make sure you have only 1 entry in font-family for your svg element(s) and see if it helps.

[Jollyfant]

Thanks for the suggestions and after some hacking it works now. It may very well be a problem with highcharts: highcharts/highcharts#6417 (comment).

[kilianso]

Hey there! I have the same issue using your fork of jsPDF. The custom font is Inter-bold.ttf (converted using the official base64 tool) and loaded with an own script tag just below the CDN link of your library.

It is shown correctly in the browser but once you download the file as PDF and not open it in the browser, all glyphs are messed up.

I use it like this:

doc.setFont('Inter-Bold', 'bold');
doc.text(0, 0, 'Hello');

You can reproduce the issue here: betastage.netlify.app
And here's the corresponding repo: https://github.com/kilianso/betastage - All jsPDF related code can be found in public/index.html and src/App.svelte

[yGuy]

Actually looks pixel-perfect for me when viewing on Chrome/Edge - what PDF viewer are you using?

[kilianso]

Please read again. It is showing correctly in the browser but not in the actual PDF if you open it not in the browser. PDF viewer is the built in "Preview" app of MacOS.

By the way, adding the font like this:

doc.addFont('fonts/Inter-Bold.ttf', 'Inter-Bold', 'bold')

is not working either.

And i tried different other fonts. All with the same result.

[HackbrettXXX]

The PDF looks good to me, as well. It correctly contains the font and looks good in Chrome and in Adobe Reader. You probably ran into parallax#2743. Try to disable compression as a workaround.

[kilianso]

@HackbrettXXX Ahh nice! Indeed setting compression to false resolves the issue. Would be cool to mention this in the documentation. Thanks a lot.