Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
BoazKG93 opened this issue Jun 10, 2020 · 8 comments
Closed

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

BoazKG93 opened this issue Jun 10, 2020 · 8 comments
Assignees
@wojtekmaj
Labels
bug Something isn't working

Comments

@BoazKG93
Copy link

BoazKG93 commented Jun 10, 2020 •
edited by wojtekmaj
Loading

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
@KostiantynPopovych
Copy link

KostiantynPopovych commented Jun 23, 2020 •
edited
Loading

I had the same issue, the problem was in global styles - font color replacement

@zachi
Copy link

zachi commented Jun 25, 2020

i have the same issue, @malachitetrip removing global styles didnt help.
would love some guidance

@wojtekmaj
Copy link
Owner

Could not reproduce when uploading this to my test suite, neither on Firefox nor Chrome. With what browser and React-PDF version are you able to reproduce that with?

@zachi
Copy link

zachi commented Jun 26, 2020 •
edited
Loading

im using '5.0.0-beta.4' version (in order to avoid a different issue), and it happens in all browsers.
in general the lines of code that deals with react-pdf are like this:


import { Document, Page, pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
const options = {
  cMapUrl: `//cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/cmaps/`,
  cMapPacked: true,
};

function DocumentViewer(props) {
  const { classes } = props;
  const [fileType, setFileType] = useState("");
  const [numPages, setNumPages] = useState(null);
  const [rotate, setRotate] = useState(0);
  const [translateY, setTranslateY] = useState(0);
  const loadingLabel = "נא להמתין...";

      <Document options={options} loading={loadingLabel} file={getDocumentUrl()} onLoadSuccess={onDocumentLoadSuccess}  >
        {Array.from(
          new Array(numPages),
          (el, index) => (
            <Page
              loading=""
              key={`page_${index + 1}`}
              pageNumber={index + 1}
            />
          ),
        )}
      </Document>

@wojtekmaj
Copy link
Owner

Doesn't seem to be the case... I tried reproducing this error, both on 4.1.0 stable and 5.0.0-beta.4 Dummy PDF file displays absolutely fine on Chrome and Firefox.

https://codesandbox.io/s/react-pdf-dummy-pdf-9q27q

Does anyone see the above link with PDF wrongly rendered? If so, please share your setup with me so I could reproduce and see where the issue is.

@wojtekmaj wojtekmaj added help wanted Extra attention is needed question Further information is requested labels Jul 7, 2020
@wojtekmaj wojtekmaj self-assigned this Jul 7, 2020
@zachi
Copy link

zachi commented Jul 9, 2020 •
edited
Loading

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

@wojtekmaj wojtekmaj changed the title PDF Text is shown incorrect PDF renders incorrectly if wrapped in an element with dir="rtl" Jul 9, 2020
@wojtekmaj
Copy link
Owner

👏 👏 👏 Amazing job!

"dir" can actually be set on per-element level, so it would be as easy as wrapping the document in <div dir="ltr" />, without changing the dir attribute on body.

Seems like this needs to be fixed on PDF.js end, though. I'll report it.

@wojtekmaj wojtekmaj mentioned this issue Jul 9, 2020
Closed
@wojtekmaj wojtekmaj added bug Something isn't working and removed help wanted Extra attention is needed question Further information is requested labels Jul 9, 2020
wojtekmaj added a commit that referenced this issue Jul 27, 2020
@wojtekmaj
Add dir="ltr" to canvas on which page is rendered
f84f75e 
Fixes #588

See also: mozilla/pdf.js#11457 (comment)
@wojtekmaj
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@wojtekmaj wojtekmaj

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@zachi @wojtekmaj @BoazKG93 @KostiantynPopovych