Tuesday, January 21, 2025
HomeJavaScriptUse "translate" to show off component translations

Use “translate” to show off component translations


I simply found an HTML attribute I have not seen in my 15y of internet growth — translate.

If sure components are untranslatable, you need to use the translate HTML attribute to decide out of computerized localization and sign browsers to not contact them. When would that be helpful?

I may provide you with a made-up instance, however let’s simply take a look at Cory Home’s web site and translate it to German utilizing Google Chrome.

Website of "Cory House" which changes his name to "Cory-Haus" when translated.

The interpretation is not actually good. “About” turns into “Um”, which does not make sense in German, however the translation has a much bigger situation. Cory’s title was translated, too. The English Home turned a German Haus.

Google Chrome simply renamed an individual. 😱

This example is the place the translate attribute turns out to be useful. A tiny HTML tweak will assist Cory hold his title in any language.

<h1 class="site-title" translate="no">
  <a href="https://www.bitnative.com/">Cory Home</a>
</h1>

translate="no" disables the localization of a component’s textual content node and, theoretically, even sure attributes. The spec defines a complete lot of translatable attributes, together with a picture’s alt attribute or content material on meta components.

Do browsers actually translate all of them? I do not know and did not take a look at if and the way this all works. So, remember there could be points in case you count on attributes to be translated.

For instance, aria-label is theoretically translatable(translatable attributes in ARIA spec), however computerized aria-label translation is not working effectively in apply.

Both approach, understanding find out how to flip off translation for names and such is unquestionably helpful, and in case you’re constructing one thing that features person names, including a translate="no" to keep away from title theft would not damage.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments