CODEWITHSUNDEEP
google-translate
bart
bart

Reputation: 15298

Google Website Translator messes up HTML

When testing my website with Google Website Translator, I noticed that Google is changing the HTML structure of my page resulting in CSS styles not being applied.

For example, this piece of HTML (using Bootstrap):

<ul class="nav nav-pills nav-stacked">
    <li class="active">
        <a title="About us" href="/about/">About us</a>
    </li>
</ul>

Is changed into this format:

<ul class="nav nav-pills nav-stacked">
    <li class="active">
        <span class="notranslate" onmouseout="_tipoff()" onmouseover="_tipon(this)">
            <span class="google-src-text" style="direction: ltr; text-align: left">
                <a title="About us" href="...">Over ons</a>
            </span>
            <a title="About us" href="...">About us</a>
        </span>
    </li>
</ul>

Basically, my links are being wrapped by a <SPAN>. How can I avoid that?

Update:

Google Website Translator also removes SPANs that are wrapped around SVGs, even if these elements are not a link. Very bizarre. For example:

<div>
    <span>
        <svg>...</svg>
    </span>
</div>

Is turned into:

<div>
    <svg>...</svg>
</div>

Upvotes: 0

Views: 849

Answers (2)

bart
bart

Reputation: 15298

I've found a fix, which is specifically targeting Google Website Translator as follows.

I've changed this:

nav > li > a {
....
}

Into this:

nav > li > a,
nav > li > span.notranslate > a {
...
}

Upvotes: 0

Cozmoz
Cozmoz

Reputation: 171

This is a native aspect of Google Translate. Best put in some CSS to fix any breakages.

Upvotes: 0

Related Questions