Mark code elements as non-translatable

[javiereguiluz]

This is an HTML5 attribute (https://html.spec.whatwg.org/multipage/dom.html#the-translate-attribute) used to tell Google Translate to not translate the contents of some elements.

We use the same in the current symfony.com docs, but we use the old class="notranslate" technique, because the HTML attribute was not available back then.

[jrushlow]

Just a word of caution, and this may already be known and irrelevant, the translate attribute is not supported in Firefox / IE. The latter not being a big deal. Does the old class=notranslate support Firefox?

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate

Even without Firefox support, this should still be implemented.

[javiereguiluz]

Good catch! The translate attribute is supported by most browsers (90%) but not Firefox: https://caniuse.com/mdn-api_htmlelement_translate

Firefox is important in our user niche (tech people, Open Source enthusiasts, etc.) so let's add both the attribute and the CSS class to cover all cases. Thanks!

[nikophil]

nice catch @jrushlow !

I'm wondering why firefox is not supporting this attribute? 🤔
moreover if all other browsers are supporting it....

Isn't it because firefox does not propose to translate pages at all? (I'm a firefox user, and I find the "translate" popup in chrome really annoying).
If that's the case, we don't need to support the old way to add "no-translate". WDYT?

[jrushlow]

Isn't it because firefox does not propose to translate pages at all? (I'm a firefox user, and I find the "translate" popup in chrome really annoying).
If that's the case, we don't need to support the old way to add "no-translate". WDYT?

Same here, I haven't used Chrome as my daily driver in years. I'm unaware of any direct translation support in Firefox (never really needed to use a feature like that.) But a quick google search reveals that there are translator plugins for firefox - some of which are google ports.

I could see an argument for both ways. But I lean more towards "lets be safe" and keep the old class="no-translate" in addition to the new translate=no due to plugins.

Of course thats under the assumption that there are no major technical hurdles or degraded UX as a result of having both. If that turns out to be the case then we should drop the class="no-translate" and stick with the new and shiny..

[javiereguiluz]

I agree with Jesse and I'd vote for the "let's be safe" option too.

[nikophil]

I'm ok as well :)

Of course thats under the assumption that there are no major technical hurdles or degraded UX as a result of having both.

I couldn't find any information about that, but I'm pretty sure browsers which handle the new attribute don't look after the class and this won't be a problem.

I merge your PR :)