Skip to content

Latest commit

 

History

History
63 lines (40 loc) · 4.27 KB

bookmarklet-remove-notranslate-class-that-prevents-whole-page-translation.md

File metadata and controls

63 lines (40 loc) · 4.27 KB
Raw

[Bookmarklet] - remove notranslate class that prevents whole page translation

Background

Click to expand

Before HTML5, if an HTML element had class="notranslate", machine translation would ignore that element. It was intended to be used for things like names and other elements that are not supposed to be translated. In HTML5 this can be accomplished with the attribute translate="no". Still, most websites use the legacy method of just adding a notranslate class to an element.

Unfortunately, some website generators unreasonably apply the notranslate class to too many elements. It almost seems like it's the default. I've seen it mostly on sites from Korean companies/providers, but even Notion* does it! Chrome has Google Translate integrated, which is meant to translate entire websites at once. It works well but unfortunately, the evil notranslate class blocks it 😭.

User Story

  • I want my browser's built-in translator to translate all pages. It should not be foiled by a developer or website generator obsessed with the notranslate class.
  • I want the solution to be easy to use. Ideally with 1 click.
  • I want the solution to be easy to install.
  • I want the solution to be easy to add to any browser I use.

Solution

The code below is for a bookmarklet. Bookmarklets are magic. They appear to be an ordinary browser bookmark but then clicked, they run a predefined JavaScript snippet.

With one click, this snippet removes all notranslate classes from all elements on a page. It's about as easy to install as it is to add a bookmark, and you can add it to any browser you want. This means it satisfies all the user stories.

❗️Caution! Click to reveal a warning about this bookmarklet❗️

Some websites (like Asana) will save elements every time their text changes. If you machine translate the entire page, you just edited all the editable fields on that page and their state got saved. Toggling the translator back to the source language may not work. I suggest using this bookmarklet cautiously for sites with editable elements you may care about.

// Sorry, the syntax highlighting is strange because bookmarklets have slightly different syntax than normal JavaScript. They require starting with `javascript:`, which throws off JS syntax highlighting 🤷‍♂️
javascript: (() => {
  const rootOfAllEvil = "notranslate";
  document
    .querySelectorAll(`.${rootOfAllEvil}`)
    .forEach((element) => element.classList.remove(rootOfAllEvil));
})();

A normal website without notranslate is easily translated by the browser

Screen.Recording.2022-06-14.at.21.42.35.mov

An evil website with notranslate is translated anyway, thanks to this bookmarklet!

Screen.Recording.2022-06-14.at.21.38.41.mov

Installation in 10 seconds or your money back!

Screen.Recording.2022-06-14.at.22.27.55.mov

* The Notion page linked in the Background section uses one other dirty trick to prevent translation. I found a way to disable it too. Stay tuned for a future installment of TIL!

Further Reading

  • W3C documentation about the translate attribute. It mentions the notranslate class as a "legacy approach". 🤣
  • Google documentation about the notranslate class and translate attribute.
  • MDN Docs for the translate attribute. Strangely enough, no mention of the notranslate class, but links to the W3C docs above, which do mention it.
  • HTML Spec for the translate attribute. This is the HTML living standard. It makes no mention of the notranslate class.