More about HTML5 and Multilingual Websites

Written by Linc Wonham | Apr 30, 2012 5:00:00 AM

Below are some more ways in which to utilize HTML5 to enhance your multilingual websites:

Ruby annotations

Ruby annotations are pieces of text showing up alongside the so-called base text. They usually provide additional information about the base text, such as its pronunciation. Their use is most common in East Asian documents. It can also show translations right above the source text. Here are some examples:

Ruby providing translation

Ruby providing pronunciation guidance

Examples taken from here.

HTML5 supports Ruby annotation through the following four tags:

The Ruby tag -- Specifies a Ruby Annotation
Ruby base tag -- Specifies the base text to be annotated
Ruby text -- Specifies the actual annotating Ruby text and by default appears above the base text
Ruby parenthesis -- Specifies alternative text for browsers that don't support Ruby text

Because the use of Ruby annotations can complicate the website translation process, you'll want to partner with a translation agency specializing in website localization. The experts will know how to work with these annotations across your target languages.

The attribute

Have you ever dreamed of adding sticky note functionality to your website, allowing users to jot down comments directly on your Web pages? Or have you ever wished your translation agency could directly access your web copy to extract text for translation? Your wishes are granted with this new attribute.

All you need to do is set ContentEditable to true for any element, and the user or translator can then click on it to directly change or copy the text.

Here's how it works: By default, elements with the ContentEditable attribute set will have a gray border as the user hovers over them. Clicking inside the element will give the user access to its content. The user can then edit or copy it directly.

The attribute

If you want to provide spellcheck for user-generated content, you can now use the new attribute. Adding this attribute to an editable element will trigger spellcheck when the user adds or changes text. The following elements can be spellchecked:

Text values in input elements (exception: password)

Text in elements Text in editable elements For this to work correctly in the context of a multilingual site, you need to make sure the right language is used for the spellcheck. The browser will use the language set for the edited element itself first. It the element itself does not have a language set, the setting of its parent element will be used, and so on. Here's an example: <html lang="en"> <body> <textarea spellcheck="true">Hello World!
Bonjour tout le monde!

-‚àö¬∫-‚àö√ë-‚Äö√†√®-‚Äö√¢¬ß-¬¨¬µ-‚àö√° -‚àö‚à´-‚Äö√†√®-‚àö√ë!

In the above sample code, the first text area will be spellchecked in English (html lang="en"). The second text area has French set as its language, so it will be spellchecked in French. The third text area does not have a language set, so it will use the setting of the first parent up, which is the
with lang="ru" (Russian).
Pay extra attention to the language settings of your elements when you set up spellcheck for a site that will be in multiple languages.

About the author: Jon Ritzdorf serves as the in-house globalization architect for Acclaro. He is an adjunct professor of translation technology, localization and the business of translation at New York University, the Monterey Institute of International Studies, and the University of Chicago.

View full post