Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PDF renders incorrectly if wrapped in an element with dir="rtl"

See original GitHub issue

So I’m using this module in a fairly simple way as follows (my build is standard react-create-app):

import { Document, Page } from "react-pdf";
import { pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

<Document
  file={`${this.state.base64Url}`}
  options={{
    cMapUrl: `//cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/cmaps/`,
    cMapPacked: true
  }}
  onLoadError={(err: any) => {
    console.log(err);
  }}
>
  <Page pageNumber={1} />
</Document>

The PDF renders the text very weirdly like that:

I’m using the simple dummy pdf from: https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf

I can’t figure out what’s the problem. My base64 is ok and I doubled checked it online to see it renders correctly. No matter which PDF I try, I always get this.

I don’t have any errors on my console, other than this warning:

./node_modules/pdfjs-dist/build/pdf.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Issue Analytics

State:
Created 3 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

zachicommented, Jul 9, 2020

ok found it, seems like <body dir=“rtl” is causing the funky render. you can see the problem here: https://codesandbox.io/s/react-pdf-dummy-pdf-zwo0h?file=/index.html fixed it on my end, by removing ‘dir=“rtl”’ from the the document viewer (not necessary). @wojtekmaj i might consider fixing the package

0reactions

wojtekmajcommented, Jul 27, 2020

Note: This fix was cherry-picked to v4.2.0 release.