Detecting Google Chrome Translation

Question

I've added the Google Translation Bar to our website but due to how the layout works if the translation on the main navigation is longer than English is pushes some links down to the next row and starts to cover up other elements. I've got some Javascript that detects if the translation bar is in use and makes the containing div for the menu and search box wider to compensate, while this does affect the layout it is by far preferable to covering parts of the page.

However Chrome now has translation built in to the browser, if someone uses this they obviously won't be using the embedded version and so I can't detect it to apply my width fix. Is there any way to detect if Chrome's built in translation is being used?

I am also interested in this, actually. Did you ever find out how to do it? — whitehawk, Dec 05 '11 at 19:31
Just something that might or not help anywhere, Google Chrome and Microsoft Edge use JavaScript to translate the pages. If I turn off JavaScript for webpages, the pages won't be translated. Not sure this is normal and perfectly known, so thought I'd write it anyways (I'd think it would be done some other way with C/C++ or whatever, externally to the page). — Edw590, Jan 18 '21 at 09:56

mx0 · Accepted Answer · 2011-12-20T17:26:35.783

28

Maybe try using js to detect if menu content has changed and then apply new styles.

UPDATE

When Chrome translates a page it adds several elements to a page:

two script elements to head tag
global object window.google
class = "translated-ltr" to html tag
div id="goog-gt-tt" to body tag

You can watch for changes in DOM to find out when content is translated:

document.addEventListener('DOMSubtreeModified', function (e) {
    if(e.target.tagName === 'HTML' && window.google) {
        if(e.target.className.match('translated')) {
            // page has been translated
         } else {
            // page has been translated and translation was canceled
        }
   }
}, true);

edited Dec 20 '11 at 17:26

answered Feb 03 '11 at 17:26

mx0

6,445
12
49
54

Not exactly what I did but it's the closest solution. I used the jQuery resize plugin http://benalman.com/projects/jquery-resize-plugin/ to detect the menu changing size, rather than detecting changing content. – Chao Dec 06 '11 at 14:16
It may be interesting to note that for the built-in translation feature of Google Chrome, only the third and fourth methods seem to work. I'm also assuming that `translated-ltr` can be `translated-rtl` depending on what language is being translated to. I'd still be a bit hesitant, though, considering you're only using class names - which could easily change to something quite different. – Knelis Apr 17 '14 at 08:23
1

also add class=notranslate to any HTML element to prevent that element from being translated see https://support.google.com/translate/?hl=en – lexa Apr 24 '14 at 17:43
1

Just wanted to point out that the notranslate meta tag only works for automatic translation, it won't work if the user does a right click and then selects translate to [language]. but you are right, the class ''notranslate'' will prevent single elements from being translated – NewBie1234 Feb 06 '19 at 12:40

score 8 · Answer 2 · answered Oct 20 '13 at 03:27

I know this is way late... and it's not a JS solution... but if you just need to be able to ensure you can style elements on your page when the Google Translate bar is being displayed, you can use CSS. The Translate code adds a class of "translated-ltr" (or "translated-rtl" if the language is right-to-left and not left-to-right like English) to the body tag.

So you can use CSS classess like:

.translated-ltr .nav, .translated-rtl .nav {}

substituting the correct class/ID for your items as needed.

Hope this helps!

Stephen G · Answer 3 · 2019-11-16T14:38:18.350

As of 2019 the selected answer above doesn't seem to entirely work, however I have been able to use the following modified version to track the class name changes to the <html> element (document.documentElement) when translate or "Show Original" is used:

var observer = new MutationObserver(function (event) {
    if(document.documentElement.className.match('translated')) {
        alert("Page translate");
    } else {
        alert("Page untranslate");
    }
});

observer.observe(document.documentElement, {
  attributes: true,
  attributeFilter: ['class'],
  childList: false,
  characterData: false
});

However it's important to note that this will trigger at the beginning of page translation, before the individual content has actually been changed.

If you need to perform an action which depends on the characteristics of the translated text (e.g. to check if it now overflows a div), then you would need to track changes on elements with text content to see if they have actually been translated, while also using the above code to set a flag to determine whether the change is a result of a translation, or a reversion to the original text.

score 5 · Answer 4 · answered Oct 06 '19 at 23:14

I just wrote an article on detecting automatic machine-translations in Google Chrome, Yandex Browser, and Microsoft Translate Extension. I haven’t figured out how to detect Naver Whale browser yet, which is the last browser with a built-in page translation feature.

The short and sweet of it is watching out for the following DOM markers:

!!document.querySelector("html.translated-ltr, head.translated-rtl, ya-tr-span, *[_msttexthash]");

You can detect web-based proxy translation services from a list of domain names (found in the linked article.)

mayersdesign · Answer 5 · 2022-03-23T07:31:39.063

Working here in 2022 to add a body class to the document with the translated language:

 if(document.querySelector('meta[http-equiv="X-Translated-To"]')){
  var translatedTo = document.querySelector('meta[http-equiv="X-Translated-To"]').getAttribute('content');
  console.log("Translated to: "+translatedTo);
  document.body.classList.add("translatedTo"+translatedTo);
 }

This is based on the fact that Google is currently adding a pair of meta tags:

<meta http-equiv="X-Translated-By" content="Google">
<meta http-equiv="X-Translated-To" content="es">

Detecting Google Chrome Translation

5 Answers5

Linked