Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

HTML5 To Get Translate Attribute, Bring World Closer Together

DZone's Guide to

HTML5 To Get Translate Attribute, Bring World Closer Together

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

The W3C Open Web Platform Weekly Summary announced that HTML5 will receive a translate attribute with the goal of specifying pieces of text that should or should not be translated by machine translators.  This announcement continues the movement of improving semantics in HTML5, and was originally suggested on the W3C Bug/Issue Tracking Service:

Since this is becoming a widely-felt problem, it seems like a more formal solution than class="notranslate" is due. Based on the proposals above, I suggest that we add a translate="" global attribute to HTML, with two valid values, "yes" and "no", with the obvious semantics. The value would inherit to descendants, much like "lang". Invalid values (translate="foo", etc) would be ignored. A missing value (translate="") would be treated like translate="yes".

-- Ian Hixon
 
Here's how the translate attribute works:

<p lang="en">Mr <span translate="no">Hope</span> 
is speaking at…</p>
When translating from English to French, the string “Hope” will not be translated to “Espoir” in French.

-- W3C

It is worth noting that Google Translate has featured support for excluding text from translation for sometime, as has Microsoft Translator.  However, the hope is that HTML5 adopting such a practice will provide a standard approach.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}