Установить переводчик на другие языки на сайт
Один из последних комментариев shpargalkablog.ru гласит: Сan you post this article in english. А значит наступил момент, когда нужно добавить на сайт функцию перевода страницы на другой язык.
Замечательное решение было предложено на DicasBlogger. Вместо установки соответствующего скрипта Google, достаточно указать ссылку на страницу уже переведённую им.
Вместо en — можно указать кодировку другой страны.
| af африканский | sq албанский | de немецкий | ar арабский |
| be белорусский | bg болгарский | ca каталонский | cs чешский |
| zh-CN китайский | ko корейский | ht креольский гаитянский | hr хорватский |
| da датский | sk словацкий | sl словенский | es испанский |
| et эстонский | fi финский | fr французский | cy валлийский |
| gl галицкий | el греческий | iw иврит | hi хинди |
| nl голландский | hu венгерский | id индонезийский | en английский |
| ga ирландский | is исландский | it итальянский | ja японский |
| lv латышский | lt литовский | mk македонский | ms малайский |
| mt мальтийский | no норвежский | fa персидский | pl польский |
| pt португальский | ro румынский | ru русский | sr сербский |
| sw суахили | sv шведский | tl тагальский | th тайский |
| tr турецкий | uk украинский | vi вьетнамский | yi идиш |
Вместо слова «Английский» можно поместить код изображения.
На данном блоге я воспользовалась специальными символами:
Приверженцы платформы Blogger могут ещё более «облегчить» код, добавив указанный ниже вариант в шаблон HTML:
32 комментария:
Анонимный У меня не работает последний код. Скажите, как правильно его устанавливать? Может, я что-то не так делаю, добавляя URL блогa? Петелина Наталья А можно вопрос для чайников 🙂 Куда именно этот код HTML нужно добавлять, ну в какое место точно? И какой значок переводчика при этом появится в блоге, где он будет, на боковой панельке? NMitra В гаджет HTML/JavaScript пишем первый вариант, тот который сверху.
Нижний вариант добавляем согласно статье http://shpargalkablog.ru/2011/03/kak-sdelat-odin-raz-na-vse-stati.html, туда, где он больше придется к месту. NMitra Анонимный, в нижний код не следует добавлять URL блога, data:blog.url — это блоггеровский . NMitra Анонимный, вносите так как указано выше. Только вместо Английский можете разместить свой вариант. NMitra Значок переводчика может быть абсолютно любым, например, американским флагом:
style=»border: 0px solid ; cursor: pointer; width: 32px; height: 32px;»
alt=»Google-Translate-Portuguese to Russian»
src=»http://lh4.ggpht.com/_mcq01yDJ2uY/SdkhG4bjxqI/AAAAAAAAAks/Ws6AzZdnZTw/United%20States%20of%20America%20%28USA%29.png» title=»Google-Translate-Portuguese to Russian»> NMitra Добавила скриншот в статью, надеюсь будет более понятно что к чему. NMitra Нужно ли составить код, включающий нескольких языков? Чтобы единственным необходимым действием было добавление его в гаджет HTML/JavaScript. С каким языками — английский. Петелина Наталья Спасибо, поставила, правда я думала будет кнопка или картинка на которую нужно кликать для перевода. Петелина Наталья Как поставить например такой переводчик, как здесь? http://teddymih.blogspot.com/ NMitra Установить необходимые параметры в http://translate.google.com/translate_tools, а именно «Шаг 3»-«Режим отображения-Автоматически». Полученный код добавить в гаджет HTML/JavaScript Петелина Наталья Спасибо 🙂 Петелина Наталья Установила «автоматически», правда я ничего не вижу (свою панель) так должно быть? NMitra Трудно сказать. Нужен аккаунт с иностранным IP. NMitra Панелька исправно показывается — протестировала. При выборе «Шаг 2» указала язык отличный от русского. katya В переводчике все языки на русском, как изменить, например английский English. NMitra Строку
&langpair=ru%7Cen&en=ru&ie=UTF8
заменить на
&langpair=en%7Cen&ru=en&ie=UTF8 Анонимный в админ панели хоста и разработчика сайта Я (владелец) не могу установить англ и немец языки просмотра своего сайта NMitra В данном случае мы просто ставим ссылку на страницу уже переведённую Гуглом. Можете поставить ту же ссылку и во время написания статьи. Поэтому мне ваш вопрос не совсем ясен. Здесь не нужна панель хостинга. EVGENIA MASLOBOEVA Как установить гаджеты — картинки, примерно как в этом блоге справа
http://acreativemint.typepad.com/a_creative_mint/ ? NMitra Посмотрите здесь http://shpargalkablog.ru/2010/08/gadzhet-htmljavascript-blogger.html#ikonki Анонимный Проблемка: если поставить вместо «en» например «fr», все равно переводит на английский. Что же оно так? Виктор Терпай «en» смените и здесь «ru%7Cen«. Для французского это будет ru%7Cfr !
Наталья, выделите кодировку и там, а то некоторые наверно не знают. NMitra Благодарю, Виктор, за ваш ответ, редко помощники у меня появляются! Подправила. sochialka gleb не работает. NMitra Вносите самый верхний код с ссылкой, нижний рассчитан для пользователей Blogger.
В HTML5 добавлен новый атрибут translate
В HTML5 недавно добавился новый атрибут — translate . На трёх семинарах MultilingualWeb, которые мы провели за последние два года, идея такого булева флага — «переводить или не переводить» постоянно вызывает довольно большой интерес у локализаторов, создателей текста, и всех тех, кто работает с языковыми технологиями.
Как это работает? Скопировать ссылку
Обычно либо автор текста, либо среда вывода, которая автоматически формирует текст, ставит этот атрибут в разметку страницы. Кроме того, в ситуации промышленного перевода локализаторы могут добавлять этот атрибут на стадии подготовки перевода, чтобы избежать множества ошибок перевода при большом количестве языков в одном тексте.
На рендеринге страницы этот атрибут никак не сказывается (впрочем, можно добавить к нему свои стили, если вы найдёте для этого повод). Планируется, что этот атрибут в основном будет полезен для тех инструментов, которые используются в процессе перевода текста — будь это тщательная работа профессиональных переводчиков, быстрые API или облачные сервисы перевода коротких текстовых фрагментов.
Этот атрибут может быть применён к любому элементу, и может иметь одно из двух значений: yes или no . Если значение — no , инструменты перевода должны предохранять текст внутри элемента от перевода. Этот инструмент может быть автоматической системой перевода (как, например, в онлайн-сервисах Google или Microsoft) или профессиональной системой перевода, которая не будет давать переводчику случайно изменить текст.
Если установить этот флаг на элемент, то же самое значение будет применено ко всем вложенным элементам и атрибутам этих элементов.
Для того, чтобы система работала, не нужно использовать translate=»yes» . Если на странице нет атрибута translate , система перевода (или переводчик) должна предположить, что перевести нужно весь текст. Вряд ли значение yes будет использоваться широко, хотя оно может быть очень полезно, если вам нужно переопределить значение флага translate на родительском элементе и указать кусочки текста, которые должны быть переведены. Например, вы можете захотеть перевести комментарии на обычном языке в исходном коде, а сам код оставить без перевода.
Зачем это нужно? Скопировать ссылку
Потребность в этом встречается довольно-таки часто. В спецификации HTML5 есть пример с игрой про пчелу и мёд. Вот похожий, но на этот раз реальный пример из моего опыта работы в Xerox, где документация, которая переводилась на другой язык, относилась к устройству, на котором текст находился прямо на «железе» и поэтому не переводился.
Click the Resume button on the Status Display or the CONTINUE button the printer panel.
Оригинальный текст на английском — прим. переводчика.
Нажмите кнопку «Продолжить» на дисплее состояния или кнопку CONTINUE на панели принтера.
Текст при переводе на русский язык — прим. переводчика.
Вот ещё несколько примеров текста из жизни, которым принесёт пользу атрибут translate . Отрывок из книги, цитирующий название работы.
The question in the title How Far Can You Go? applies to both the undermining of traditional religious belief by radical theology and the undermining of literary convention by the device of “breaking frame”…
Оригинальный текст на английском — прим. переводчика.
Вопрос в названии, How Far Can You Go?, относится и к отрицательному влиянию радикальной теологии на традиционные религиозные воззрения, и к отрицательному влиянию приема «разрыва рамок» на правила построения литературного произведения…
При переводе на русский язык. На русском языке в таких случаях, впрочем, название работы обычно принято переводить — прим. переводчика.
Следующий пример со страницы о французском хлебе — «хлеб» по-французски «pain».
Welcome to french pain on Facebook. Join now to write reviews and connect with french pain. Help your friends discover great places to visit by recommending french pain.
Оригинальный текст на английском — прим. переводчика.
Добро пожаловать на страницу french pain на Facebook. Присоединяйтесь, пишите отчёты и свяжитесь с french pain. Помогите друзьям узнать отличные новые места, порекомендовав им french pain.
При переводе на русский язык. Речь идёт о французской компании, которая называется «french pain» — прим. переводчика.
Таким образом, добавив на вашу страницу атрибут translate , вы поможете читателям лучше понять ваш текст, если они читают его через системы автоматического перевода, и значительно сэкономить денежные и временные затраты системам перевода с большим потоком информации на разных языках.
Как обстоят дела у Google Translate и Microsoft Translator? Скопировать ссылку
Службы перевода Google и Microsoft и ранее предоставляли возможность предохранять текст от перевода посредством добавления разметки, но делали они это (несколькими) разными способами. Будем надеяться, что новый атрибут очень поможет тем, что предоставит стандартный подход.
И Google, и Microsoft в настоящее время поддерживают синтаксис class=»notranslate» , но замена названия класса атрибутом — формальной частью языка — сделает эту функцию гораздо более надёжной, особенно в более широких контекстах. Например, инструмент переводчика может всегда считать, что 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 в процессы и стандарты индустрии локализации. Ждите, скоро всё будет!
Как перевести текст HTML-страницы?
Приложение выполняет парсинг HTML страницы. HTML страница имеет текст, картинки, таблицы и другое содержание. Язык текста на странице — «язык_1». Предполагается:
— перейти по ссылке сайта (сайты будут разные);
— сохранить страницу в БД (поле_1)(Сохранить первую страницу сайта);
— перевести страницу(на язык «язык_2»);
— сохранить страницу в БД (поле_2). А как сделать чтобы сохранилась структура страницы?
Как сделать чтобы приложение вернуло HTML страницу на языке «язык_2»? Т.е. сделать что-то, похожее на функцию перевода GoogleChrome: зашёл на любой сайт, и перевёл страницу на русский язык..
Отслеживать
20.2k 6 6 золотых знаков 37 37 серебряных знаков 81 81 бронзовый знак
задан 18 окт 2018 в 14:25
user9776818 user9776818
35 1 1 серебряный знак 7 7 бронзовых знаков
Приложение получит текст страницы. Приложение переведёт текст. с таким подходом никак, только переводить страницу кусками, и каждый кусок заменять на странице отдельно от других
18 окт 2018 в 14:32
@tym32167 Т.е. нужно подстраивать парсер под каждую страницу? Дополнил вопрос. Я хотел бы узнать есть ли какие-нибудь библиотеки или просто предложения как это можно решить?
18 окт 2018 в 14:57
ну вот будет у вас 10 секций на странице. В каждой секции будет свой текст. Вы хотите склеить текст всех 10 секций в одну строку и её перевести. Но как вы потом в переводе поймете, какой кусок перевода к какой секции относится?
18 окт 2018 в 15:03
@tym32167 Я понимаю. Я просто думал, может есть, что-то готовое для таких ситуаций. Вот ГуглХром это как-то делает. Хотя может можно сделать так: 1. взял текст из секции секция_1 ; 2. Перевёл текст; 3. Вернул текст в секцию секция_1 . Имеет место быть такое решение?
18 окт 2018 в 15:14
@user9776818, это пока единственный вариант, но и тут могут быть проблемы, когда, в секции не монолитный текст, а тоже присутствуют элементы, которые, могут выделять куски текста по цвету либо по начертанию
18 окт 2018 в 15:18
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Самое простое, что приходит в голову — рекурсивно обойти все элементы, спуститься до уровня текстовых узлов, перевести каждый из них по отдельности и заменить его содержимое переводом. Допустим, имеем такой код для перевода строки через API Яндекса (взято отсюда):
using System.Collections.Generic; using System.IO; using System.Net; using System.Text; using System.Threading.Tasks; using System.Net.Http; using Newtonsoft.Json; //Reference: System.Net.Http, Newtonsoft.Json namespace TranslateTest < class Translator < public static async TaskTranslate(string s, string lang) < if (s.Length >0) < string content = "text=" + WebUtility.UrlEncode(s); var cnt = new StringContent(content, Encoding.UTF8, "application/x-www-form-urlencoded"); HttpClient client = new HttpClient(); var response = await client.PostAsync( "https://translate.yandex.net/api/v1.5/tr.json/translate?lang=" + lang + "&key=APIKEY", cnt ); var stream = await response.Content.ReadAsStreamAsync(); using (var sr = new StreamReader(stream)) < string line; if ((line = sr.ReadLine()) != null) < if ((int)response.StatusCode != 200) throw new Exception(line); Translation translation; translation = JsonConvert.DeserializeObject(line); s = ""; foreach (string str in translation.text) < s += str; >> > return s; > else return ""; > > class Translation < public string code < get; set; >public string lang < get; set; >public string[] text < get; set; >> > Тогда код для перевода HTML-документа будет выглядеть так (у меня используется MSHTML):
using System; using System.Text; using System.Runtime.InteropServices; using System.Threading.Tasks; using System.Windows.Forms; //Reference: COM -> Microsoft HTML Object Library namespace TranslateTest < public partial class Form1 : Form < public Form1() < InitializeComponent(); >private async void button1_Click(object sender, EventArgs e) < string html; html = System.IO.File.ReadAllText("c:\\test\\test.html"); textBox2.Text = await TranslateDocument(html); >string lang = "en-ru"; public async Task TranslateDocument(string html) < mshtml.HTMLDocument doc = null; mshtml.IHTMLDocument2 d2 = null; mshtml.IHTMLDocument3 d = null; mshtml.IHTMLElementCollection body = null; mshtml.IHTMLElement bodyelem = null; mshtml.IHTMLDOMNode bodynode = null; try < //грузим документ в парсер doc = new mshtml.HTMLDocument(); d2 = (mshtml.IHTMLDocument2)doc; d2.write(html); //находим body d = (mshtml.IHTMLDocument3)doc; body = d.getElementsByTagName("body"); if (body.length == 0) throw new Exception("Fatal error: HTML has no BODY tag!"); bodyelem = body.item(0); bodynode = bodyelem as mshtml.IHTMLDOMNode; //рекурсивно переводим все узлы элемента body foreach (var node in bodynode.childNodes) < await TranslateNode(node); >return bodyelem.innerHTML; > finally < //освобождение ресурсов if (doc != null) Marshal.ReleaseComObject(doc); if (d2 != null) Marshal.ReleaseComObject(d2); if (d != null) Marshal.ReleaseComObject(d); if (body != null) Marshal.ReleaseComObject(body); if (bodyelem != null) Marshal.ReleaseComObject(bodyelem); if (bodynode != null) Marshal.ReleaseComObject(bodynode); >> public async Task TranslateNode(mshtml.IHTMLDOMNode node) < string val = ""; if (node.nodeType == 3) //text node < val = node.nodeValue; if (val.Trim().Length == 0) return; //пусто - нечего переводить var res = await Translator.Translate(val, lang); //переводим содержимое узла node.nodeValue = res; //меняем содержимое на перевод >else //element node < //не переводим скрипты и CSS if (node.nodeName.ToLower() == "script" || node.nodeName.ToLower() == "style") return; //обход дочерних узлов foreach (mshtml.IHTMLDOMNode x in node.childNodes) < await TranslateNode(x); >> > > > Пример исходного текста и перевода:
The Antarctic is a polar region around the Earth's South Pole, opposite the Arctic region around the North Pole. The Antarctic comprises the continent of Antarctica and the island territories located on the Antarctic Plate. The Antarctic region include the ice shelves, waters, and island territories in the Southern Ocean situated south of the Antarctic Convergence, a zone approximately 32 to 48 km (20 to 30 mi) wide varying in latitude seasonally. The region covers some 20 percent of the Southern Hemisphere, of which 5.5 percent (14 million km2) is the surface area of the Antarctic continent itself. All of the land and ice shelves south of 60°S latitude are administered under the Antarctic Treaty System. Biogeographically, the Antarctic ecozone is one of eight ecozones of the Earth's land surface.
Geography
The maritime part of the region constitutes the area of application of the international Convention for the Conservation of Antarctic Marine Living Resources (CCAMLR), where for technical reasons the Convention uses an approximation of the Convergence line by means of a line joining specified points along parallels of latitude and meridians of longitude. The implementation of the Convention is managed through an international Commission headquartered in Hobart, Australia, by an efficient system of annual fishing quotas, licenses and international inspectors on the fishing vessels, as well as satellite surveillance.
Most of the Antarctic region is situated south of 60°S latitude parallel, and is governed in accordance with the international legal regime of the Antarctic Treaty System. The Treaty area covers the continent itself and its immediately adjacent islands, as well as the archipelagos of the South Orkney Islands, South Shetland Islands, Peter I Island, Scott Island and Balleny Islands.
The islands situated between 60°S latitude parallel to the south and the Antarctic Convergence to the north, and their respective 200-nautical-mile (370 km) exclusive economic zones fall under the national jurisdiction of the countries that possess them: South Georgia and the South Sandwich Islands (United Kingdom; also an EU Overseas territory), Bouvet Island (Norway), and Heard and McDonald Islands (Australia).
Kerguelen Islands (France; also an EU Overseas territory) are situated in the Antarctic Convergence area, while the Falkland Islands, Isla de los Estados, Hornos Island with Cape Horn, Diego Ramírez Islands, Campbell Island, Macquarie Island, Amsterdam and Saint Paul Islands, Crozet Islands, Prince Edward Islands, and Gough Island and Tristan da Cunha group remain north of the Convergence and thus outside the Antarctic region.
Антарктике это полярные области вокруг Южного полюса Земли, противоположная Арктике, вокруг Северного полюса. Карта состоит из антарктического материка и островных территорий, расположенных на антарктической плиты. Антарктический регион включает шельфовые ледники, воды и островных территорий в Южный Океан расположенный к югу от антарктической конвергенции, зона примерно от 32 до 48 км (от 20 до 30 ми) широкий различающихся по широте сезонно. Регион охватывает около 20 процентов из Южного полушария, из которых 5,5 процента (14 млн. км2) площади Антарктического континента. Все земли и шельфовые ледники к югу от 60°южной широты применяются в рамках системы Договора об Антарктике. Биогеографически, экозона в Антарктике является одним из восьми экозонам земельных участков земной поверхности.
География
В морской части региона является область применения Международной конвенции по сохранению морских живых ресурсов Антарктики (АНТКОМ), где по техническим причинам в Конвенции используется аппроксимация сходимость линии с помощью линии, соединяющей указанные точки вдоль параллелей широты и меридианов долготы. Реализация конвенции осуществляется через международную комиссию со штаб-квартирой в Хобарте, Австралия, с помощью эффективной системы ежегодных квот, лицензий и международных инспекторов на рыболовных судах, а также спутниковое наблюдение.
Большинство Антарктический регион расположен к югу от 60°южной широты параллельно, и управляется в соответствии с международно-правовым режимом системы Договора об Антарктике. Области договора распространяется на континенте и прилегающих островах, а также архипелаги Южно-Оркнейские острова, Южные Шетландские острова, остров Петра I, Скотт островов и островов Баллени.
Острова, расположенные между 60°ю. ш параллельно Южной и Антарктической конвергенции на север, и их 200-мильной (370 км) исключительной экономической зоны находятся под национальной юрисдикцией стран, которые ими обладают: Южная Георгия и Южные Сандвичевы острова (Великобритания; также ЕС заморская территория), Остров Буве (Норвегия) и Острова Херд и Макдональд (Австралия).
Кергелен (Франция; также ЕС заморская территория) находятся в антарктической конвергенции зона, а Фолклендские острова, Исла де лос Эстадос, Орнос на острове с мыса Горн, Диего-Рамирес острова, Кэмпбелл остров, остров Маккуори, Амстердам и Сен-Поль острова Крозе, Принс-Эдуард острова, и остров Гоф и Тристан-да-Кунья группы остаются Северная сходимости и, следовательно, за пределами Антарктики.
Но недостаток в том, что данный метод генерирует слишком много мелких запросов к API, поэтому перевод большого документа будет длиться очень долго. Кроме того, качество перевода страдает, так как предложения будут дробиться на части и переводиться отдельно. Чтобы улучшить данный способ, необходимо придумать, как агрегировать запросы. Скорее всего, элемент, содержащий только инлайновые подэлементы (b, span и т.п.), нужно переводить как цельный кусок, но как провернуть это, сохранив форматирование, задача довольно сложная.
Кастомный виджет googleTranslate для сайта
Получить доступ к переводчику сайтов больше нельзя. Это никак не отразится на тех, кто уже установил соответствующий плагин.
Советуем пользователям переводить веб-страницы с помощью браузеров, имеющих встроенную функцию перевода.
Не сложно догадаться какой браузер имеет ввиду Google, но речь не об этом. Самое главное, что плагин все также остается рабочим и мы можем им пользоваться. Кроме того, за неимением возможности генерировать виджет, данная тема становиться еще более актуальной, ведь потребность в машинном переводе никуда не исчезла, а Google Translate, на мой взгляд, один из самых мощных инструментов для этого.
Как будет выглядеть наш пример:
Разметка демо-страницы
Кастомный виджет googleTranslate для сайта 
Машинный перевод сайта Перевод сайта на другие языки при помощи Google Translate Widget
Пример кастомоного виджета
Hello Мир.
Для корректной работы нашего кастомного виджета необходимо подключить файлы:
Содержимое style.css:
body < margin: 0; padding: 0; >.page < display: flex; min-height: 100vh; >/* Фиксируем позицию body, которую меняет панель гугла*/ .page_fix < top: 0 !important; position: static !important; >/* Прячем панель гугла */ .skiptranslate < display: none !important; >/* language */ .language < position: fixed; left: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; >.language__img < margin: 2px; cursor: pointer; opacity: .5; >.language__img:hover, .language__img_active < opacity: 1; >/* content */ .content
Разметка кастомного виджета:
Содержимое google-translate.js:
const googleTranslateConfig = < lang: "ru", >; function TranslateInit() < let code = TranslateGetCode(); // Находим флаг с выбранным языком для перевода и добавляем к нему активный класс $('[data-google-lang="' + code + '"]').addClass('language__img_active'); if (code == googleTranslateConfig.lang) < // Если язык по умолчанию, совпадает с языком на который переводим // То очищаем куки TranslateClearCookie(); >// Инициализируем виджет с языком по умолчанию new google.translate.TranslateElement(< pageLanguage: googleTranslateConfig.lang, >); // Вешаем событие клик на флаги $('[data-google-lang]').click(function () < TranslateSetCookie($(this).attr("data-google-lang")) // Перезагружаем страницу window.location.reload(); >); > function TranslateGetCode() < // Если куки нет, то передаем дефолтный язык let lang = ($.cookie('googtrans') != undefined && $.cookie('googtrans') != "null") ? $.cookie('googtrans') : googleTranslateConfig.lang; return lang.substr(-2); >function TranslateClearCookie() < $.cookie('googtrans', null); $.cookie("googtrans", null, < domain: "." + document.domain, >); > function TranslateSetCookie(code) < // Записываем куки /язык_который_переводим/язык_на_который_переводим $.cookie('googtrans', "/auto/" + code); $.cookie("googtrans", "/auto/" + code, < domain: "." + document.domain, >); > При смене языка добавляется куки с ключом googtrans и значением вида /ru/en
- /ru — это язык который переводим
- /en — это язык на который переводим
Это стандартное поведение, поэтому я им и воспользовался для кастомизации виджета. Кликая по флажкам необходимых языков, из атрибута data-google-lang в куки записываются соответствующие значение вида /auto/выбранный_язык. Затем происходит перезагрузка и auto заменяется на язык записанный отдельно в конфиг:
const googleTranslateConfig = < lang: "ru", >;Это сделано для того, чтобы мы не привязывались к одному языку. Если к примеру сайт переведен на 2 языка, русский и английски, то мы можем передать текущий язык в конфиг и правильно обработать его. Все доступные языки и их код стандарта ISO-639-1 можно найти тут.
Функции добавления и очисти куки я вынес отдельно, чтобы была возможность провести дополнительные проверки и вызвать в других местах. Важный момент, куки необходимо менять для основного домена и всех поддоменов.
Теперь, имея контроль над нашим виджетом, мы можем без проблем реализовывать более сложные дизайны: