comments on PDF files in landscape orientation are rotated and in wrong position

[yaofeng365]

There is a problem in pdf.js when displaying comments on documents in landscape orientation. The comment icon and popup text are shown as rotated 90 degree. Documents in portrait orientation don't have this problem.

Link to PDF file (or attach file here):
Please see the attached pdf_landscape_adobe.pdf
pdf_landscape_adobe.pdf

Configuration:

• Web browser and its version: Google Chrome Version 52.0.2743.116 m
• Operating system and its version: Windows 7 Professional Service Pack 1
• PDF.js version: 1.4.20
• Is an extension: No.

Steps to reproduce the problem:

1. Create a pdf document in landscape orientation
2. Added a comment and an annotation (for comparation purpose) with Adobe Reader. Both comment and annotation look good in Adobe Reader. See the attached pdf_landscape_adobe.pdf.
3. Go to pdf.js demo site http://mozilla.github.io/pdf.js/web/viewer.html and open the above pdf file.
4. You can see the annotation is displayed correctly, but the comment has problems.

• The icon is rotated 90 degree.
• The popup text (once you click on the icon) is rotated 90 degree.
• The popup text is not in the right position.

What is the expected behavior? (add screenshot)
The comment should be displayed correctly as annotation. See screenshot

pdf_landscape_expected.png.

What went wrong? (add screenshot)
The following problems were observed. See screenshot pdf_landscape_bug.png.

• The icon is rotated 90 degree.
• The popup text (once you click on the icon) is rotated 90 degree.
• The popup text is not in the right position.

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension):
http://mozilla.github.io/pdf.js/web/viewer.html

[timvandermeij]

Closing as incomplete because the requested information is not provided.

[yaofeng365]

Sorry for not providing requested information when I created this issue - I hit the wrong button. Anyway, I updated the issue with all the required information. Can you please take a look? Thanks.

[THausherr]

The annotation has the NoRotate flag set.

[timvandermeij]

I wonder why it's even rotated as the page itself is not rotated. Even if we would respect the NoRotate flag, how come it's rotated in the first place?

[THausherr]

The page is rotated:

[timvandermeij]

That probably explains the issue. Thanks for looking into this. This issue is about supporting the NoRotate flag then.

[yaofeng365]

Thanks for looking into it. Please let me know if you need anything from me.

[JanSlabon]

We also run into that issue. Attached an additional example file.

I guess it shouldn't be that hard to fix, because a simple matrix calculation depending on the rotation and NoRotate flag should be all. All you have to do is to rotate on the upper left corner.

I'm sorry for not offering a pull request but I simply have no deep knowledge in pdf.js.

[Mucaccino]

+1

[THausherr]

Another test file, I created it myself:
PDFBOX-4447-Annotations-NoRotate.pdf

[JosNun]

Are there any known workarounds for this?

[tuzz]

I was also running into this problem. Here's a JavaScript workaround I wrote to correct this problem:

// This patch rotates PDF.js hover annotations so that they always appear upright.
// It is a workaround for this issue: https://github.com/mozilla/pdf.js/issues/7631

const rotateAnnotations = () => {
  document.querySelectorAll("[data-annotation-id]").forEach((annotation) => {
    const popup = annotation.querySelector(".popupWrapper");
    if (!popup) { return; }

    const transform = annotation.style.transform;
    if (!transform) { return; }

    const parts = transform.split(/[(,]/);
    if (parts[0] !== "matrix" || parts.length !== 7) { return; }

    let rotation = 0;
    if (parts[1].trim().startsWith("-")) { rotation = 180; }
    if (parts[2].trim().startsWith("-")) { rotation = 270; }
    if (parts[3].trim().startsWith("-")) { rotation = 90; }

    popup.style.transform = `rotate(-${rotation}deg)`;
    popup.style.transformOrigin = "0";
  });
};

rotateAnnotations();
PDFViewerApplication.eventBus.on("annotationlayerrendered", rotateAnnotations);

I've tried to be defensive but it could break in the future if PDF.js starts using different class names in the DOM.

It won't rotate the speech bubble image inside the PDF itself, but it will rotate the text that appears on hover.

The final line ensures that pages loaded in dynamically after page load have the patch applied to them.