[Bug]: TextLayer not rendering properly

[big-yellow-duck]

Attach (recommended) or Link to PDF file

https://arxiv.org/pdf/2408.09869

Web browser and its version

Chrome Version 132.0.6834.110 (Official Build) (64-bit)

Operating system and its version

Debian 12.6

PDF.js version

v4.10.38

Is the bug present in the latest PDF.js version?

Yes

Is a browser extension

No

Steps to reproduce the problem

I'm Using pdfjs in svelte but I can't seem to get the text layer to render properly.

<script lang="ts">
    // import "pdfjs-viewer-element";
    import * as pdfjs from "pdfjs-dist";

    import "pdfjs-dist/web/pdf_viewer.css";
    import { onMount } from "svelte";
    

    let pdfCanvas: HTMLCanvasElement;
    pdfjs.GlobalWorkerOptions.workerSrc = "/pdfjs_4.0.189/build/pdf.worker.mjs";

    interface PdfPages {
        pageCanvas: HTMLCanvasElement;
    }
    const minScale = 1.0;
    const maxScale = 5;
    let scale = 1;
    let scaleRes = 1.5;

    let pdfPages: PdfPages[] = [];
    let pdfContainer: HTMLDivElement;
    let pdfRenderContext: CanvasRenderingContext2D;
    let doc: pdfjs.PDFDocumentProxy;
    let pageCount: number;
    let renderCanvasList: HTMLCanvasElement[] = $state([]);

    let textContainer: HTMLDivElement;
    
    async function renderPage(
        pageNumber: number,
        pageRenderElement: HTMLCanvasElement,
    ) {
        const page = await doc.getPage(pageNumber);
        let viewport = page.getViewport({ scale: scale });
        var outputScale = window.devicePixelRatio || 1;

        pdfRenderContext = pageRenderElement.getContext(
            "2d",
        ) as CanvasRenderingContext2D;

        // add canvas to parent container
        // pdfContainer.appendChild(pageRenderElement);

        pageRenderElement.width = Math.floor(viewport.width * outputScale);
        pageRenderElement.height = Math.floor(viewport.height * outputScale);
        pageRenderElement.style.height = Math.floor(viewport.width) + "px";
        pageRenderElement.style.height = Math.floor(viewport.height) + "px";

        let transform =
            outputScale !== 1
                ? [outputScale, 0, 0, outputScale, 0, 0]
                : undefined;
        await page.render({
            canvasContext: pdfRenderContext,
            transform: transform,
            viewport: viewport,
        });
        let textContent = await page.getTextContent();

        let textLayer = new pdfjs.TextLayer({
            container: textContainer,
            textContentSource: textContent,
            viewport: viewport,
        });
        textContainer.style.left = pageRenderElement.offsetLeft + "px";
        textContainer.style.top = pageRenderElement.offsetTop + "px";
        textContainer.style.height = pageRenderElement.offsetHeight + "px";
        textContainer.style.width = pageRenderElement.offsetWidth + "px";

        await textLayer.render();
       
        page.cleanup();
        console.log("rendered");
    }

    onMount(async () => {
        console.log("load doc");
        const loadPdfTask = pdfjs.getDocument(
            "https://arxiv.org/pdf/2408.09869",
        );
        doc = await loadPdfTask.promise;

        renderPage(1, pdfCanvas);
        // pdfjs.
    });
</script>

<div class="pdfContainer relative w-fit" bind:this={pdfContainer}>
    <canvas bind:this={pdfCanvas}></canvas>
    <div id="textLayer" class="textLayer" bind:this={textContainer}></div>
</div>

<style>
</style>

Here's the output when I select the text:

I cant find any docs related to the TextLayer API. Some fresh working example will help alot!

What is the expected behavior?

When viewing in firefox everything works perfectly.

What went wrong?

Trying to select text is painful

Link to a viewer

No response

Additional context

No response

[nulllfeng]

I encountered the same problem！
version: 5.1.91

[ylc395]

Here is my case

[VinayN03]

I got the same issue. In my case, I'm getting empty spaces along with normal words, when reading textContent. let textContent = await page.getTextContent();. After ignoring items with empty spaces, my issue is resolved.

[AswinDhurai01]

Solution

I encountered the same issue where the text layer was not aligned with the canvas layer.

A straightforward fix is to import the default PDF.js viewer stylesheet:

import 'pdfjs-dist/web/pdf_viewer.css'

This correctly aligns the text layer with the rendered canvas.

Potential Issue

Importing pdf_viewer.css globally may override your application's existing styles, as it contains additional viewer-related CSS.

Alternative Approach

To avoid global style conflicts, I extracted only the .textLayer related styles from pdf_viewer.css and included them locally in my pdf_preview component (the component responsible for rendering the PDF).

This keeps the text layer properly aligned while preventing the rest of the PDF.js viewer styles from affecting the application.

Hope this helps! 👍