Search⌘ K

How to Determine the Middle of Cursor?

Explore how to find the exact middle coordinates of a text selection using JavaScript methods like getSelection and getBoundingClientRect. Understand challenges such as multi-line selections and maintaining highlights while dynamically inserting HTML spans. This lesson guides you through practical debugging and testing techniques to effectively position tooltips.

What we have so far #

So far, we’ve investigated if we can use constant character widths to determine the middle, and we’ve tried to use the getSelection method alone to provide all the information we need.

We know that we’ll certainly have to use some information from getSelection, since it reliably gives us the selected characters. So the problem becomes this: given a string of characters in an HTML node, find the x and y offsets of the middle (so that we can have ...