How can I prevent Google Translate from changing the html structure of my page?

Question

Google Translate seems to be changing my html, moving my asterisk to a new line.

Here is a live example: jsbin

How can I avoid this?

Before Translating:

After Translating to Spanish:

JS:

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
    autoDisplay: false
  }, 'google_translate_element');
}

Css:

.box_content-form-data {
  clear: both;
  float: left;
}

Html:

<div id="google_translate_element"></div>
<span style="clear:both; float:left;">Enter your email account.</span>
<span class="box_content-form-data">
          <label>Email Address:
              <span style="color:red;">*</span>
</label>
</span>

Apologetics

@Huangism It should work in theory though right? I would like to support many languages and don't have the resources to get translations to that many languages. – Apologetics

It's not that accurate, I would suggest you do the 2 main languages of your site only. If people really wanted it in a different language they could just use chrome and it would offer translation by itself – Bromberg

@Bromberg I unfortunately don't have a choice. We need to support as many languages as possible and as a team are choosing to use Google Translate. We are fine with the inaccuracy, but are not fine with Google Translate disrupting our html. Do you have any ideas on why it is changing the structure of our site? – Apologetics

There is no why, I guess that's just how it works. I suggest you look at the API page and see if there is anything in there you can use. For example, where did you get layout: google.translate.TranslateElement.InlineLayout.SIMPLE from? That site should have all the info you need – Bromberg

I went through this gui: translate.google.com/manager/website After answering a few questions, it spit out a code snippet that should have translated my website. – Apologetics

Yea, there doesn't seem to be any kind of documentation or control over how this thing works. If it is only used on this page, you could override the css on the created elements and basically override their styles(with !important) to make the site look the same. – Bromberg

@Bromberg Could you possibly show me an example of how to override the css in the jsbin that I posted? I don't get how css would fix the issue. I think you would have to remerge the html – Apologetics

The layout is off due to new elements are introduced and some with inline styles. You can override the inline styles with your css with !important. You would need to look at the newly generated markup after translating and style it so it looks like what you had before – Bromberg

Let us continue this discussion in chat. – Apologetics

Try replacing the * with * and see if that works in your html. – Summersummerhouse

@Summersummerhouse Nope. That doesn't help. – Apologetics

Answer 1

do not use a span to wrap around the elements. A label is not allowed to be used within a span. That's invalid HTML and therefore prone to cause errors.

Literally changing your <span class="box_content-form-data"> to a <div> fixed the issue as far as I can see. See here

-- as per your last comment, what counts for spans also counts for labels. They aren't meant for nesting a lot of elements.

http://jsbin.com/botimiwipi/1/edit?html,output

Pencil

@JackFairfield because you are putting everything in a label. A label is not meant as a container for anything other than in-line elements. If you change box_content-form-data from label to div as I have done in my example, it'll work. – Pencil

@JackFairfield added another working example to my answer. – Pencil

Thank you so much. I see that now. You are a god! – Apologetics

@JackFairfield uhmmm thanks ahaha. More like a sad excuse for a programmer than a god, but I'll take it ;). – Pencil

I tried to give you the bounty and it says I have to wait a full 24 hrs. – Apologetics

Answer 2

Instead of using spans, just use labels. It seems the <span> tags are being treated oddly by google translate.

I'm assuming you tie this into a form which makes more sense to use <label> anyways.

Here is the fiddle: http://jsbin.com/rapusexufu/edit?html,css,output

<label style="clear:both; float:left;">Enter your email account.</label>
<label class="box_content-form-data">Email Address:
    <span style="color:red;">*</span>
</label>

Summersummerhouse

Unfortunately this worked in this very simple example, but when I tried with a larger form it is doing the same thing. – Apologetics

@JackFairfield here is an example with an actual form element and four input elements and it still works. jsbin.com/cayukoxije/edit?html,css,output Note that I removed your clear and float styles and replaced them with input{ display: block} – Summersummerhouse

See my updated JsBin. I looks like changing to a label element only works in the isolated example. – Apologetics

Answer 3

Though I wasn't able to find a way to preclude Google from changing the HTML, here is how I handled it and it seems to work just fine.

All I did was remove the * from the HTML completely, and put it into a pseudoelement, and hide one of the elements created by Google translate.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  <title>JS Bin</title>
</head>
<body>
  <div id="google_translate_element"></div>
  <span style="clear:both; float:left;">Enter your email account.</span>
  <span class="box_content-form-data">
      <label class="my-email">Email Address:</label>
  </span>
</body>
</html>

And for the CSS:

.box_content-form-data {
    clear: both;
    float: left;
}

.my-email:after {
  content: "*";
  color: red;
}

font + .box_content-form-data {
  display: none;
}

Piscator

I actually answered this earlier... But I retracted my answer as I had found a way better, simpler and more correct way to fix it. – Pencil

Answer 4

Here it is. Working example: http://jsbin.com/gelefonevu/edit?html,css,output

.box_content-form-data {
    clear: both;
    float: left;
}
.box_content-form-data:nth-of-type(2) {
    clear: initial;
}

Windermere

No.... It still doesn't work. There are no styles you can add to the label or the inner span that will change the output because Google Translate is changing the html around. I was really asking for a way to prevent Google Translate from changing my html in a way that changes the way the elements are organized. – Apologetics

I want to simply use the "Translate Website" option. I don't want to have to translate each html element individually. I used this gui: translate.google.com/manager/website/ Originally to generate the dropdown to add to the site. – Apologetics

using nth-of-type(2) is a type of selector that is generally quite unreliable. It gets easily broken by changing the HTML, meaning you'd have to work according to a very specific structure which is easily ruined by google translate. If it works in this case that is great, though I would recommend against using ever that type of function unless it's to be used on element wrappers that are in a container specifically to be repeated as single elementwrappers. – Pencil

@Babydead I'm not seeing your working example. Could you post a jsbin? – Windermere

@RonRoyston look at my answer, there is a jsbin there. – Pencil