Retrieve letter position on hover

Question

Every letter doesn't have it's own wrapper element, everything is inside paragraph.

And I am wondering if I can retrieve the position of the letter in string when I hover over it's parent element?

For example: <p>The quick brown fox jumps over the lazy dog</p> has innerText.length = 43, if I hover over f, it should return 16.

Any way to do this?

Thanks in advance!

get the mouse position and the x/y offset of the
and do some math. with a common font and fixed size it might work. — miki, Sep 05 '11 at 16:38
With a fixed font - yes. Probably should've mentioned that no fixed font will be used and there will be varying sizes for the letters. — tomsseisums, Sep 05 '11 at 16:42

score 2 · Accepted Answer · edited May 23 '17 at 12:29

2

Options for you:

To use Canvas (HTML5) and in particular its context.measureText(text).width. But this will give you position in single line text.
To use cursor/range in contenteditable, see Get caret (cursor) position in contentEditable area containing HTML content for example.

edited May 23 '17 at 12:29

Community

answered Sep 05 '11 at 16:51

c-smile

Canvas won't cut it this time, too expensive for what am I building. About caret.. is there a way to apply it on hover? – tomsseisums Sep 05 '11 at 17:19

score 1 · Answer 2 · answered Sep 05 '11 at 18:44

1

You'll have to put every letter into its own <span />. http://letteringjs.com/ might be useful to you, depending on what you're trying to do.

answered Sep 05 '11 at 18:44

evan

Currently working on this without lettering tho'. But it gets pretty interesting for nested elements, hehe. – tomsseisums Sep 05 '11 at 19:10

2 Answers2