Skip to Main Content

More about HTML5 and Multilingual Websites

Posted on 4.29.2012

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

WebsiteMagazineMiniLogo

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up

 

Leave a comment
    Load more comments
    New code
  •