14 DAY TRIAL // About a month ago, Google introduced a new Docs document editor. It brought a lot of new features and was, for the most part, a welcomed upgrade over the existing tool. The biggest changes, though, were under the hood. While the new editor may not look all that changed from the old one, they are two entirely different beasts. The editor was written from scratch and, amazingly, everything, including anything having to do with the actual text, is done in JavaScript.
Google has now posted a description of the work its software engineers have done and an account of the differences between the two editors. Traditionally, Google says, web-based text editors, from blog-post publishing tools to the old Google Docs, offset much of the text layout and processing to the browser. This makes sense, since all browsers have a powerful text-layout engine, given that it’s one of the web browser’s main tasks.
This meant that the editor would be fast, as the computing was done locally, and it left the tool free to handle everything else and not worry about how the text was displayed and processed. However, this approach came with one big limitation, it couldn’t do anything more than the browser engine allowed it to. And since not all browsers are the same, Google had to stick to features that were guaranteed to work for everyone, the lowest common denominator.
“To get around these problems, the new Google document editor doesn’t use the browser to handle editable text. We wrote a brand new editing surface and layout engine, entirely in JavaScript,” Jeff Harris, product manager, Google Docs wrote.
“[T]he new editor looks like a fairly normal text box. But from the browser’s perspective, it’s a webpage with JavaScript that responds to any user action by dynamically changing what to display on each line,” he explained. This enables the editor to do things that weren’t possible before, like showing multiple cursors for all the people editing one document at any given time.
Another big component of the new editor is the layout engine that figures out where to draw the text on the screen. The editor ‘measures‘ the dimensions of the letter you just typed and gets the mouse coordinates to determine where to place it. It also looks at how the new letter will affect the text around it and adjusts that as well. Of course, all text editors do that, but Google Docs does it using JavaScript alone.
The new editor enabled Google to introduce all sorts of new features. First of all, it means that the Docs document editor can handle a lot more formatting options and styles. It also enables tab stops and other similar features. The hugely improved support for floating images also has its origins in the new editor. So, if you’ve been wondering what you need all that JavaScript muscle in your browser for, you’ve got your answer.
