Style for textlayer in pdfjs

Question

I'm working around with pdfjs library and facing this problem when rendering the textlayer. The text in the textlayer isn't the same with the content in the canvas. How can I solve this? I saw there is textDiv and textDivProperties in the textlayer render parameters, are they playing some role in this case?

this is my code

// elements code
              const canvasElement = document.createElement("canvas")
              const textLayer = document.createElement("div");
              textLayer.id = `textlayer-${index}`;
              textLayer.style.position = "absolute";
              const canvasWrapper = document.createElement("div")
              canvasWrapper.style.width = "800px"
              canvasWrapper.appendChild(canvasElement)
              canvasWrapper.appendChild(textLayer)
              canvasWrapper.id = `page-${index}`
              canvasWrapper.style.marginTop = "2px";
              canvasWrapper.style.marginBottom = "2px";
              container.appendChild(canvasWrapper);


// render code
                 const renderContext = {
                    canvasContext: canvas.getContext('2d'),
                    viewport: viewport,
                    annotationMode: AnnotationMode.ENABLE_FORMS,
                    annotationCanvasMap: annotationCanvasMap
                  };
        
                  page.render(renderContext as RenderParameters).promise.then(() => {
                    return page.getTextContent({includeMarkedContent: true, disableNormalization: true});
                  }).then((textContent) => {
                    const textLayer = document.getElementById(`textlayer-${index}`);
                    if(textLayer == null) return;
                    textLayer.style.left = canvas.offsetLeft + 'px';
                    textLayer.style.top = canvas.offsetTop + 'px';
                    textLayer.style.height = canvas.offsetHeight + 'px';
                    textLayer.style.width = canvas.offsetWidth + 'px';
                    
                    pdfjs.renderTextLayer({
                      textContentSource: textContent,
                      textContent: textContent,
                      container: textLayer!,
                      viewport: viewport,
                      textDivs: []
                    } as TextLayerRenderParameters);
                  });
                   if(isGettingURL == true) {
                    updateIsGetting(false);
                  }

Answer 1

Had encountered this recently, turns out you only need to give your textlayer element a class name .textLayer then import pdf_viewer.css from pdfjs-dist/web/

Import CSS (I used SCSS here)

<style lang="scss">
@use "pdfjs-dist/web/pdf_viewer.css"
...
</style>

Then add classname

// Element Code
        const textLayer = document.createElement("div");
        textLayer.id = `textlayer-${index}`;
        textLayer.classList.add("textLayer")

Here's an extract of the styles used:

.textLayer{
  position:absolute;
  text-align:initial;
  inset:0;
  overflow:hidden;
  opacity:0.25;
  line-height:1;
  -webkit-text-size-adjust:none;
     -moz-text-size-adjust:none;
          text-size-adjust:none;
  forced-color-adjust:none;
  transform-origin:0 0;
  z-index:2;
}

.textLayer :is(span, br){
    color:transparent;
    position:absolute;
    white-space:pre;
    cursor:text;
    transform-origin:0% 0%;
  }

.textLayer span.markedContent{
    top:0;
    height:0;
  }

.textLayer .highlight{
    --highlight-bg-color:rgb(180 0 170);
    --highlight-selected-bg-color:rgb(0 100 0);

    margin:-1px;
    padding:1px;
    background-color:var(--highlight-bg-color);
    border-radius:4px;
  }

@media screen and (forced-colors: active){

.textLayer .highlight{
      --highlight-bg-color:Highlight;
      --highlight-selected-bg-color:ButtonText;
  }
    }

.textLayer .highlight.appended{
      position:initial;
    }

.textLayer .highlight.begin{
      border-radius:4px 0 0 4px;
    }

.textLayer .highlight.end{
      border-radius:0 4px 4px 0;
    }

.textLayer .highlight.middle{
      border-radius:0;
    }

.textLayer .highlight.selected{
      background-color:var(--highlight-selected-bg-color);
    }

.textLayer ::-moz-selection{
    background:blue;
    background:AccentColor;
  }

.textLayer ::selection{
    background:blue;
    background:AccentColor;
  }

.textLayer br::-moz-selection{
    background:transparent;
  }

.textLayer br::selection{
    background:transparent;
  }

.textLayer .endOfContent{
    display:block;
    position:absolute;
    inset:100% 0 0;
    z-index:-1;
    cursor:default;
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;
  }

.textLayer .endOfContent.active{
      top:0;
    }

Note that the pdf_viewer.css also contains styles for annotation and xfa Layers