Question

In an ongoing website development project I style all ‘o’ characters in a certain visible text area to a red color, using a html span tag and css, like this:

Questi<span class="redcharacter">o</span>n.
.redcharacter { color: red; }

The problem is that when I use the google website translator that I have added to the website, the span tag breaks the words and google translates the separate parts instead of the whole word (“Questi” as one word, “o” as one word, and “n” as one word).

My question is: Is there a way to make the “google website translator” translate the whole word and still let me style individual characters?

I have so far tried (without luck):

1. Searching for other ways of styling individual characters.
2. Searching for a way to “hook on” to some google translation javascript function
   so that I could remove the span tags prior to the translation. It
   would be acceptable not to have the individual characters styled in
   the translated pages, as long as the translation of the text itself
   works.

Thank you in advance, and thank you for this amazing website, it has helped me tremendously lately!

EDIT: This is the code I use to include the “Google website translator” on my page:

<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', autoDisplay: false}, 'google_translate_element');}</script>
<div id="google_translate_element"></div>

Answer 1

You can use JavaScript’s innerHTML property to get the text inside of the textarea, then replace all occurrences of <span class="redcharacter">o</span> with just the letter o. Then send that text out to be translated.

function translate(){
    text = document.getElementById('myTxtArea').innerHTML;
    parsedText = text.replace("<span class="redcharacter">o</span>","o");
    // send parsedText to Google Translate...
    // do something with what is returned
}

Something like that.

edit:
In light of new details;
My first recommendation would be to look on Google for a different means of sending and receiving words and their translations. One that gives you some freedom. Looking at the code, it looks like they plant a copy of the box from translate.google.com into your page.

If that doesn’t work, follow the link to the source code and copy the code there to your own file. Modify that code (it’s kind of a confusing read) and put it into your site.