Is it possible to get pixel coordinates of text and draw a rectangular border around it using Javascript?

Question

Dear all, I am evaluating technology options for an upcoming project, and one of the requirements is to draw a rectangle around certain groups of words in a text field. Each time the text is evaluated and parsed, certain recognized parts of it must be boxed with a rectangle, which should also respond to mouse clicks. There is even a requirement to place a little triangle to one of the corners of this rectangle. I have no control over the requirements, and clearly this requirement points out to getting pixel positions of text in a text field (or a div container), and using some sort of overlay mechanism to draw the rectangle. Unless I am using the wrong keywords, google searches return no helpful results, and I'd really appreciate your input about this topic.

Best Regards Seref Arikan Ps: any books/resources about advanced browser dom based graphics with javascript be appreciated also.

Answer 1

I would recommend looking at this plugin: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

It's not exactly what you want, but you might be able to adapt it. The work of finding text in running content and then manipulating it is a little messy.

edit note that that plugin is for text in the HTML document, not text in input text fields or in <textarea> blocks. That would be pretty hard to do, but possibly somebody's done it.

Answer 2

I suggest you use multiple, borderless text fields, each containing a single part of the text(words or letters) and wrap groups as needed in span styled with a border and the triangle as a positioned background image.