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?

[MartijnHols]

I am getting reports of this issue on Windows in Chrome (for one user experiencing it, it worked fine in Firefox), since we updated from 6.2.2 to 8.0.2 (with it pdfjs from 2.16.105 to 3.11.174). I've been unable to reproduce it on 4 different Windows devices (in addition to our Macs).

I figure it may be a bug with text rendering on a canvas, so I've focussed my debugging efforts on that. The PDF I am testing with (and which a user ran into the issue with) uses Helvetica without embedding it. I also tested the PDF by changing it to use a non-existent font and with an invalid encoding, and neither reproduced the issue.

While I think it's a bug in pdfjs, I fear reporting the issue there is pointless without first updating react-pdf's pdf.js dependency to the latest version (#1774).

[thosil]

Upgrading to 9.0.0 fixed the issue, just struggled a little bit after the upgrade because the worker has to be imported with extension .mjs and not .js (first lines in the upgrade guide, but who reads the doc 😅)

[DaveEvans-Thalamos]

We've been experiencing this. Some clues I've found:

• This has been reported on pdf-js here: PDF files are garbled when using Firefox built-in PDF viewer mozilla/pdf.js#17109
• FireFox received a similar report, because they use pdf-js internally to render PDFs. The most enlightening comment is this one: https://bugzilla.mozilla.org/show_bug.cgi?id=1854090#c30
• The fix made by the Firefox team is only inside Firefox, so doesn't benefit users of react-pdf or pdf-js: https://phabricator.services.mozilla.com/D191639

TLDR: It seems like an Adobe product is making temporary fonts on Windows for the purpose of a print job, and they're not always getting cleaned up. Those incomplete fonts then get used when rendering your PDF on screen.

I'm still trying to find a mitigation which will work in all of our environments, and will report back here is and when I find one.

[DaveEvans-Thalamos]

I managed to reproduce this on Windows.

1. Download the attachment Z@RD450.tmp from this Firefox bug report : https://bugzilla.mozilla.org/show_bug.cgi?id=1854090
2. That file is actually a TTF font file. Rename it to have a .ttf extension to make drag and drop work in step 3.
3. In Windows, go to "Settings / Personalisation / Fonts". There should be a drag and drop target at the top to add a new font. Drag your tff file there.
4. Close and re-open your browser to make sure it picks up the new font.
5. Trying to render your PDF should now show the garbled characters.
6. Remember to unregister this font when you're done.

I found a workaround which works for me, but YMMV. (I only view PDFs which I generated, so I know exactly what they will contain). pdf-js has a useSystemFonts setting, which defaults to true in most browsers. Setting it explicitly to false bypasses the code path which would resolve in this broken font.

You can pass this through in your react-pdf Document as follows:

import { Document } from "react-pdf";

const MyComponent = () => {
  // It is important to memoise the options to avoid unnecessary re-renders
  const options = useMemo( () => {
    return { useSystemFonts: false };
  }, []);

  return <Document 
    options={options}
    ...otherProps />;
}

[MartijnHols]

It seems useSystemFonts false is not recommended and I fear it will break more for my app which shows all kinds of user PDFs. I updated react-pdf to v9 and will check with users if this fixes the issue for them.

[jkgenser]

It seems useSystemFonts false is not recommended and I fear it will break more for my app which shows all kinds of user PDFs. I updated react-pdf to v9 and will check with users if this fixes the issue for them.

Hi 👋 - I am the one that posted the link you referend. Yes, the maintainer said useSystemFonts: false is not recommended. However, it's the only way I have found to reliably prevent this issue where the incorrect font is loaded from the system.

I've been running useSystemFonts: false in production for a number of months now and it seems to work OK with a variety of PDFs. You need to also supply a standard font url.

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.