[Bug]: Text Selection Appears to Still be Somewhat Broken? #19528

wuxialearn · 2025-02-21T02:17:32Z

wuxialearn
Feb 21, 2025

Attach (recommended) or Link to PDF file

http://cslabcms.nju.edu.cn/problem_solving/images/9/9a/Go_To_Statement_Considered_Harmful.pdf (or any PDF with text)

Web browser and its version

Firefox 135

Operating system and its version

Windows

PDF.js version

4.10.38

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

Yes

Is a browser extension

No

Steps to reproduce the problem

Select text
Drag selection out of text layer, observe that the selected text changes from expected selection to all text above that selection.

I see text selection flickering was fixed in #17923 (see also #9843). On version v4.10.38 I'm still seeing this issue on Firefox:

Here's the code I'm using (full example):

CLICK code

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!-- Updated CDN links for pdf.js version 4.10.38 -->
    <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.10.38/pdf.min.mjs"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.10.38/pdf_viewer.min.css" />

    <style type="text/css">
        #upload-button {
            width: 150px;
            display: block;
            margin: 20px auto;
        }

        #file-to-upload {
            display: none;
        }

        #pdf-main-container {
            width: 400px;
            margin: 20px auto;
        }

        #pdf-loader {
            display: none;
            text-align: center;
            color: #999999;
            font-size: 13px;
            line-height: 100px;
            height: 100px;
        }

        #pdf-contents {
            display: none;
        }

        #pdf-meta {
            overflow: hidden;
            margin: 0 0 20px 0;
            display: none; /* Initially hide, not needed for all-pages view */
        }

        #pdf-buttons {
            float: left;
        }

        #page-count-container {
            float: right;
        }

        #pdf-current-page {
            display: inline;
        }

        #pdf-total-pages {
            display: inline;
        }

        /* Style for the container holding all pages */
        #pdf-canvas-container {
            display: flex;
            flex-direction: column;
            align-items: center; /* Center canvases horizontally */
        }

        .pdf-canvas-wrapper { /* NEW: Wrapper div */
            position: relative; /*  Important for absolute positioning of text layer */
            margin-bottom: 10px; /* Space between pages */
        }

        .pdf-canvas {
            border: 1px solid rgba(0, 0, 0, 0.2);
            box-sizing: border-box;
            display: block; /* Important: Make canvas a block element */
        }


        /* Style for individual text layers */
        .textLayer {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            opacity: 0.2;
            line-height: 1.0;
            pointer-events: auto; /* CRITICAL: Enable text selection */
        }
		
		.textLayer ::selection {
			background: rgba(0, 0, 255, 0.6); /* Increased opacity to 0.6 */
		}


        #page-loader {
            height: 100px;
            line-height: 100px;
            text-align: center;
            display: none;
            color: #999999;
            font-size: 13px;
        }
    </style>
</head>

<body>

    <button id="upload-button">Select PDF</button>
    <input type="file" id="file-to-upload" accept="application/pdf" />

    <div id="pdf-main-container">
        <div id="pdf-loader">Loading document ...</div>
        <div id="pdf-contents">
            <div id="pdf-meta">
                <div id="pdf-buttons">
                    <button id="pdf-prev">Previous</button>
                    <button id="pdf-next">Next</button>
                </div>
                <div id="page-count-container">Page
                    <div id="pdf-current-page"></div> of
                    <div id="pdf-total-pages"></div>
                </div>
            </div>
            <!-- Container for all the canvases -->
            <div id="pdf-canvas-container"></div>
            <div id="page-loader">Loading pages ...</div>
        </div>
    </div>

    <script type="module">
        // Import pdfjsLib and TextLayer using ES modules
        import * as pdfjsLib from "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.10.38/pdf.min.mjs";
        import { TextLayer } from "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.10.38/pdf.min.mjs";

        // Set the worker source
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.10.38/pdf.worker.min.mjs';


        var __PDF_DOC,
            __TOTAL_PAGES;


        function showPDF(pdf_url) {
            $("#pdf-loader").show();
            $("#pdf-contents").hide(); //Hide initially to prevent flickering

            pdfjsLib.getDocument({ url: pdf_url }).promise.then(function (pdf_doc) {
                __PDF_DOC = pdf_doc;
                __TOTAL_PAGES = __PDF_DOC.numPages;

                // Hide the pdf loader and show pdf container
                $("#pdf-loader").hide();
                $("#pdf-contents").show();
                $("#pdf-total-pages").text(__TOTAL_PAGES);
                $("#page-loader").show();  //Show page loader

                // Show all pages
                showAllPages();

            }).catch(function (error) {
                $("#pdf-loader").hide();
                $("#upload-button").show();
                alert(error.message);
            });
        }


        function showAllPages() {
            const container = document.getElementById('pdf-canvas-container');
            container.innerHTML = ''; // Clear any previous content

            const promises = []; // Store promises for each page render

            for (let pageNumber = 1; pageNumber <= __TOTAL_PAGES; pageNumber++) {
                promises.push(renderPage(pageNumber, container));
            }

            // Wait for all pages to render before hiding the loader
            Promise.all(promises).then(() => {
                $("#page-loader").hide();
            });
        }

        async function renderPage(pageNumber, container) {
            const page = await __PDF_DOC.getPage(pageNumber);

            // Create a wrapper div for the canvas and text layer
            const wrapperDiv = document.createElement('div');
            wrapperDiv.className = 'pdf-canvas-wrapper';
            container.appendChild(wrapperDiv);


            // Prepare canvas element
            let canvas = document.createElement('canvas');
            canvas.className = 'pdf-canvas';
            canvas.width = 400; // Set initial width
            let context = canvas.getContext('2d');
            wrapperDiv.appendChild(canvas); // Append canvas to wrapper

            // Calculate viewport and scale
            let viewport = page.getViewport({ scale: 1 });
            let scale = canvas.width / viewport.width;
            let scaledViewport = page.getViewport({ scale: scale });
            canvas.height = scaledViewport.height;

            let renderContext = {
                canvasContext: context,
                viewport: scaledViewport
            };

            // Render the page contents in the canvas
            await page.render(renderContext).promise;

            // Text layer setup
            const textContent = await page.getTextContent();
            let textLayerDiv = document.createElement('div');
            textLayerDiv.className = 'textLayer';
            textLayerDiv.style.width = scaledViewport.width + 'px';
            textLayerDiv.style.height = scaledViewport.height + 'px';
           textLayerDiv.style.setProperty('--scale-factor', scale);
            wrapperDiv.appendChild(textLayerDiv); // Append text layer to wrapper *after* canvas


            const textLayer = new TextLayer({
                textContentSource: textContent,
                container: textLayerDiv,
                viewport: scaledViewport,
            });
            textLayer.render();
            return;
        }


        // Event listeners (same as before)
        $("#upload-button").on('click', function () {
            $("#file-to-upload").trigger('click');
        });

        $("#file-to-upload").on('change', function () {
            if (['application/pdf'].indexOf($("#file-to-upload").get(0).files[0].type) == -1) {
                alert('Error : Not a PDF');
                return;
            }
            $("#upload-button").hide();
            showPDF(URL.createObjectURL($("#file-to-upload").get(0).files[0]));
        });

    </script>

</body>

</html>

This is based on Peter Murwa's article just ported to the new text layer API. The built in Firefox pdfjs viewer works much better in this regard, so I think I may just be missing something.

What is the expected behavior?

Videos:

My code:

Screen.Recording.2025-02-20.212127.mp4

Firefox built in viewer:

Screen.Recording.2025-02-20.212208.mp4

What went wrong?

I hope it's clear how they are behaving differently. In my code when you go off a selection it selects the entire previous section of the page. In the built in version it maintains the current selection. I'd like to know how to achieve that behavior. The issue is worse when you have multiple single line paragraphs, where each time you move to a new paragraph in the selection it flickers between selecting normally and selecting the previous sections. I can give a better example if it isn't so visible with this PDF

Link to a viewer

No response

Additional context

No response

nicolo-ribaudo · 2025-02-21T18:09:29Z

nicolo-ribaudo
Feb 21, 2025

I suggest trying to put some breakpoints in the event listeners in

pdf.js/web/text_layer_builder.js

Line 191 in e3ea926

static #enableGlobalSelectionListener() {

, to figure out what the difference is.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: Text Selection Appears to Still be Somewhat Broken? #19528

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

[Bug]: Text Selection Appears to Still be Somewhat Broken? #19528

wuxialearn Feb 21, 2025

Attach (recommended) or Link to PDF file

Web browser and its version

Operating system and its version

PDF.js version

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

Is a browser extension

Steps to reproduce the problem

What is the expected behavior?

What went wrong?

Link to a viewer

Additional context

Replies: 1 comment

nicolo-ribaudo Feb 21, 2025

wuxialearn
Feb 21, 2025

nicolo-ribaudo
Feb 21, 2025