Saturday, December 8, 2012

Google DOC offscreen word rendering

Google DOC is a brilliant piece of software not just for its functionalities but also for genius of engineering that is employed in its implementation. This article gives a small peek into some of the ideas. Out of curiosity I have started poking around Google DOC to find how they have implemented small things (they just seem small), for example displaying the cursor using DIV when user clicks in a text block. My search led me to Range DOM APIs, and in turn I found rangy position module which can be used to do this. 

Since Google DOC handles editing on its own, it must use some logic to split text into different lines as user is typing. Since the article above mentions off screen rendering, I thought to look at the DOM elements to find these offscreen DOM elements. And I found one element that renders a word under the cursor. If you remove its z-index, positioning and overflow attributes, you will see the current word rendered on the top left corner of the page. You can find this element all the way at the bottom of the DOM tree with <span> tag as shown below.