Google Docs: Unwrapping core technical changes with new document editor

Google’s new document editor comes with features like a ruler, tabs stops, and floating images. Google "unwraps some of the core technical changes with the new editor to make this new functionality possible:new Google documents editor doesn’t use ‘browser to handle editable text’. We wrote a brand new editing surface and layout engine, entirely in […]

Google’s new document editor comes with features like a ruler, tabs stops, and floating images. Google "unwraps some of the core technical changes with the new editor to make this new functionality possible:

  • new Google documents editor doesn’t use ‘browser to handle editable text’. We wrote a brand new editing surface and layout engine, entirely in JavaScript. Let’s start with new editing surface, which processes all user input and makes the app feel like a regular editor. From browser’s perspective, is a webpage with JavaScript that responds to any user action by dynamically changing what to display on each line.
  • new layout engine: Here’s an example of how the new engine works: say you type the letter ‘a’. We notice you pressed ‘a’ key and respond by drawing a single ‘a’ off-screen. We then measure width & height of that ‘a’, combine those measurements with x and y position of your cursor, and place ‘a’ at the correct spot on screen. If you’re in the middle of a word, we push the characters after your cursor over. If you’re at the end of a line, editor moves your word to the next line and pushes any overflow to lines after it. Tab stops and other basic features are impossible to support if you’re using browser’s HTML layout engine for your text.
  • Improved collaboration: we built the editor around a technology called operational transformation. It’s what lets multiple people edit the same area of a document at the same time without needing to wait for the server to say a particular edit is okay. Building an extensible, fully collaborative online word processor required rewriting every part of document editor from scratch," writes Google.