CODEWITHSUNDEEP
csscharacterhtmlgoogle-translate
Fredrik Rafn Strandberg
Fredrik Rafn Strandberg

Reputation: 159

Google translation of words with css styled individual characters

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>

Upvotes: 2

Views: 1883

Answers (2)

StoicJester
StoicJester

Reputation: 364

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.

Upvotes: 1

Per Salbark
Per Salbark

Reputation: 3645

Since :nth-letter() isn't available yet (but I hear it's coming), I would use a client side script to color all the o's red, and make sure to fire it after the translation is complete.

It might flicker, but there is no way to target individual characters with css (yet) without extra markup (which breaks the translator).

Here is a super sketchy rumor site for reference :)

Upvotes: 1

Related Questions