Skip to content
This repository has been archived by the owner on Aug 11, 2020. It is now read-only.

utf8 support #20

Open
amarantedaniel opened this issue Feb 27, 2019 · 19 comments
Open

utf8 support #20

amarantedaniel opened this issue Feb 27, 2019 · 19 comments
Labels
needs-info This issue is on hold, until more information becomes available.

Comments

@amarantedaniel
Copy link

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
Copy link
Member

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

@amarantedaniel
Copy link
Author

amarantedaniel commented Feb 27, 2019

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
Copy link
Member

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

@KenjiTakahashi
Copy link

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
Copy link
Member

yGuy commented Jan 7, 2020

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.

@yGuy yGuy added the needs-info This issue is on hold, until more information becomes available. label Jan 7, 2020
@KenjiTakahashi
Copy link

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
Copy link

@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
Copy link
Member

Did you load the font file after jsPDF?

@Jollyfant
Copy link

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
Copy link
Member

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

@Jollyfant
Copy link

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
Copy link
Member

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

@KenjiTakahashi
Copy link

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
Copy link

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
Copy link

kilianso commented Jul 27, 2020

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
Copy link
Member

yGuy commented Jul 27, 2020

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

@kilianso
Copy link

kilianso commented Jul 27, 2020

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
Copy link
Member

HackbrettXXX commented Jul 27, 2020

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
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs-info This issue is on hold, until more information becomes available.
Projects
None yet
Development

No branches or pull requests

6 participants