Перевод html на русский

Как в браузере перевести сайт на русский язык

Доброго времени суток.

Вот так бывает «бродишь» по интернету в поисках какой-нибудь нужной информации, и натыкаешься на иностранный сайт. Судя по картинкам, понимаешь, что там разбирается как раз твоя проблема, а прочитать, что написано — не можешь, т.к. в английском слаб (или в немецком, или еще в каком. ).

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

Однако, сейчас есть превосходное решение: иностранные сайты можно переводить «на лету» прямо в самом браузере! Почти все современные браузеры поддерживают данную возможность. Ниже рассмотрю, как включить это.

Перевод веб-страниц с иностранного («на лету»)

Chrome

В одном из самых популярных браузеров, естественно, есть встроенная функция для перевода сайтов на иностранных языках.

Вообще, обычно современная версия Chrome (по умолчанию) автоматически предлагает перевести веб-страничку, если ее язык отличается от вашего. Небольшое окно с предложением появляется в верхнем углу экрана, как только вы заходите на иностранный сайт.

Если этого окна нет — обратите внимание на значок в адресной строке браузера. Щелкнув по нему — вы сможете автоматически перевести текущую веб-страничку (см. пример ниже).

Переводим главную страничку Википедии

Обратите внимание, что качество перевода довольно-таки неплохое: с сайтом можно вполне комфортно работать (просто лет 5-10 назад о таком переводе можно было только мечтать. Смысл многих фраз просто не переводился и приходилось многое домысливать).

Страничка на русском!

Если у вас нет такого значка и браузер вам не предлагает совсем ничего, когда вы заходите на иностранные сайты, то:

1. откройте настройки (страничка: chrome://settings/ );
2. затем внизу экрана раскройте «Дополнительные» настройки;
3. в разделе «Языки» обратите внимание на настройку «Предлагать перевод страниц, если их язык отличается от используемого в браузере» (включите ее, если она у вас выключена);
4. обновите страничку на иностранном языке (кнопка F5 в браузере).

Языки — настройки в Chrome

Если у вас очень старая версия Chrome, то просто обновите (переустановите) браузер (ссылка на официальный сайт приведена чуть выше).

Яндекс-браузер

Прямой конкурент Chrome. Что касается перевода: то в чем-то он лучше, чем в Chrome, в чем-то хуже. В плане использования — то разницы нет: при открытии сайта на английском (например), также в верхнем меню появляется предложение перевести на русский. Если соглашаетесь — видите оптимизированную страничку, перевод достаточно качественный (см. пример ниже).

Если у вас не появляется сообщение о возможности перевода странички, то скорее всего опция отключена в настройках браузера. Чтобы включить, необходимо:

1. открыть параметры;
2. нажать на кнопку просмотра дополнительных опций;
3. в разделе «Языки» проверьте, чтобы стояли три галочки: «Предлагать перевести страницы, язык которых отличается от языка интерфейса», «Предлагать перевод слов и фраз при выделении текста», «Переводить слова по наведению курсора и нажатию кнопки Shift».

Языки — настройки Яндекс-браузера

Собственно, задав подобные настройки, обновите страничку (клавиша F5) и посмотрите на верхнее меню: браузер должен предложить осуществить перевод.

Opera

К сожалению, непосредственно переводчик в сам браузер не встроен. Однако, для перевода есть большое число различных дополнений (аддоны). Я рекомендую попробовать дополнение Translator (ссылку на него привел чуть выше).

После его установки, в правом верхнем углу у вас появится небольшой значок. Когда вы зашли на иностранный сайт — вы можете щелкнуть по этому значку и у вас откроется небольшое окно:

1. в нем можно перевести отдельные фразы и словосочетания;
2. а можно перейти по ссылке «Перевести активную страницу. » — затем должна открыться новая вкладка с полным переводом странички.

Перевод в OPERA

Перевод осуществляется технологией Google (кстати, вам будет рекомендовано установить Chrome). В принципе, далее можете переходить по любым ссылкам на сайте — следующие открытые странички будут переводиться в этой вкладке автоматически (каждый раз открывать аддон ненужно!).

Открывается новая вкладка с результатами

Firefox

Firefox аналогичен Opera — также не имеет встроенного переводчика. Поэтому, чтобы добавить данную функцию в браузер — придется использовать какое-нибудь дополнение (аддон). Их, конечно, сотни, но протестировав с десяток из них — я все же пришел к выводу, что выигрывает Google Translator (ссылку привел выше).

Буква «T» в Firefox

Аддон крайне простой: после его установки у вас в верхнем меню программы появится значок с буквой «T». Достаточно щелкнуть по нему левой кнопкой мышки — и ваша страничка будет переведена. Быстро и удобно!

В HTML5 добавлен новый атрибут translate

В HTML5 недавно добавился новый атрибут — translate . На трёх семинарах MultilingualWeb, которые мы провели за последние два года, идея такого булева флага — «переводить или не переводить» постоянно вызывает довольно большой интерес у локализаторов, создателей текста, и всех тех, кто работает с языковыми технологиями.

Как это работает?

Обычно либо автор текста, либо среда вывода, которая автоматически формирует текст, ставит этот атрибут в разметку страницы. Кроме того, в ситуации промышленного перевода локализаторы могут добавлять этот атрибут на стадии подготовки перевода, чтобы избежать множества ошибок перевода при большом количестве языков в одном тексте.

На рендеринге страницы этот атрибут никак не сказывается (впрочем, можно добавить к нему свои стили, если вы найдёте для этого повод). Планируется, что этот атрибут в основном будет полезен для тех инструментов, которые используются в процессе перевода текста — будь это тщательная работа профессиональных переводчиков, быстрые API или облачные сервисы перевода коротких текстовых фрагментов.

Этот атрибут может быть применён к любому элементу, и может иметь одно из двух значений: yes или no . Если значение — no , инструменты перевода должны предохранять текст внутри элемента от перевода. Этот инструмент может быть автоматической системой перевода (как, например, в онлайн-сервисах Google или Microsoft) или профессиональной системой перевода, которая не будет давать переводчику случайно изменить текст.

Если установить этот флаг на элемент, то же самое значение будет применено ко всем вложенным элементам и атрибутам этих элементов.

Для того, чтобы система работала, не нужно использовать translate=»yes» . Если на странице нет атрибута translate , система перевода (или переводчик) должна предположить, что перевести нужно весь текст. Вряд ли значение yes будет использоваться широко, хотя оно может быть очень полезно, если вам нужно переопределить значение флага translate на родительском элементе и указать кусочки текста, которые должны быть переведены. Например, вы можете захотеть перевести комментарии на обычном языке в исходном коде, а сам код оставить без перевода.

Зачем это нужно?

Потребность в этом встречается довольно-таки часто. В спецификации HTML5 есть пример с игрой про пчелу и мёд. Вот похожий, но на этот раз реальный пример из моего опыта работы в Xerox, где документация, которая переводилась на другой язык, относилась к устройству, на котором текст находился прямо на «железе» и поэтому не переводился.

Оригинальный текст на английском — прим. переводчика. Текст при переводе на русский язык — прим. переводчика.

Вот ещё несколько примеров текста из жизни, которым принесет пользу атрибут translate . Отрывок из книги, цитирующий название работы.

Оригинальный текст на английском — прим. переводчика. При переводе на русский язык. На русском языке в таких случаях, впрочем, название работы обычно принято переводить — прим. переводчика.

Следующий пример со страницы о французском хлебе — «хлеб» по-французски «pain».

Оригинальный текст на английском — прим. переводчика. При переводе на русский язык. Речь идет о французской компании, которая называется «french pain» — прим. переводчика.

Таким образом, добавив на вашу страницу атрибут translate , вы поможете читателям лучше понять ваш текст, если они читают его через системы автоматического перевода, и значительно сэкономить денежные и временные затраты системам перевода с большим потоком информации на разных языках.

Как обстоят дела у Google Translate и Microsoft Translator?

Службы перевода Google и Microsoft и ранее предоставляли возможность предохранять текст от перевода посредством добавления разметки, но делали они это (несколькими) разными способами. Будем надеяться, что новый атрибут очень поможет тем, что предоставит стандартный подход.

И Google, и Microsoft в настоящее время поддерживают синтаксис , но замена названия класса атрибутом — формальной частью языка — сделает эту функцию гораздо более надежной, особенно в более широких контекстах. Например, инструмент переводчика может всегда считать, что HTML5-атрибут translate значит именно то, что он должен значить. Становится проще портировать эту идею и для других сценариев использования: скажем, для других API перевода или стандартов локализации (например, XLIFF).

Кстати, онлайн-сервис перевода компании Microsoft (которая, собственно, и предложила флаг translate в HTML5 некоторое время назад) уже поддерживает translate=»no» . До сих пор, конечно, это был проприетарный атрибут, и Google не поддерживал его. Однако, буквально вчера утром я совершенно случайно узнал, что Webkit и Chromium только что добавили поддержку атрибута translate , а вчера днем Google добавил поддержку translate=»no» к своему сервису онлайн-перевода. Вот результаты нескольких тестов, которые я провел этим утром. Ни Microsoft, ни Google пока не поддерживают переопределение translate=»yes» . Статья опубликована 22 февраля 2012 года (прим. переводчика)

Во всех этих проприетарных системах, впрочем, есть масса нестандартных способов синтаксически выразить эту же идею (даже если мы говорим только о Google и Microsoft).

Так, Microsoft поддерживает style=»notranslate» . Google не поддерживает этот синтаксис в списке возможных флагов для своего онлайн-сервиса перевода, но зато у них есть варианты, которые недоступны в сервисе Microsoft.

Например, если у вас есть целая страница, которая не должна переводиться, можете добавить внутри элемента вашей страницы, и Google не будет переводить никакой текст на этой странице. А еще они поддерживают . Конечно, это не должно быть специфично для Google, и единообразный способ делать это, то есть translate=»no» для элемента — гораздо более удачное решение.

Также непонятно, кстати, и с тем, и с другим сервисом перевода, как делать доступными для перевода вложенные элементы внутри элемента, для которого translate установлено в значении no — а это иногда может понадобиться.

Как говорилось выше, новый HTML5-атрибут использует простую и стандартную возможность HTML, которая может заменить и упростить все эти различные подходы. И, конечно, это поможет авторам создавать такое текстовое содержимое, настройки локализации которого будут работать и с другими системами.

А почему не использовать просто атрибут lang ?

Конечно, во время дискуссий о том, как правильно реализовать флаг translate , кто-нибудь обязательно должен был предложить именно это, но перегружать текст метками языков — это не решение. Например, языковая метка может указывать, какой орфографический словарь использовать для проверки какого текста. Это не имеет ничего общего с тем, нужно переводить текст или нет. Это разные концепции. Если в документе, где у элемента указан lang=»en» , дальше на странице вы поставите lang=»notranslate» , орфография в тексте не будет проверяться, потому что указанный язык уже не английский. Кроме того, стили для lang перестанут работать, голосовые браузеры не будут правильно произносить текст и т.п.

Больше, чем просто атрибут translate

Рекомендация ITS (Internationalization Tag Set), сделанная W3C, предлагает использовать флаг возможности автоматического перевода в таком виде, как атрибут translate , только что добавленный к HTML5, но идёт дальше и описывает способ присвоить значение флага каким-либо элементам или наборам разметки по всему документу или в наборе документов. Например, вы можете определить (если так нужно для вашего содержимого), что по умолчанию все элементы

с указанным классом должны иметь флаг translate в значении no в каком-либо конкретном наборе документов.

Накануне публикации перевода был представлен первый рабочий черновик ITS 2.0, следующей версии спецификации — прим. редактора.

Microsoft уже предлагает что-то в этом духе, хотя их подход предоставляет гораздо меньше возможностей, чем рекомендация ITS. Если вы пишете где-либо на странице (или в виджете) , то эта строчка гарантирует, что все CSS-классы, перечисленные после директивы notranslateclasses , будут вести себя так же, как класс notranslate .

Кроме того, движки автоматического перевода Microsoft и Google не переводят содержимое элементов . Впрочем, обратите внимание, что относительно этого у вас особенно нет выбора — нет никаких инструкций относительно того, как переопределить это значение, если вы хотите, чтобы содержимое вашего элемента всё же было бы переведено.

Кстати, в ближайших планах W3C есть организаций новой рабочей группы совместно с проектом Европейской Комиссии — MultilingualWeb-LT — чтобы дальше развивать идеи по спецификации ITS и разработать ряд её практических реализаций. Помимо всего прочего, эта группа будет искать новые способы интеграции нового атрибута translate в процессы и стандарты индустрии локализации. Ждите, скоро всё будет!

Перевод оригинальной записи «HTML5 adds new translate attribute» Ричарда Ишиды (Richard Ishida).

Комментарии +

И до сих пор этот атрибут не поддерживается автоматическими переводчиками (7 августа 2013 года).

Добрый день!
Открываю сайт с телефона. Никакие теги не помогли побороть переводчик. Он настырно предлагает перевести страницу.

Автоматический перевод Вашего сайта с помощью JS скрипта Google Translate

На многих сайтах можно встретить флаги стран, при нажатии на которые происходит автоматический перевод текущей страницы сайта на выбранный язык. Данная функция очень полезна для не русскоязычной аудитория, которая случайно набрела на оставленную Вами полезную информацию. Помню как-то сам набрел на таджикский-маджикский сайт, на котором был ответ на давно тревоживший мою голову вопрос и как я долго пытался понять смысл.

Существующие способы автоматического перевода сайта на другие языки

В Интернете я нашел два Web-сервиса, которые позволяют организовать у себя на сайте перевод страницы на другой язык. Это Convey This и Google Translate, о которых пойдет речь ниже.

Такие кнопки можно добавить для всех стран, которые поддерживаются сервисом, как и делают это многие вебмастера. Они добавляют все доступные страны. На мой взгляд, следует выбрать только несколько стран, аудитория которых посещает Ваш сайт. Я на своем блоге выбрал 3 языка: английский, немецкий и французский. Но хозяин — барин.

Автоматический перевод Вашего сайта на другие языки можно сделать:

С помощью сервиса от Convey This. Как оно работает я не знаю, не пробовал, но выглядит это так:

С помощью WEB -сервиса от всемогущего Google. Называется это Google Translate. Как это все работает можно посмотреть на этом блоге. Качество работы можно отнести к терпимому. Короче, это лучше чем никак.

Заставить Google Translate работать можно

1. пройдя по ссылке https://translate.google.com/translate_tools и выполнив простые действия. В итоге может получится вот так:
   • установив html-код на свой сайт и загрузив сами изображения флагов и поместив в директорию /images/ Вашего сайта:

В итоге получится так:

Итог и свои наработки

Выше были представлены готовые решения, которые поставить сможет даже моя мама: открыл сайт, выбрал нужные языки, добавил полученный код на html-страницу своего сайта и остается только ждать наплыва забугорных пользователей.

Если честно, когда я увидел реализацию этих методов, то мне стало грустно. Ни в одном из них нет свободы выбора и места где можно дать волю своей фантазии. Везде присутствует шаблонный вид, который со временем будет у каждого НЕ ленивого вебмастера на сайте или блоге.

Я пошел другим путем, путем AdminWay. Результат этого пути можно посмотреть на этом блоге в верхнем правом углу.

Делается это просто. Так как я для своего блога выбрал только 3 языка, то и приведенный метод только для трех, но Вы всегда его сможете расширить сами.

Добавление кнопок для автоматического перевода на 3 языка

1. Добавляем изображения флагов к себе на сайт в директорию /images/
2. Добавляем приведенный html-код в то место, где хотите увидеть флаги:
3. Добавляем приведенный код в Ваш CSS шаблон:

Я надеюсь мне удалось пролить свет на проблему автоматического перевода сайтов на другие языки. Если Вы знаете другой способ перевода сайта на другой язык, сообщите.

Есть мнение, что Google умеет индексировать ссылки использующие JS, так что возможно от приведенной информации будет еще больше пользы в будущем. Поживем увидим.

1. Игорь , 10 Июнь 2010, 10:07 #

У меня вопрос относительно последствий с дизайном страницы. Понятно, что за “бесплатное” приходится чем то расплачиваться. К примеру фреймом от Гугла. Но я вот полистал на гугле раздел AJAX API для Google Переводчика, там мне кажется есть возможность обойтись без фрейма с верху страницы. Не затруднит вас примером кода для кнопочки? как можно функцию обработки страницы вызвать посредством нажатия кнопки? А то я в скрипте не силен.

Игорь: У меня вопрос относительно последствий с дизайном страницы. Понятно, что за “бесплатное” приходится чем то расплачиваться. К примеру фреймом от Гугла. Но я вот полистал на гугле раздел AJAX API для Google Переводчика, там мне кажется есть возможность обойтись без фрейма с верху страницы. Не затруднит вас примером кода для кнопочки? как можно функцию обработки страницы вызвать посредством нажатия кнопки? А то я в скрипте не силен.

Я посмотрю, что можно сделать

Спасибо, все работает! А можно сделать картинки по-крупнее?

Павел: Спасибо, все работает! А можно сделать картинки по-крупнее?

Можно конечно. Поискать флаги по крупнее и сделать по аналогии с предложенным. 🙂

Установил перевод от гугл(второй вариант), поработал несколько дней. Теперь выбрасывает на страницу перевода с окном ввода текста или адреса. Почему?

Доброго дня!
Подскажите, не решился ли вопрос убрать фрейм от гугла вверху страницы?
Спасибо

>SergLI
Пока решение не найдено.

Вот без фрейма — http://translate.googleusercontent.com. – получается путем открытия переведенной страницы в новой закладке. Именно ПЕРЕВЕДЕННОЙ

Разница очевидна, но как добиться?
Гораздо интересней автоматический перевод – он сохраняет сессии и не меняет адрес страницы.

Виктор: Вот с фреймом http://www.google.com/translate.
… Разница очевидна, но как добиться?
Гораздо интересней автоматический перевод – он сохраняет сессии и не меняет адрес страницы.
getQuotation(‘Виктор’,‘Цитировать’);

Спасибо за ссылки. Обязательно посмотрю и отпишусь. Самого заинтересовала эта возможность.

А как насчет взаимодействия с API ключами Яндекс карт? Если вписан скрипт с API ЯндексКарт, Google Translate выкидывает алерт с сообщением “неправильный ключ”

Подскажите, какие изменения в код необходимо внести, чтобы флажки не вертикально один над одним стояли, а в линию (горизонтально).
Спасибо!

Подскажите каким лучше всего способом переводить сайт!

1.- Есть компонент JoomFish. Для того чтобы он начал работать нужно с начало перевести материалы сайта с русского языка на нужный язык и данные материал загрузить в поле ввода компонента JoomFish. Потом в нужное место выводятся иконки флажков и при нажатии на флажок страны сайт переводиться на язык этой страны. Имеется большая проблема. Эта рутинная работа по переводу каждого текста. Зато переводиться всё.

2.- Это можно сделать с помощью WEB -сервиса Google. Вот здесь – http://translate.google.com/translate_tools После этих шагов на сайте в нужном месте также будут флаги нужных стран для перевода. Такое можно создать и с помощью отдельных компоентов от Googla – Google V2, GTranslate, AJAX Translator Plugin и другие. Однако тоже иметься проблема – в результате перевода сайта показывается фрейм Google переводчика. Все от этого фрейма хотят избавиться. Как можно от него избавиться?

Однако! По химичив, я обнаружил вот что!

Сайт с фреймом – http://www.google.com/translate. При нажатии на любую ссылочку на сайте ссылка в брузере не изменяется.

Сайт без фрейма – http://translate.googleusercontent.com. При нажатии на любую ссылочку на сайте ссылка в браузере изменяется. Кажется так лучше! Если да, то для удобства пользователей можно на сайт закачать флажки и картинки флажков отметить данными ссылочками. То есть для англоязычного сайта в американский флажок вставить эту ссылку – http://translate.googleusercontent.com. А для грузинскоязычной версии сайта можно воспользоваться этой ссылочкой – http://translate.googleusercontent.com. и вставить эту ссылочку в грузинский флажок. Тут есть тоже проблема. Дополнительные исходящие (внешние) ссылки на сайте. И Яндекс может забанить, думая о том что сайт продаёт ссылки. А также ссылки в браузере в глазах посетителей выглядят не красиво.

Так каким лучше всего способом пользоваться переводом?

Я думая Yandex Вас не забанит за такое, это конечно мое ИМХО, которое основано на личном опыте

Sergey: Подскажите, какие изменения в код необходимо внести, чтобы флажки не вертикально один над одним стояли, а в линию (горизонтально). Спасибо!

также интересует этот вопрос. надеюсь на Вашу помощь

Sergey: Приветствую Вас!

Подскажите, какие изменения в код необходимо внести, чтобы флажки не вертикально один над одним стояли, а в линию (горизонтально).
Спасибо!

Тёма: также интересует этот вопрос. надеюсь на Вашу помощь

• Sanyaha , 8 Май 2012, 15:07 #

В настройках gtranslate есть пункт Orientation в нем поставить горизонтальную или вертикальную по нужде!bq.. Mut@NT: Sergey: Приветствую Вас!Подскажите, какие изменения в код необходимо внести, чтобы флажки не вертикально один над одним стояли, а в линию (горизонтально). Спасибо!Тёма: также интересует этот вопрос. надеюсь на Вашу помощьВ коде:.lang_en, .lang_de, .lang_fr добавить: .lang_en, .lang_de, .lang_fr

В настройках gtranslate есть пункт Orientation в нем поставить горизонтальную или вертикальную по нужде!

Проблема: при переходе на какой-то язык, на другой уже перейти невозможно.
Решение: подправим твой код и обойдемся без css…

Соответственно вместо “Ваш сайт” вставляем адрес вашего сайта.

Serg: Проблема: при переходе на какой-то язык, на другой уже перейти невозможно.
Решение: подправим твой код и обойдемся без css…
…

Будет правильнее, спасибо.

Зайдите сюда: http://translate.google.com/. найдите такой текст:
Переводите текст с помощью кнопки на панели инструментов браузера

Чтобы получить перевод одним нажатием клавиши мыши, добавьте одну из кнопок на панель инструментов браузера. Тогда в любой момент, когда вы захотите перевести просматриваемую страницу, достаточно будет просто нажать кнопку. Перевести можно любую часть страницы, выделив ее перед нажатием кнопки.
Чтобы добавить кнопку, перетащите ее с этой страницы на панель инструментов браузера.

Чуть ниже в таблице найдите язык (или несколько) и перетащите с помощью мыши на боковую (либо личную) панель. Удачи!

• Mut@NT , 22 Февраль 2011, 07:22 #

Все правильно, только это никак не относится к переводу сайта на другой язык со стороны хостинга.
Для облегчения работы пользователя могу посоветовать Вам использовать в качестве браузера Google Chrome, там на автомате можно переводить сайты, язык которые отличаются от вашего.

Способ, как было тонко подмечено, годится для “случайных” посетителей. Так как сайт индексируется ПС только на русском… Толку для целевого привлечения иностранного трафика – ровно “0”.
Если нужен трафик – нужно чтобы в базе были тексты на всех языках, пусть даже и переведенные ГуглТранслейтом. Это громоздко, но альтернативы не вижу.