JQuery - select invisible text overlaid on an image, ala GMail PDF preview

Question

I overlay invisible text on top of the image. Is there a jQuery plugin (or similar) that will allow users to select an area in the image (which also selects overlay text) and be able to copy the contents.

Right now, I put each character in my <span /> . The problem is when the user selects, sometimes selects all the overlay text (if the user is not very accurate with the mouse), sometimes the image itself becomes selected, etc.

A solution similar to the GMail PDF viewer would be nice. Suggestions?

Answer 1

Google seems to know from pdf where the various text offsets x,y are in the file. When you select a bunch of lines, it places a set of absolutely positioned “selected” sections above the image where the “text” is (they have a highlight-pane class). When you select text, it fills the #selection-content text area with the contents of what you selected, and selects the text in it (try using window.getSelection().anchorNode in Chrome, for example). Apart from these overlays of choice, there is only a .page-image . I bet they actually use the window to capture all the mouse gestures they care about (I assume mousedown and mouseup ). ( Here is an example pdf document )

If you are absolutely positioning elements, you can detect mousedown , mousemove and mouseup , identify the span elements that the mouse is located on (or the one closest to it), and fill the text area with the contents of all the content between the two elements. If you just want to use the word granularity, I doubt anyone will complain (surround each word with a space, not with every letter).

Change Last night I thought it was curious and the really naive version was encoded. It has only mousedown and mouseup , and it does not work in IE (I don't want to debug it :)

Check it out on jsfiddle.

Features you can add:

• The best way to check for matching positions; I just do if it is included in the field.
• mousemove dynamic update
• Linear, not span-based
• You can still choose the background color, but depending on how your elements are arranged, this may not seem very good. It will also be necessary to maintain transparency.

Answer 2

Here is a simple example using my answer to your previous question: http://www.jsfiddle.net/yijiang/83W7X/2/embedded/result

 var selected = []; function drawSelection(){ if(selected.length){ selected.sort(function(a, b){ if(a.sourceIndex){ return a.sourceIndex - b.sourceIndex; } else if(a.compareDocumentPosition){ if(a.compareDocumentPosition(b) == Node.DOCUMENT_POSITION_PRECEDING){ return 1; } else { return -1; } } }); var range = rangy.createRange(), sel = rangy.getSelection(); range.setStart(selected[0].children[0], 0); range.setEnd(selected[selected.length - 1].children[0], 1); sel.setSingleRange(range); } } $('ul').selectable({ delay: 100, selecting: function(event, ui) { if(ui.selecting.getAttribute('class').indexOf('wrapper') !== -1 && $.inArray(ui.selecting, selected) === -1) { selected.push(ui.selecting); drawSelection(); } }, unselecting: function(event, ui){ if(ui.unselecting.getAttribute('class').indexOf('wrapper') !== -1 && $.inArray(ui.unselecting, selected) > -1){ selected.splice($.inArray(ui.unselecting, selected), 1); drawSelection(); } } }); 

It mixes the jQuery Selectable user interface with the excellent Rangy Tim Down library to create something similar to what you requested. I think. What you asked for was not entirely clear.

The code stores an array of selected li elements. The second part of the code is added to the corresponding event handlers and parameters. The drawSelection function drawSelection called each time an element is selected or canceled. The function first sorts all the elements by their position in the DOM, then proceeds to draw the selection from the first selected li to the last.

Code like theazureshadow is just proof of concept, as I am abstracting what really should be the simple task of choosing li to the rather heavy Rangy library. It also doesn't work very well and can work with some refactoring.