Embedded fonts don't reflect in the generated png in node example

[sayo96]

Attach (recommended) or Link to PDF file here:

There is no link to the pdf as i'm running an example located in pdf-dist repo. Example link : https://github.com/mozilla/pdf.js/tree/master/examples/node/pdf2png

Configuration:

• Web browser and its version: Chrome
• Operating system and its version: Macos
• PDF.js version: I could not fin the version as it is directly linked in the example
  

  pdf.js/examples/node/pdf2png/pdf2png.js

  Line 51 in 54ca67d

  var pdfjsLib = require("pdfjs-dist/es5/build/pdf.js");

• Is a browser extension: No

Steps to reproduce the problem:

1. Open node example located in https://github.com/mozilla/pdf.js/tree/master/examples/node/pdf2png

2. Install the dependencies and build the PDF.js library:
   npm install
gulp dist-install

   Install the Node canvas library and run the example to convert the first page of a PDF file to a PNG image:
   npm install canvas

cd examples/node/pdf2png
node pdf2png.js

What is the expected behavior? (add screenshot)

• I was expecting the fonts to be applied to text in output.png but it is only being applied to the sample text i added to the canvas context.
• For your reference the sample text is Everyone hates this font and it's in orange color. I have titled the output image so we could see this text and since it has a big font size only the word every is visble

What went wrong? (add screenshot)

1. I'm running the node example located in https://github.com/mozilla/pdf.js/tree/master/examples/node/pdf2png
2. I added a sample text to the canvas like context.fillText('Everyone hates this font :(', 250, 10) . The text within the output that gets generated (ie output.png) remains unaffected where the text i added which is in orange colour in context appears in the newly registered font.

Here is the whole code :

Canvas.registerFont(path.resolve('assets', 'fonts', 'Anton-Regular.ttf'), { family: 'Anton' });

    var canvas = Canvas.createCanvas(width, height);
    var context = canvas.getContext("2d");

    context.font = '200px "Anton"'
    context.rotate(0.2);
    context.fillStyle="orange";
    context.fillText('Everyone hates this font :(', 250, 10)

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension):

[Snuffleupagus]

Please note that the only embedded fonts that we support are fonts embedded in the PDF file itself, and nothing else here, hence this unfortunately doesn't seem like a valid issue.

Furthermore, given that this is library implements a PDF viewer (and not a PDF generator) we won't support modifying a PDF document with externally supplied fonts, but will rather always render the document as-is.

[sayo96]

@Snuffleupagus Thanks for the swift response. But if that is the case , all the pdfs must be generated properly.

My problem:

• I'm running the pdf-dist library in a node based env and i generate pdfs from the data Uri. In some cases i'm getting a blank pdf and in some case the generated pdf is messy as it is mentioned here (Error when loading PDF that uses system fonts #4244 (comment)) .

• I have tried using disableFontFace setting but it doesn't work very well when a pdf has a combo of many fonts as described in Embedded fonts don't reflect in the generated png in node example  #12697 (comment).

I feel this issue would be solved if you added support for all the fonts in the pdf-dist js library or provide an option through which users can set the font that must be used in the pdf creation process . Please let me know your thoughts on this and incase you have a work around please suggest it 🙏 .

[Snuffleupagus]

But if that is the case, all the pdfs must be generated properly.

Yes, and that's currently the only thing that we support.

I have tried using disableFontFace setting but it doesn't work very well when a pdf has a combo of many fonts

Yes, this is a known issue which is already tracked in #4244; hence this issue is a duplicate.

through which users can set the font that must be used in the pdf creation process .

Once more: We're not "creating" anything in this library, but only render what's already available in the PDF document itself.

[sayo96]

All i'm asking you is add support for all the standard fonts in your pdf-dist js library so we wont get blank pdfs or messy pdfs. I have seen a lot fo them requesting it so please do consider it.

Secondly even though it is tracked in #4244, there is not a proper solution for it there so i request you to keep this open until we have some solution for this

[Snuffleupagus]

All i'm asking you is add support for all the standard fonts in your pdf-dist js library [...]

Again, that's already being tracked elsewhere and simply repeating this (and opening duplicate issues) isn't really helpful in general.

[sayo96]

Again, that's already being tracked elsewhere and simply repeating this (and opening duplicate issues) isn't really helpful in general.

I get that buddy but don't you think it's simply because a lot of people run into this ? There is not a proper description in docs so no one knows what fonts are being supported way before hand.

It would be great if you specify the fonts that are a part of pdf-dist js library so that i can ensure the pdf file doesn't have any fonts apart from the ones you specify.

[timvandermeij]

Closing since this is in fact a duplicate of issue #4244 and maybe even issue #11637 which is tracking the standard fonts addition, so everything related to this issue is already tracked in there. To keep the discussions in one place, it's common to close duplicates.

In general fonts need to be embedded in the PDF file to ensure a consistent display across viewers and devices. If you don't do this you're taking a risk, and there is no guarantee at all that viewers will be able to display the PDF file properly.