Garbled Text Output When Rendering PDF

[constyn]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

When attempting to render a PDF, the text within the PDF is displayed as garbled and unreadable characters.

Steps to reproduce

Load a PDF file through React-PDF
Observe the rendered output on the screen.

Expected behavior

The PDF should be rendered with clear, readable text, displaying the content as intended.

Actual behavior

The text in the rendered PDF is garbled with characters and symbols that do not represent the actual content of the document.

Additional information

• If the PDF is opened on the same system it is rendered ok
• It's occurring on the client's machine (which is a newer Dell model probably integrated graphics card)

Environment

• Browser Edge latest:
• OS Windows 11:
• React-PDF 7.6.0:
• React 18.2.0:
• vite 5.0.7:

[IzabellaRegate]

Bump, it is happening quite often for clients, we tried to reproduce among devs, but no luck so far.

May it be connected to:

https://github.com/wojtekmaj/react-pdf/releases/tag/v7.4.0
Font conversion and substitution improvements

?

PS i found same issue that was closed before : #1010

[wojtekmaj]

I don't think that's the same issue though. In #1010 you could see that the text React-PDF was trying to render is more or less accurate, while OP's screenshot shows every single character being wrong.

I think client's graphics card is the key to reproducing this issue.

[IzabellaRegate]

[for my customers it is happening for either whole page or some texts]

I have small update on this topic.
We did debugging session with affected customer and it seems issue is connected with text layer, grabled text is displayed properly while selecting it 🤔 (+ when opening with native browser pdf viewer it works well)
We tried as well disabling hardware acceleration - did not help

Hardware - specification
Nom de l'appareil AMI-LT314
Processeur 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz 2.80 GHz
Mémoire RAM installée 16,0 Go (15,7 Go utilisable)
Système d’exploitation 64 bits, processeur x64

Font descriptors for pdf with garbled text

<<
/Type /FontDescriptor
/Ascent 891
/CapHeight 500
/Descent -216
/Flags 5
/FontBBox 28 0 R
/FontName 25 0 R
/ItalicAngle 0.000
/StemV 0
/StemH 0
/AvgWidth 401
/FontFile2 29 0 R
/Leading 0
/MaxWidth 2614
/MissingWidth 401
/XHeight 0

<<
/Type /Font
/Subtype /TrueType
/Name /9
/BaseFont 25 0 R
/FirstChar 33
/LastChar 105
/Widths 24 0 R
/FontDescriptor 27 0 R
/ToUnicode 26 0 R

(only thing i could notice is that name looks odd)

[thordurhhh]

I am facing the same issue. There are a few users that have complained about this, I was sent a screenshot from a Chrome user with similar looking PDF to the one provided by @constyn

But I am unable to reproduce the issue myself. Does anyone have a way of reproducing this?

React-PDF 7.5.0
React 18.2.0

[DonatienBdR]

We were facing the same issue with a PDF we generated ourselves (in a dedicated backend service). It also only happened for a few specific clients.
The solution/workaround we found is to embed the non-standard font we used when generating the PDF. We learned on the way that it's actually highly recommended to do so.
We also found this comment from the pdfjs library (among others) stating:

Please note that the only way to guarantee that it works correctly is by embedding all fonts in the PDF document.

So, the root cause is likely related to the use of non-embedded custom fonts in the PDF, and the client's system fonts (which would explain why it is difficult to reproduce this issue).

I doubt react-pdf can do anything about this issue. Maybe pdfjs could, but it seems difficult nonetheless.

[sunilcygnet]

Hello Team,

I got the solution this problem while using below code line.
You can alternatively disable the textlayer prop in the component by setting it to false although I wouldn't recommend that.

Hope it might help many as they are suffering in production issue.
Regards & empathy,
Sunil Rana

[TangMichael]

Facing the same issue here. This is new and only happens for windows users however not every user encounters this issue. Fonts used for the pdf is helvetica.

It's hard for to test because I cannot reproduce the issue. It makes me think it has to be something specific to the fonts on the user's computer possibly.

React-pdf v7.1

Anyone has any ideas?