Question

On an html page, can I calculate an invidual character’s x,y coordinates and its render size on screen ?

I am asking this question because I was wondering how google docs does it ? If you look inspect selected region in google docs, it places an overlay on the selected region. I couldn’t figure out how they do it.

Google search does not return anything relevant. May be I am not searching for the right thing!

Any clues ?

Thanks,
Parth

Answer 1

I think what Google Docs does is to draw and measure each individual character off-screen. I’ve done this on a recent project and it’s relatively easy:

1. create a span
2. give it the right styles
3. set its innerHTML
4. position it off-screen
5. add it to the DOM
6. check its offsetWidth
7. remove it from the DOM

For more information, see this Google blog post: https://drive.googleblog.com/2010/05/whats-different-about-new-google-docs.html