В 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 в процессы и стандарты индустрии локализации. Ждите, скоро всё будет!

Кнопка перевода сайта с русского на английский

Каким образом можно реализовать кнопку переключения языка сайта в виде иконки с буквами «EN», при клике на которую весь сайт «превращался» бы в англоязычный? Знаю про возможность использования сервиса Google Translate, но думаю, что этот вариант слишком топорный.

Отслеживать
11.5k 8 8 золотых знаков 42 42 серебряных знака 69 69 бронзовых знаков
задан 24 июл 2017 в 15:16
YourDeveloper YourDeveloper
1,067 1 1 золотой знак 11 11 серебряных знаков 23 23 бронзовых знака

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Если делать правильно, нужно использовать сторонние либы для перевода. Т.е. весь текст сайта хранится в «словаре», а когда нажимаешь кнопку — происходит выбор нужного словаря, меняется текст на сайте.

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

Вариант три (если сайт очень-очень маленький), просто делай дубли страниц с заменой текста.

Если вопрос был про то, как именно реализовать саму кнопку — все просто. Создаешь , две штуки с разными id. После этого JS-ом вешаешь обработчик событий. elementButton = document.getElementById(id);

На него вешаешь обработчик — elementButtom.addEventListener(«click», function());

Если делаешь ссылками — вообще никак не надо обрабатывать. Просто кидаешь линки на переведенные страницы.

Как сделать редирект на HTML

Читайте нашу статью, если хотите узнать, что такое, для чего используется и как настроить редирект HTML.

Что такое редирект

Редирект — это перенаправление пользователя с одной страницы на другую. Когда пользователь вводит в адресной строке один URL-адрес, браузер автоматически переводит его на другой URL. Перенаправление можно настроить как на сторонний сайт, так и с одной страницы на другую внутри одного сайта.

Чаще всего используются такие редиректы:

• 301 редирект — его настраивают, когда страница навсегда перенесена на другой URL. При таком редиректе поисковики индексируют только новый вариант страницы — на неё и попадает пользователь.
• 302 редирект — его настраивают, когда страница перенесена временно. В этом случае поисковые системы индексируют и старый, и новый вариант страницы.

Для чего используют редирект

HTML redirect на другую страницу используют в таких случаях:

• перенос сайта на другой домен. Лучше всего настраивать редирект на другой сайт, в тот момент, когда старый сайт еще ранжируется в поисковой выдаче;
• использование устаревших браузеров. Если часть посетителей пользуется старыми версиями браузеров, у них может не быть поддержки файлов Cookie и могут не работать другие способы перенаправления;
• показ новой информации с задержкой по времени — если нужно, чтобы редирект срабатывал не сразу. Допустим, вы проводите акцию на сайте и хотите привлечь к ней внимание. Для этого можно настроить переадресацию с главной страницы сайта на страницу акции;
• перенаправление пользователя на другую страницу сайта. Например, после оплаты покупки.
• перенос разделов на субдомены. Например, на странице вашего сайта site.ru/catalog был перечень услуг. Но набор услуг увеличивался, и со временем понадобилось перенести его на субдомен catalog.site.ru. В этом случае удобно настроить редирект с site.ru/catalog на catalog.site.ru;
• перенаправление нескольких доменов на один основной. Клиентам бывает сложно запомнить домен сайта. Поэтому часто владельцы сайтов регистрируют помимо основного домена схожие с ним доменные имена и настраивают редирект на основной сайт. Так клиенты с большей вероятностью попадут на основной сайт.

Настроить перенаправление можно несколькими способами:

• через панель управления хостингом,
• через файл .htaccess,
• с помощью скрипта редиректа PHP,
• через метатег HTML.

HTML-редирект может замедлить продвижение сайта в поисковых системах. Рекомендуем его использовать только при отсутствии поддержки PHP, на тарифе хостинга Host-Lite.

В инструкции ниже мы расскажем, как настроить редирект посредством HTML.

Что такое HTML-редирект

Редирект на HTML настраивается в коде индексного файла. Индексный файл чаще всего называется index.html. Внутри файла в блоке head нужно прописать специальный метатег Refresh. При использовании метатега Refresh перенаправление срабатывает в коде страницы. Это значит, что перенаправляет не скрипт на сервере, а именно браузер.

Допустим, вы сделали HTML-редирект со страницы index.html на new_index.html. В этом случае перенаправление будет работать по такой схеме:

1. Браузер запрашивает файл стартовой страницы index.html с сервера.
2. Сервер находит index.html и отвечает на запрос браузера.
3. Когда браузер открывает страницу index.html, он «читает» строки кода, которые прописаны в файле. Когда он доходит до строки с HTML-редиректом, то видит в ней упоминание файла new_index.html.
4. Браузер посылает запрос к серверу, на котором хранится new_index.html.
5. Сервер находит эту страницу и отвечает на запрос браузера.
6. Браузер открывает страницу new_index.html.

Метатег Refresh выглядит так:

Кастомный виджет googleTranslate для сайта

Получить доступ к переводчику сайтов больше нельзя. Это никак не отразится на тех, кто уже установил соответствующий плагин.

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

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

Как будет выглядеть наш пример:

Разметка демо-страницы

            
     
 
Машинный перевод сайта
 
Перевод сайта на другие языки при помощи 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 можно найти тут.

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

Теперь, имея контроль над нашим виджетом, мы можем без проблем реализовывать более сложные дизайны: