Explain Codes LogoExplain Codes Logo

How to disable Google Translate from HTML in Chrome

html
browser-compatibility
translation-control
html-attributes
Nikita BarsukovbyNikita Barsukov·Dec 11, 2024
TLDR

Avoid Chrome from translating your webpage by adding notranslate class to your <html> element:

<html class="notranslate"> <!-- It's a no brainer, "Notranslate" means no translation --> </html>

Chrome directly interprets this, ensuring consistency across viewers who exploit Chrome's auto-translate feature.

Additionally, you can employ the <meta> tag to keep Google's translation service at bay. Affix this in the <head> section:

<meta name="google" content="notranslate">

Setting "notranslate" in the meta tag alerts Google to avoid translating your webpage content.

Thorough Implementation

Element-specific translation

To selectively turn off translation, use the translate="no" attribute:

<div translate="no">This text is a spy. It won't be translated.</div>

Infiltrate any HTML element with the translate attribute to protect specific content pieces from translation.

Compatibility check

Verifying browser compatibility is like checking your parachute before skydiving. It's a life-or-death situation. Modern browsers generally support the tactics discussed earlier, yet checking with official resources and browser documentation is always a smart move.

Code sample preservation

Code samples on your website should be handled with the class="notranslate" tag to dodge quirky display issues. Untranslated class names or IDs might pose similar challenges as me trying to understand my cat:

<pre class="notranslate">const foo = 'bar'; // I mean, who'd translate a perfectly good foo?</pre>

This ensures that your code remains intact and decipherable by all users.

Styling for translation

When juggling translate attributes or notranslate tags, keep an eye on potential styling concerns. For example, flex layouts can adopt the gap style:

<div style="display: flex; gap: 20px;"> <span translate="no">Don't touch! I said no translation here.</span> <span>Go on, the translator is allowed here.</span> </div>

Preserve a consistent layout whether the content has been translated or not.

Highlighting multilingual content

In multilingual contexts, you could highlight important phrases while keeping the translation option intact. Employ <b> tags to emphasize and alert readers:

<b>This is where the party's at!</b> Plain text that can be translated.

Balancing visual emphasis and translation control improves user experience in multilingual scenarios.

Experimentation for perfection

Experiment with different elements and their associated attributes for the perfect result. Find that sweet spot between easy access, aesthetic appeal, and efficient functionality.

Remember, Google's translation commands are as unpredictable as rain in London. Keep a weather check on Google's documentation for updates regarding translation control.