Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Font kerning issue when rendering to PDF on Ubuntu #11413

Closed
antonholmquist opened this issue Jun 17, 2013 · 14 comments
Closed

Font kerning issue when rendering to PDF on Ubuntu #11413

antonholmquist opened this issue Jun 17, 2013 · 14 comments
Labels

Comments

@antonholmquist
Copy link

@antonholmquist antonholmquist commented Jun 17, 2013

Setup:
Ubuntu 12.04 LTS
PhantomJS 1.9.1

It happens for all fonts with the same letters combinations rendering completely off. The fonts are Microsoft Core Fonts.

When I render to PNG it renders fine. Also when I run the same code on my Mac it renders fine.

I've tried modifying ~/.fonts.conf according to https://wiki.ubuntu.com/Fonts but it makes no difference.

screen shot 2013-06-17 at 9 33 42 pm

@antonholmquist

This comment has been minimized.

Copy link
Author

@antonholmquist antonholmquist commented Jun 17, 2013

I got the exakt same issue with wkhtmltopdf, so it's not related to PhantomJS.

@ariya

This comment has been minimized.

Copy link
Owner

@ariya ariya commented Jun 18, 2013

Looks like a bug or an issue with Qt's PDF engine. I wonder if there's an upstream bug regarding this.

@antonholmquist

This comment has been minimized.

Copy link
Author

@antonholmquist antonholmquist commented Jun 18, 2013

Actually, I do get correct results with wkhtmltopdf now but the problem persists on PhantomJS. Could it be related to the fact that wkhtmltopdf uses the X server while Phantom does not?

I provided some more information here:

http://unix.stackexchange.com/questions/79755/font-letter-spacing-issue-with-phantomjs-wkhtmltopdf-on-ubuntu?noredirect=1#comment117500_79755

@billschaller

This comment has been minimized.

Copy link
Contributor

@billschaller billschaller commented Jul 5, 2013

I have been able to solve this issue by supplying an OTF font replacement using a css @font-face query.

This DOES NOT WORK if it is in a linked stylesheet, or in a @media query within a style tag in the page body.

This only seems to work if the CSS is applied without any media query in a style tag in the page body.

Like so:

<style type="text/css">
    @font-face{
        font-family: "Helvetica Neue";
        src: url("css/arial-otf.ttf")
    }
</style>

I'm using bootstrap for a site I need to make PDFs from, and by overriding Bootstrap's default of "Helvetica Neue", I can ditch that font and replace it with the Windows system Arial font which I converted to OTF format. It is an otf font, even though it has the ttf extension -- that is just to get around IIS 7 not knowing what a .otf file is.

@bazitov

This comment has been minimized.

Copy link

@bazitov bazitov commented Mar 29, 2014

@zeroedin-bill your solution works like charm, but I can't get the bold font-weight working. I can get either everything in bold or regular.

@skyrocknroll

This comment has been minimized.

Copy link

@skyrocknroll skyrocknroll commented Sep 4, 2014

Keeping page.zoomFactor = 0.75; solved it for me..

@carlosacp

This comment has been minimized.

Copy link

@carlosacp carlosacp commented Jan 22, 2016

If some desperate with this problem reach this topic, I was using phantom-html2pdf on linux ubuntu and having this issue. Installing ttf-mscorefonts-installer and migrate to phantomjs 2.0 (https://github.com/Pyppe/phantomjs2.0-ubuntu14.04x64) solve the problem

@erikverheij

This comment has been minimized.

Copy link

@erikverheij erikverheij commented Feb 1, 2016

I had the same issue with phantomjs 2.1.1 and AWS Linux AMI (based on CentOS/RHEL).

This suggestion saved my life; wkhtmltopdf/wkhtmltopdf#45 (comment)

@moodysalem

This comment has been minimized.

Copy link

@moodysalem moodysalem commented Apr 29, 2016

@erikverheij I'm also having this issue
http://moodysalem.github.io/react-page-div/

When you click download PDF, the html of the page is pushed to a server and the server uses phantomjs 2.1.1 to render it.

When you print from the browser it seems to have different kerning than when the server renders to PDF

I tried adding the .conf file to the /etc/fonts/conf.d directory on the EC2 instance but it didn't seem to change anything. Also can't find much information about reloading those files but I did an fc-cache call after that. Every server request starts a new phantomjs process so I'm not sure what I'm doing differently

@isuvorov

This comment has been minimized.

Copy link

@isuvorov isuvorov commented Jul 20, 2016

I have the same issue
ubuntu, debian from docker image
phantomjs 1.9.2 & 2.1.1

fixed: apt-get install libfontconfig1

@abombelli

This comment has been minimized.

Copy link

@abombelli abombelli commented Aug 25, 2016

Has this been solved?
When generating a PDF with SVG fonts kerning is Ok. But the generated file is huge as each letter is vectorized.

@notatestuser

This comment has been minimized.

Copy link

@notatestuser notatestuser commented Dec 7, 2016

@abombelli Not to mention the viewer is unable to select any text! That fixed my kerning issue though.

@olegsfinest

This comment has been minimized.

Copy link

@olegsfinest olegsfinest commented Mar 8, 2017

I had the same issues and I tend not to believe it but @billschaller 's comment solved it indeed. But I have the same problem like @bazitov, it does not work for several font-faces (for bold, italic etc). Has anyone come to a solution?

@stale stale bot added the stale label Dec 25, 2019
@stale

This comment has been minimized.

Copy link

@stale stale bot commented Dec 28, 2019

Due to our very limited maintenance capacity (see #14541 for more details), we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed. In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!

@stale stale bot closed this Dec 28, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.