Per my last email I’ve made some <textarea>s that you can navigate between with arrow keys

It uses a start position and then based on the arrow key direction it decides which textarea it would next intersect with. For this prototype it uses naive start coordinates (the top-left coordinates of each textarea), and from that point you can use arrow keys to navigate, so it mostly works as you’d expect. However when you focus on “3” and hit UP then it focuses on “1.1” and never “1.2” because it started from the top-left of the textarea, not the text cursor/caret position.

So the next step is to track caret position, but unfortunately the browser only provides the caret position in character offset. There’s no pixel coordinates. Instead, you have to make a clone of the containing element and then truncate the text to the caret position, append a span and then measure the x/y coordinates of that. This is an annoying workaround but it mostly works, but I need to refine it more before demoing something. That’ll be for next time.