How to Use the HTML5 Translate Attribute: A Translatability Best Practice

HTML5 introduces a translate attribute that allows fine-grained control over what content should be translated, or not. Richard Ishida of the W3C has all the details of the attribute and its applicability, as well as some interesting insights into how Bing Translator and Google Translate deal with the translatability of content issue.

Here’s an example of the translate attribute’s use, taken from Richard’s blog (the HTML5 spec’s global attributes section has another other nice example, see the Bee Game.):

<p>Click the Resume button on the Status Display or the
<span translate="no">CONTINUE</span> button
on the printer panel.</p>

See how the word CONTINUE is made non-translatable using the translate attribute’s value set to “no”? Blimey! However, there are times when CONTINUE might need to be translated. So, flip that puppy to “yes”.

This HTML5 attribute is a very welcome addition to the content creation and translation tools world, sure.  But, it is very welcome for other reasons too.

This is a time of new interactions and emerging platforms that challenge the established desktop and website norms of what should be translated or not. Mobile, augmented reality, gamification, and other trends, all challenge established norms of content rules. So too, is it a time when companies redefine themselves, cross over, and promote their own design guidance as a differentiator in the market. Oracle, for example, likes to say “Software, Hardware. Complete” so content needs to cross-reference many deliverables. SAP, as another example, recently launched an app in the consumer space (available in German and English) that may require a different style of content and translation from the enterprise applications space. Android has released user experience (UX)  guidance of its own, and so on.

I previously raised such translatability issues in my Don’t Translate: Won’t Translate blog post.  I chipped into the [Bug 12417] discussion about the attribute’s development, too.

Using content to convey a translation instruction, by making a piece of text all uppercase for example, is not a best practice. It is a UX failure, makes personalization and customization difficult, and assumes the consumer of the content is a second-class stakeholder. Frankly, it is also very dangerous. Can you imagine if software developers used text that way in their code, rather than relying on the program logic?

As for the time-honored method of writing a translation note, or description, telling a translator that some content should not be translated, or should be, well such approaches just ain’t reliable or scalable, are they?

Now, there is a clear best practice to follow (and adapt for other formats). The HTML5 translate attribute educates content developers that the best practice for indicating whether content should be translated or not is through the use of markup (or metadata), and not through how the content is written. Translation tools should update to the HTML5 spec requirements and process this attribute asap.

JMCC Conferente Center

The conference will be taking place in the stunning surroundings of the recently renovated John McIntyre Centre (JMCC). Part of the Pollock Estate, the JMCC is located in the vibrant Southside of Edinburgh and nestled on the edge of Holyrood Park. The estate offers a residential conference village environment within the city. It is easily accessible on foot or by public transport from the city centre while also boasting electric car charging points and parking.

Ultan Ó Broin
Ultan Ó Broin (@localization), is an independent UX consultant. With three decades of UX and L10n experience and outreach, he specializes in helping people ensure their global digital transformation makes sense culturally and also reflects how users behave locally. Any views expressed are his own. Especially the ones you agree with.


Weekly Digest

Subscribe to stay updated

MultiLingual Media LLC