Font Rendering Issue on Windows Systems

[AnejVovcak]

There's a font rendering issue with ngx-extended-pdf-viewer that occurs specifically on Windows systems while working correctly on Mac. On Windows, some text in PDFs appears to be incorrectly converted to sans-serif fonts and displays in a "scuffed" manner. Interestingly, the issue temporarily resolves itself when zooming in and out on the document, suggesting it's related to the rendering process.

Environment

• OS: Windows (multiple machines) - Issue occurs
• OS: macOS - No issue observed
• Angular Version:18
• ngx-extended-pdf-viewer Version: 23.0.0-alpha.4
• Browser: Chrome, Edge

Maybe people in this thread are experiencing the same issue.

[stephanrauh]

Version 23.0.0-alpha.4 was the version that updated to pdf.js 4.10. Does the issue also happen in version 23.0.0-alpha.3?

I'd also ask you to try to reproduce the issue on the showcase of the base library: https://mozilla.github.io/pdf.js/web/viewer.html. The "open file" hides coyly in the secondary menu.

Which font is your PDF file using? I suspect it's a latin font (as oppose to cyrillic etc)?

[AnejVovcak]

Thanks for the suggestions! Unfortunately, rolling back to version 23.0.0-alpha.3 doesn’t resolve the issue. However, it works fine with the underlying library directly (pdf.js).

Regarding the font, yes, I am using a Latin font in the PDF.

I'm trying to force a rerender of the component on load, but the code I’ve tried isn’t working as expected:

ngAfterViewInit() {
  this.pdfComponent.pdfLoaded.subscribe(() => {
    console.log(this.pdfComponent);
    setTimeout(() => {
      this.pdfComponent.zoom = 80;
      console.log('currentZoom', this.pdfComponent.zoom);
      setTimeout(() => {
        this.pdfComponent.zoom = 100;
        console.log('currentZoom', this.pdfComponent.zoom);
      }, 300);
    }, 0);
  });
}

Do you have any suggestions for how I can properly trigger a rerender at the beginning, or force a reload of the PDF viewer to resolve this issue?

Looking forward to your help!

[stephanrauh]

Weird. Your code should reliably re-render the pages.

To be honest, I'm clueless. Here's a wild shot: maybe the text layer is visible. Try deactivating it ([textLayer]="false"). You can also inspect the <canvas> in your browser's developer tool - that's basically examining the same thing. Maybe the canvas is rendered correctly, but it's overlaid by a text layer that's accidentally visible?

For background: the text layer is an invisible layer above the PDF file, which is rendered as a canvas. The text layer mimics the same page with the fonts available in the browser. It's almost always a few pixels off, and sometimes it's many pixels off. In most cases, it works good enough to allow users to select text. But if it becomes visible, it shows that it's not perfect. You can see the effect in my text layer demo (https://pdfviewer.net/extended-pdf-viewer/textlayer):