React-pdf: Annotations (links) not shifting with centered Document

[cpbennett4]

How do I shift the annotation layer with the actual text layer of the PDF?

Can I dynamically shift the link/annotations with the page which is centered dynamically using margin: 0 auto;?

I am trying to center the annotation layer over the canvas. As it is, I have set my canvas in the center with margin: 0 auto; and my links are all still in their original absolutely positioned place. I'm trying to achieve this to have my links actually be over the link text instead of significantly to the left of their appropriate text.

I've tried reaching into the annotations layer CSS at /node_modules/react-pdf/dist/Page/AnnotationLayer.css but I'm not entirely sure how to shift the entire layer; I seem to only be able to shift individual sections. Shifting individual sections won't work because I am doing my best to render the actual text layer using relative values (margin: 0 auto;) to support multiple viewports. Shifting the sections using top or left may work for one viewport but no others.

Environment:

• Browser: Chrome 68
• React-PDF version: 3.0.5
• React version: 16.4.2
• Webpack version: 4.16.4

[wojtekmaj]

If you're centering the page, what you should apply styles to is react-pdf__Page class. This is a wrapper that contains all the layers, so if you center this one, everything inside should be centered, including Annotation Layer.

AnnotationLayer.css file itself is Mozilla's code specific to how annotations should look like, not the layer that contains them, so you should forget about this file :)

[cpbennett4]

Thanks so much for your fast reply, wojtekmaj! I ended up getting it with your help, but I wasn't able to apply margin: 0 auto; to react-pdf__Page class; I'm currently trying to research what I may have done wrong. I tried setting the width of the class to 100% and 100vw in order for the auto margin to work but still no luck.

I ended up applying display: flex and justify-content: center to the react-pdf__Document class for a working solution.

Thanks again for your assistance!