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.

Text layer is misaligned

See original GitHub issue

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 Mozilla Firefox

Description

The pdf renders correctly - both in react-pdf and also in the Fifrefox pdf viewer. However, the text layer is misaligned, as you can see here. The screenshot shows how the PDF is rendered ok, but the text layer is too far to the right, as shown by the highlighted text.

From playing around with it, it feels like the text layer is centred on page, whereas the canvas layer is aligned to the left.

The style applied to class="react-pdf__Page__textContent" (the text layer)`:

element {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 595.32px;
    height: 841.68px;
    color: transparent;
    transform: translate(-50%, -50%) rotate(0deg);
    pointer-events: none;
}

The styling for class="react-pdf__Page__canvasContent" (the canvas layer):

element {
    display: block;
    user-select: none;
    width: 595px;
    height: 841px;
}

Steps to reproduce

Steps to reproduce the behavior:

The minimal reproducible example: The html template:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Text search</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="app"></div>
    <script src={{ url_for('static', filename='dist/pdf.js') }} ></script>
  </body>
</html>

The React app:

import React, { Component} from "react";
import ReactDOM from "react-dom";

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

ReactDOM.render(
  <Document file='api/pdf'>
    <Page pageNumber={1} />
  </Document>,
  document.querySelector('#app'));

Environment

Browsers: Firefox 75, Chrome 81

Library versions: “react”: “^16.13.1”, “react-dom”: “^16.13.1”, “react-pdf”: “^4.1.0”

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:5 (2 by maintainers)

Top GitHub Comments

5reactions

jamesscottbrowncommented, Apr 30, 2020

As a temporary work-around, I seemed to get the correct alignment by adding extra CSS rules:

.react-pdf__Page__canvas {
   position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, 0%) !important;
}

.react-pdf__Page__textContent {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, 0%) !important;
}

0reactions

github-actions[bot]commented, Nov 22, 2021

This issue was closed because it has been stalled for 14 days with no activity.