April 2009

Volume 24 Number 04

{ End Bracket } - Translate This Page

By Sandor Maurice | April 2009

Microsoft translation services have been upgraded with the release of a number of translation Web service APIs and tools, along with new of ways to access the service via REST, SOAP, and AJAX APIs, so that you can easily integrate translation into your Web site.

From our widget adoption portal at microsofttranslator.com, you can customize the behavior and appearance of the new translation widget to fit your content, and using a short HTML snippet, have the translation widget appear alongside your existing content.

When invoked, the widget leverages our AJAX API to progressively translate your page's content, in place, without taking the user to a different site. Users can choose from among several viewing options: inline translation with original text tooltips, original text with translated text tooltips, or both, side by side.

Users may also opt for automatic translation, causing all pages they visit that contain the widget to be translated automatically. All user settings are persisted across any site that contains the widget.

Figure 1 Microsoft Translator

For more advanced scenarios in which the widget may not be suitable, you can access the underlying AJAX API that provides complete control over translation triggers and content to be translated. To integrate the AJAX API, simply copy and paste a small HTML snippet from the AJAX API SDK into your HTML. In this case the snippet does not expose any visible content on the site but rather just loads our AJAX API into the browser. You can then invoke the various JavaScript functions supported by our API. For example, in order to translate a specific Document Object Model (DOM) element with an ID of "myElem" from English to Spanish, you would call

Microsoft.Translator.translate(document.getElementById("myElem"), "en", "es");

In order to translate the body of the entire document, one would call

Microsoft.Translator.translate(document.body, "en", "es");

You can programmatically access all the same options that the widget exposes to users. For example, you can create a side-by-side translation on a specific DOM element, call

Microsoft.Translator.setOptions({ "layout": "ss"}); Microsoft.Translator.translate("myElem");

Note that when no language arguments are provided, the API determines the original (source) language by first checking the DOM hierarchy for any HTML lang attributes. Failing that, it falls back to automatic language identification technology. The translation (target) language is determined by the browser accept-language settings of the user, and if no appropriate translation language is supported the API gracefully degrades to a reasonable default. A complete list of supported option names and their respective values can be obtained by calling


You may also control translation behavior declaratively. In addition to a standard HTML lang attribute, elements can be identified as being unsuitable for translation with a translate="no" attribute, in which case the API simply skips over them.

As you will see when you give it a try, the new translation services features let you tailor your content to your users easily and conveniently.

For more information on what we've been up to, read Vikram's installment of End Bracket in the January 2009 issue, "The Emergence Of Machine Translation."

Sandor Maurice is a developer on the Microsoft Translator team. He is responsible for developing the AJAX API and widget.

Vikram Dendi is a Senior Product Manager on the Microsoft Translator team. He is responsible for business strategy and product planning and is working toward empowering developers to help build a Web without walls. He blogs at viks.org and at blogs.msdn.com/translation.