Google tries to translate English HTML subscripts from Arabic

February 19, 2022

I have a simple HTML page with some <sub> elements in it. For some reason, Google Translate offers to translate the subscripts from Arabic to English (despite being English to begin with), only moving them down a little when translated. The HTML page language is set to en-US. Is this just my computer being weird, or is there a code-related reason?

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <!--<meta name="google" content="notranslate"> (this successfully gets rid of the translate popup, commented out for testing purposes)-->
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
    <title>test</title>
    <link rel="icon" href="favicon.svg" type="image/svg"/>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="functions.js"></script>
    <script src="main.js" defer></script>
  </head>
  <body style="min-width: 0">
    <div id="test"></div>
  </body>
</html>

Added to #test by JS:

<div class="letter">A<sub>1</sub></div>

Website: https://test.edgeloop.repl.co
Screenshot: screenshot

>Solution :

Are you sure that this is the correct code? You seem to have a <html...>-tag inside your <head>-tag. Remove the duplicate html-tag inside your head, and instead add the lang="en"-attribute to your outer-most html-tag.

Your code should thus look as follows:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <title>test</title>
        ....
    </head>
    <body style="min-width: 0">
        <div id="test"></div>
    </body>
</html>

If this does not immediately solve your problem, try clearing the google chrome cache as follows:

Press F12 to open the dev tools menu
Right-click your refreh-button
Select the option empty cache and hard refresh:

If your webpage uses HTML and XML interchangably, you might need to add the following to your opening <html>-tag (see this link):

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    ...
</html>

If your Google Translate does still pop up, you have the following options:

add translate="no" to your root html-tag
add the class notranslate to your root html-tag
add <meta name="google" content="notranslate"> to your head-tag

Your code should look as follows:

<html lang="en" translate="no" class="notranslate">
    <head>
        <meta name="google" content="notranslate"/>
        ....
    </head>
    ....
</html>