I'm using pdf.js with text selection.

So pdf.js creates a bunch of absolute positioned divs containing the various text from the pdf to supply text selection.

While dragging to select the text, the selection jumps to selecting everything to the top of the text, if you continue your selection into areas that are not text (like areas between paragraphs).

If you go to their example you can see what I'm describing. Try selecting text over several paragraphs in the left column and you'll see the selection "flicker" to selecting everything to top. .js/web/viewer.html

Any ideas on how to prevent this from happening? It is very distracting.

I think it has something to do with all of the divs holding the text being absolute.

I'm using pdf.js with text selection.

So pdf.js creates a bunch of absolute positioned divs containing the various text from the pdf to supply text selection.

While dragging to select the text, the selection jumps to selecting everything to the top of the text, if you continue your selection into areas that are not text (like areas between paragraphs).

If you go to their example you can see what I'm describing. Try selecting text over several paragraphs in the left column and you'll see the selection "flicker" to selecting everything to top. http://mozilla.github.io/pdf.js/web/viewer.html

Any ideas on how to prevent this from happening? It is very distracting.

I think it has something to do with all of the divs holding the text being absolute.

• javascript
• pdf
• pdf.js

Share Improve this question Follow asked Apr 5, 2014 at 0:37 B. Adam RussellB. Adam Russell 10155 bronze badges 4

• Hey! I'm looking for a similar fix to PDF.js. Were you ever able to find something to improve this selection issue? Crocodoc handles this by wrapping grouped text in a div and generally works well, but I haven't seen an implementation of this for PDF.js (just a lot of talk about it). Thanks! – trnelson Commented Jun 10, 2014 at 3:18
• i also going through similar issue .Any resolutions ? – ramoh Commented Jun 13, 2014 at 10:17
• sorry for the late response. It's kind of lame, but what I ended up doing was creating empty divs between large gaps of text. This way, the selection is usually over some absolutely positioned div. It seems to work reasonably well. – B. Adam Russell Commented Jun 29, 2014 at 20:11
• see also github./mozilla/pdf.js/pull/6663 – async5 Commented Jan 29, 2018 at 20:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

Fixed: just add height:200px to

.textLayer > div {height:200px;}

in viewer.css

This is a bit old but still might be useful for some people. Setting textLayerMode to 2 should fix that issue.

Example:

new PDFViewer({ ...otherProps, textLayerMode: 2 })

In the pdf.js file, search for function appendText and add

textDiv.className = "hitext";

below

var textDiv = document.createElement('div');

Now add this to your custom js file:

window.addEventListener('mousedown', function mouseup(evt) {

if($(".hitext:hover").length==0) //To check if the cursor is hovering over the text
{
  //Selection is disabled using CSS if the mousedown event was triggered when the cursor was not over the text
  $(".hitext").css({"-webkit-touch-callout": "none", "-webkit-user-select": "none", "-khtml-user-select": "none", "-moz-user-select": "none", "-ms-user-select": "none", "user-select": "none"}); 
}
else 
{
  $(".hitext").css({"-webkit-touch-callout": "text", "-webkit-user-select": "text", "-khtml-user-select": "text", "-moz-user-select": "text", "-ms-user-select": "text", "user-select": "text"}); 
}

}); 

in web\viewer.css file add height:200px; :

.textLayer > div {height:200px;}