Building Advanced Editing in Word Web App

This is the first post in a weekly series from the Office Web Apps engineering team diving deeper into the next release of Office Web Apps. As Mike Morton mentioned a couple weeks ago in his new Office Web Apps blog post, improved authoring is one of the core scenarios for this release.

In this post, Ken Yuhas, Program Manager, Office Web Applications, will explore these improvements and talk about how we built these features in the browser for the Word Web App. 

With over twenty years of development behind them, the Office applications are full of features that enrich our productivity. We have limited time with each release of Office Web Apps and must prioritize which of these features and what new scenarios we want to invest in. We use customer feedback, usage data, and new scenario investments to make these decisions. As Web Apps, we release frequently so please continue to let us know what features are important to you.

Page Layout

The Word Web App viewer has always rendered documents with same fidelity you're used to with Microsoft Word on the desktop. However, Word Web App editor has lacked the same page layout features. With the addition of these features, you can now see how your changes impact the final layout in real time. The improvement in the editing experience is drastic and is best conveyed though pictures.

(Word Web App editor in Office 2010)

(Word Web App editor 2013)

You can now view the document's correct page width, orientation, margins, paragraph spacing, indentation, and more, right in the browser. We have added the Page Layout ribbon tab so that you can easily make changes to these properties.  As you can see, these enhancements improve document fidelity to closer match your printed document.

When you are opening a document, the server processes the file and sends the page layout properties down to the browser along with the document content. Our JavaScript running in the browser applies the appropriate CSS values to the content and we let the browser take care of the rest. The trick is getting the conversion right so that you see the same layout in your browser and in Microsoft Word.

(Page Layout tab in Word Web App editor 2013)

Office Art

We also added the ability to view Office Art (picture with effects, charts, smart art, word art, and more) in the Word Editor this release. You can apply new pictures styles to images right in the browser. To give you a consistent experience everywhere you access your documents, we use the same graphics engine on the server to render the images that we then send down to the web app.

(Picture Effect options in Word Web App editor 2013)

Word Count

Word count was one of the highest requested features from our customers and we wanted to make sure that we added it this release. Like the desktop application, we show the word count in the status bar. It turns out that building word count in the browser was an interesting challenge.

(Word Count in Word Web App editor 2013)

Word breaking or determining which groups of characters are words is the key activity in word counting. Turns out it takes our word breaking code around 1ms per word and the browser around 2ms per word for standard Unicode characters. JavaScript is single threaded so if we counted all of the words in 20 page document on boot we could freeze the app for over 12 seconds!

To prevent the app from freezing and still offer a word count that runs in the background, we break the word counting up into chunks. When we kick-off word counting, using a JavaScript callback, we try to count approximately 100 words. We then yield back to the rest of the application to handle new events like typing or clicking. When all the events have processed we go back to counting words.

 Fit and Finish

We also spent time this release working on smaller features that contribute to the overall experience of editing in Word Web App. For example, you can now edit documents with comments or track changes. We also added the ability to view content controls such as bibliographies and table of contents. Inserted images are now placed inline instead of as new paragraph. You can even change your font size using the new grow and shrink buttons!

(document with a Word generated bibliography and newly inserted inline image)

Hopefully this blog post gets you excited about the new advanced authoring features in the Word Web App. You can try out the new Office Web Apps on SkyDrive by signing in using this special link or you can participate in the Office 365 Preview. 

 Ken Yuhas

Program Manager - Office Web Applications