Google перевод слов с помощью CSS в стиле отдельных символов

Question

В постоянном развитии веб-сайте проект I стиля всех «о» символов в некоторой видимой области текста в красный цвет, с помощью HTML диапазона тегов и CSS, как это:

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

Проблема заключается в том, что при использовании переводчика веб-сайта google, который я добавил на веб-сайт, тег span разбивает слова, а google переводит отдельные части вместо всего слова («Questi» как одно слово », o «как одно слово, а« n »- одно слово).

Мой вопрос:Есть ли способ заставить «переводчик сайта google» перевести все слово и все-таки позволить мне стиль отдельных символов?

Я до сих пор пытался (безуспешно):

1. Поиск других способов укладки отдельных символов.
2. Поиск способа «подключиться» к некоторой функции javascript для перевода google , чтобы я мог удалить теги span перед переводом. Это было бы приемлемым, если бы не отдельные символы, созданные в переведенных страницах, при условии, что перевод самого текста работает.

Благодарим вас за это замечательное веб-сайт, и это очень помогло мне в последнее время!

EDIT: Это код, я использую, чтобы включить «Google сайт переводчик» на моей странице:

<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

Вы можете использовать свойство innerHTML в JavaScript, чтобы получить текст внутри текстового поля, а затем заменить все вхождения от <span class="redcharacter">o</span> с буквами o. Затем отправьте этот текст для перевода.

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 
} 

Нечто подобное.

Редактировать: В свете новых подробностей; Моей первой рекомендацией было бы взглянуть на Google на различные способы отправки и получения слов и их переводов. Тот, который дает вам свободу. Посмотрев на код, похоже, что они выкладывают копию поля с сайта translate.google.com на вашу страницу.

Если это не сработает, перейдите по ссылке source code и скопируйте его в свой файл. Измените этот код (это путаное чтение) и поместите его на свой сайт.

Answer 2

С :nth-letter() пока недоступен (но я слышал, что он наступает), я бы использовал сценарий на стороне клиента, чтобы покрасить весь красный цвет o, и не забудьте запустить его после завершения перевода.

Он может мерцать, но нет никакого способа настроить индивидуальные символы с помощью css (пока) без дополнительной разметки (что нарушает переводчик).

Вот супер схематичны rumor site для справки :)