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.
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.