Entry: text under mouse
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ac quam. Ut nibh enim, condimentum eget, tincidunt ut, dignissim eget, velit. Nulla ut ligula. Integer nisi. Suspendisse augue. Curabitur ut ante. Praesent molestie eleifend nunc. Vivamus vitae nunc ac orci hendrerit dapibus. Vestibulum nonummy, velit sed rhoncus tristique, est enim ultricies nibh, eu pulvinar risus mi sed augue. Phasellus in nibh a ante dignissim iaculis. Phasellus ut augue at leo sagittis cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur eget velit. Nulla egestas pharetra turpis. Suspendisse potenti. Sed nec metus nec augue mollis fringilla. Sed tincidunt, risus vel cursus mattis, eros justo venenatis metus, non blandit mi pede in massa. Fusce nec metus a erat pulvinar ultrices. Curabitur iaculis nunc in nibh. Mauris libero. Pellentesque id est. Donec non neque. Suspendisse vel est. In volutpat. Morbi id libero. Nulla risus magna, gravida ac, feugiat at, auctor ac, quam. In quam. Donec condimentum odio ut nibh tempus eleifend. Mauris non nibh. Aliquam consectetuer, turpis ut adipiscing tincidunt, arcu erat mollis sem, vel pulvinar mi felis nec risus. Aenean at purus. Nunc tristique sagittis magna. Duis sollicitudin purus vel nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque a sem. Fusce vitae sem. Integer mi. Donec non est id erat ornare dignissim. Sed imperdiet. Maecenas sit amet odio semper quam gravida porttitor. Etiam orci. Curabitur congue. Morbi a felis nec enim posuere imperdiet. Phasellus sollicitudin, lorem vel pretium mattis, nunc justo aliquet nisl, sed ornare mauris justo sed ipsum. Vivamus id augue vel leo interdum laoreet. Maecenas nonummy, massa ac hendrerit rhoncus, urna quam tincidunt lectus, nec elementum dolor quam id mi. Aliquam erat volutpat. Duis in massa at sem faucibus mollis. Praesent elementum, odio ut semper placerat, nunc nunc ornare libero, a vehicula eros sem tristique ligula. Fusce vulputate. Quisque laoreet semper felis. Aenean odio. Fusce convallis vestibulum purus. Nunc vulputate metus at quam. In viverra aliquet eros. Phasellus tempus nibh id lacus. Etiam ultricies sem et mi. Donec facilisis, risus at pulvinar porttitor, orci mi dictum dolor, nec vulputate tortor nibh sit amet augue. Cras id purus. Maecenas velit nibh, faucibus sit amet, condimentum vel, commodo non, magna. Pellentesque sit amet justo id ligula tempor lobortis. Sed nunc purus, tincidunt eu, ultrices quis, tristique eu, ipsum. Duis ac diam. Sed sagittis. In tempor.
Description
The problem is to find the text that is currently under the user's mouse pointer. First of all: This simple approach I am showing here is not a solution for this problem and most likely there will be no 100% algorithm that does the job with current technology.

The idea here is to raster the areas where text is often put into. Here the <div> with the lorem ipsum text. With Times New Roman and font size 12pt each character takes approximately 6.02 pixels in horizontal space and each line is about 20 pixel high.
Knowing this makes it easy to calculate the approximate text under the mouse. The longer the <div>, the less accurate the guessed text. The red text in the middle is put in a separate tag and calculation is mor precise again when the user moves over this area.

The problem is of course that the change of the font size, family or spacing will totaly destroy this approach but unless there is XPointer there will only be approximations to this subject.
function textCheck(event){
  var cWidth = 6.02;
  var cHeight = 20;
  var eObj = QQ.Element.getEventObject(event);
  var lines = Math.floor((QQ.Browser.yMouse(event) - 
              QQ.Element.getY(eObj)) / cHeight);
  var lineLength = QQ.Element.getWidth(eObj) / cWidth;
  var lineOffset = (QQ.Browser.xMouse(event) - 
                    QQ.Element.getX(eObj)) / cWidth;
  var cOffset = lineLength * lines + lineOffset;
  var relevantText = eObj.innerHTML.substr(cOffset-10,20);
  obj("text").innerHTML = "line: " + (lines+1) + " text: ";
  obj("text").innerHTML += "<span style='background-color:#000;color:#fff'>";
  obj("text").innerHTML += relevantText + "</span>";
}    
addEvent(window,"load",setListener);
function setListener(){
  addEvent(obj("testText"),"mousemove",textCheck);
}
Comments

NameE-Mail
send


Creative Commons License