The text layer is not rendered with same font weight and color

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 text layer over the canvas, I changed the opacity of being transparent to black color. I disabled the canvas layer being drawn. I can see the text layer now, but the font-weight and font color are not the same as pdf. I know that the text layer is rendered separately and doesn’t have to do anything with the canvas. So, I was wondering if we could somehow get these details for each textDiv created on the text layer? The font-weight and color should be the same at least.

Steps to reproduce Disable the canvas by adding the following lines in canvas.js.

CanvasRenderingContext2D.prototype.strokeText = () => {}; CanvasRenderingContext2D.prototype.fillText = () => {};

Additional _information

BEFORE

AFTER

Environment Chrome

[evaneaston]

What confused me most was that I was comparing to other libraries (react-pdf-viewer and the vanilla PDF.js web viewer) and they seemed to be rendering the text perfectly. But that wasn’t really the case. They had simply provided css rules to make the text layer span color transparent. I was able to get a lot closer with some css that forces the ::selection pseudo style to inherit color: transparent. Without this extra rule, my chrome was showing white text over the selection highlight.

.react-pdf__Page__textContent  {
  color: transparent;
  opacity: 0.5;
}
.react-pdf__Page__textContent ::selection {
  background: #0000ff;
}

It seems that this should be default behavior or documented in the FAQ on the wiki.

But what noticed was that PDF.js viewer and react-pdf-viewer and the PDF.js viewer seem to using the built in renderTextLayer function from pdf.js’s src/display/text_layer.js. And the highlight background for those seems to better fit the text vertically. It’s just a tiny bit higher and looks better, in my opinion. Screen captures are below.

I’m curious should you really be halving the translateY result your using in TextLayerItem.alignTextItem? When I make this change locally, all the highlights appear nice and centered around the text.

Library	Result
PDF.js web viewer
react-pdf-viewer
My CRA app using react-pdf

[evaneaston]

I added PR 697.