AJAX API для Google Переводчика

AJAX API для Google Переводчика
- Руководство разработчика
- Площадка для экспериментов с кодом
- Справочное руководство по классам
  - API перевода
  - API транслитерации
  - API виртуальной клавиатуры^{Новинка!}

Руководство разработчика

AJAX API для Google Переводчика

Перевод и определение языка с помощью AJAX API для Google Переводчика
Транслитерация с помощью AJAX API для Google Переводчика
Добавление виртуальной клавиатуры с помощью AJAX API для Google Переводчика^{Новинка!}

Перевод и определение языка с помощью AJAX API для Google Переводчика

Благодаря AJAX API для Google Переводчика можно переводить и определять язык текста на веб-странице с помощью JavaScript.

Это новый API, поэтому при его использовании могут возникать проблемы, а документация по нему может не быть идеальной. Потерпите, пока мы заполним все пробелы, и приходите на форум разработчиков AJAX API, чтобы оставить отзывы и обсудить API.

Содержание

Аудитория

Введение: "Hello, World" AJAX API для Google Переводчика; Встраивание AJAX API для Google Переводчика на страницу; Обновления API

Примеры: Перевод; Определение языка; Определение поддержки отображения шрифтов Unicode; Определение языка оригинала при переводе; Брендирование; Дополнительные примеры

Подробные сведения об API: Поддерживаемые языки; Поддерживаемые пары языков для перевода^{Новый язык!}

Flash и другие среды, не использующие JavaScript: Фрагменты кода

Устранение неполадок

Справочное руководство по классам

Аудитория

Введение

"Hello, World" AJAX API для Google Переводчика

Проще всего начать изучение этого API с простого примера. В следующем примере определяется язык указанного текста и выполняется его перевод на английский язык.

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi">
    </script>
    <script type="text/javascript">

    google.load("language", "1");

    function initialize() {
      var text = document.getElementById("text").innerHTML;
      google.language.detect(text, function(result) {
        if (!result.error && result.language) {
          google.language.translate(text, result.language, "en",
                                    function(result) {
            var translated = document.getElementById("translation");
            if (result.translation) {
              translated.innerHTML = result.translation;
            }
          });
        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>
  </head>
  <body>
    <div id="text">??????????</div>
    <div id="translation"></div>
  </body>
</html>

Можно просмотреть этот пример здесь или изменить его и поэкспериментировать с аналогичным примером на площадке для экспериментов с кодом.

Встраивание AJAX API для Google Переводчика на страницу

Чтобы встроить AJAX API для Google Переводчика на свою страницу, воспользуйтесь загрузчиком AJAX API Google. Обычный загрузчик позволяет загрузить все необходимые AJAX API, в том числе API для Google Переводчика. Необходимо добавить тег скрипта AJAX API Google и вызвать метод google.load("language", "1"):

<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
  google.load("language", "1");
</script>

Первый тег скрипта загружает функцию google.load, которая позволяет загружать отдельные API Google. Функция google.load("language", "1") загружает версию 1 API для Google Переводчика. В настоящее время доступна версия 1 AJAX API для Google Переводчика, в будущем могут появиться новые версии. Подробнее об этом рассказано в обсуждении версий ниже.

Обновления API

Второй аргумент метода google.load обозначает версию используемого AJAX API для Google Переводчика. В настоящее время доступна версия 1 AJAX API для Google Переводчика, в будущем могут появиться новые версии.

При значительном изменении API мы увеличиваем номер версии и размещаем уведомление на сайте Google Code и в группе обсуждений AJAX API. Когда это происходит, мы поддерживаем обе версии не менее месяца, чтобы вы могли перевести свой код.

Команда AJAX API для Google Переводчика периодически обновляет API, чтобы исправить недавно обнаруженные ошибки и улучшить производительность. Эти исправления должны только повышать производительность и устранять ошибки, однако могут случайно нарушить работу некоторых клиентов API. Чтобы сообщить о подобных проблемах, воспользуйтесь группой обсуждений AJAX API.

Примеры

Ряд примеров доступен на площадке для экспериментов с кодом. Их можно редактировать и экспериментировать с ними, чтобы лучше понять, как использовать этот API.

Перевод

В этом примере показан простой перевод строки JavaScript:

google.language.translate("Hello world", "en", "es", function(result) {
  if (!result.error) {
    var container = document.getElementById("translation");
    container.innerHTML = result.translation;
  }
});

Просмотреть пример (translate.html)

Определение языка

В этом примере показано определение языка строки JavaScript. Возвращается код языка:

var text = "¿Dónde está el baño?";
google.language.detect(text, function(result) {
  if (!result.error) {
    var language = 'unknown';
    for (l in google.language.Languages) {
      if (google.language.Languages[l] == result.language) {
        language = l;
        break;
      }
    }
    var container = document.getElementById("detection");
    container.innerHTML = text + " is: " + language + "";
  }
});

Просмотреть пример (detection.html)

Определение поддержки отображения шрифтов Unicode

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

В этом примере показано определение поддержки отображения шрифтов:

var result = google.language.isFontRenderingSupported("hi");
var resultStr = "";
if (result == google.language.FontRenderingStatus.SUPPORTED) {
  resultStr = "Rendering for " + lang + " is supported.";
} else if (result == google.language.FontRenderingStatus.UNSUPPORTED) {
  resultStr = "Rendering for " + lang + " is not supported.";
} else {
  resultStr = "Unsupported language " + lang + " for font detection API.";
}
var resultDiv = document.getElementById("displayResultsDiv");
resultDiv.innerHTML += resultStr;

Просмотреть пример (fontdetection.html)

Определение языка оригинала при переводе

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

google.language.translate("Hello world", "", "es", function(result) {
  if (!result.error) {
    var container = document.getElementById("translation");
    container.innerHTML = result.translation;
  }
});

Просмотреть пример (autotranslate.html)

Брендирование и ссылки на Google

При использовании AJAX API Google в своем приложении важно показать пользователям логотип Google. Метод google.language.getBranding() поможет вам в этом. Этот метод принимает HTML-элемент DOM или соответствующий идентификатор, а также дополнительные параметры. Логотип присоединяется к указанному элементу.

// attach a "powered by Google" branding
<div id='branding'> </div>
...
google.language.getBranding('branding');

Логотип можно настроить с помощью CSS. Он может иметь один из базовых форматов: 'vertical' или 'horizontal'. Ниже представлен пример, где показаны разные форматы и возможности настройки логотипа с помощью CSS.

Просмотреть пример (branding.html)

Дополнительные примеры

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

Просмотреть пример (detect.html)

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

Просмотреть пример (translate.html)

Подробные сведения об API

Поддерживаемые языки

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

Африкаанс
Албанский
Амхарский
Арабский
Армянский
Азербайджанский
Баскский
Белорусский
Бенгальский
Бихарский
Болгарский
Бирманский
Каталанский
Чероки
Китайский (упрощенный и традиционный)
Хорватский
Чешский
Датский
Дивехи
Голландский
Английский
Эсперанто
Эстонский
Филиппинский
Финский
Французский
Галисийский
Грузинский
Немецкий
Греческий
Гуарани
Гуджарати
Иврит
Хинди
Венгерский
Исландский
Индонезийский
Инуктитут
Итальянский
Японский
Каннада
Казахский
Кхмерский
Корейский
Курдский
Киргизский
Лаосский
Латышский
Литовский
Македонский
Малайский
Малаялам
Мальтийский
Маратхский
Монгольский
Непальский
Норвежский
Ория
Пушту
Персидский
Польский
Португальский
Пенджаби
Румынский
Русский
Санскрит
Сербский
Синдхи
Сингальский
Словацкий
Словенский
Испанский
Суахили
Шведский
Таджикский
Тамильский
Телугу
Тайский
Тибетский
Турецкий
Украинский
Урду
Узбекский
Уйгурский
Вьетнамский

Поддерживаемые пары языков для перевода

В настоящий момент AJAX API для Google Переводчика определяет все перечисленные выше языки. Ниже перечислены языки, которые можно перевести. Любая пара языков из следующего списка может быть переведена. Чтобы узнать, можно ли перевести язык, используйте метод google.language.isTranslatable(languageCode);

Албанский
Арабский
Болгарский
Китайский (упрощенный и традиционный)
Каталанский
Хорватский
Чешский
Датский
Голландский
Английский
Эстонский
Филиппинский
Финский
Французский
Галисийский
Немецкий
Греческий
Иврит
Хинди
Венгерский
Индонезийский
Итальянский
Японский
Корейский
Латышский
Литовский
Мальтийский
Норвежский
Персидский^{Новинка!}
Польский
Португальский
Румынский
Русский
Испанский
Сербский
Словацкий
Словенский
Шведский
Тайский
Турецкий
Украинский
Вьетнамский

Flash и другие среды, не использующие JavaScript

Для разработчиков на Flash и разработчиков, которым нужен доступ к AJAX API для Google Переводчика из сред, не использующих JavaScript, API предоставляет простой интерфейс с архитектурой REST. Во всех случаях поддерживается метод GET, а ответ предоставляется в виде результата в формате JSON со встроенными кодами состояния. Для функции google.language.translate доступен метод POST. Приложения, использующие этот интерфейс, должны соответствовать всем существующим условиям использования. Особое внимание следует обращать на правильное представление себя в запросах. Приложения всегда ДОЛЖНЫ включать в свои запросы действительный и точный заголовок HTTP referer. Кроме того, желательно (но не обязательно) включать в каждый запрос действительный ключ API. Предоставляя ключ, приложение дает нам дублирующий механизм идентификации, который может понадобиться, чтобы связаться с вами для устранения возможных проблем.

Самый простой способ начать изучение этого интерфейса – попробовать его использовать. С помощью средства командной строки curl или wget выполните следующую команду:

curl -e http://www.my-ajax-site.com \
        'http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=hello%20world&langpair=en%7Cit'

Эта команда переводит (/ajax/services/language/translate) фразу Hello World (q=hello%20world) с английского языка на итальянский (langpair=en%7Cit). Тип Content-Type ответа – text/javascript; charset=utf-8. Из приведенного ниже ответа видно, что данные responseData идентичны свойствам, описанным в документации по объектам результатов.

{"responseData": {
    "translatedText":"Ciao mondo"
 },
 "responseDetails": null, "responseStatus": 200}

Помимо такого формата ответов, протокол также поддерживает классический обратный вызов JSON-P, который выполняется при наличии аргумента callback. Если он указан, объект JSON передается указанному обратному вызову в качестве аргумента.

callbackFunction(
{"responseData": {
  "translatedText":"Ciao mondo"
 },
 "responseDetails": null, "responseStatus": 200})

Наконец, этот протокол поддерживает аргументы callback и context. Если указать эти аргументы URL, ответ будет закодирован в виде прямого вызова JavaScript с подписью callback(context, result, status, details, unused). Обратите внимание на некоторую разницу в следующих команде и ответе.

curl -e http://www.my-ajax-site.com \
  'http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=hello%20world&langpair=en%7Cit&callback=foo&context=bar'

Эта команда, как и предыдущая, выполняет перевод, НО передает и аргументы callback и context. При наличии этих аргументов вместо объекта JSON в ответе возвращается вызов JavaScript, а объект JSON передается через параметр result.

foo('bar', {"translatedText":"Ciao mondo"}, 200, null)

Фрагменты кода

В документацию по AJAX API поиска включен набор фрагментов кода, которые демонстрируют доступ к службе при использовании Flash, Java и PHP. Относящаяся к языку часть кода одинакова для всех AJAX API, поэтому вместо повторения этих фрагментов кода, посмотрите код по этой ссылке.

Полная документация по этому интерфейсу представлена в справочном руководстве по классам.

Устранение неполадок

При наличии проблем с кодом стоит сделать следующее.

Поищите опечатки. Помните, JavaScript – язык, чувствительный к регистру.
Воспользуйтесь отладчиком JavaScript. В Firefox можно использовать консоль JavaScript или расширение FireBug. В IE можно использовать Отладчик сценариев (Microsoft).
Поищите ответ в группе обсуждений AJAX API. Если там нет сообщения, которое бы отвечало на ваш вопрос, разместите вопрос в группе, сопроводив его ссылкой на веб-страницу, где видна проблема.

Транслитерация с помощью AJAX API для Google Переводчика

С помощью AJAX API для Google Переводчика можно добавить возможность транслитерации любого текстового поля или области на вашей веб-странице. Это даст пользователям возможность печатать на любом языке с помощью клавиатуры с английской раскладкой.

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

Содержание

Аудитория

Введение: "Hello, World" AJAX API для Google Переводчика; Встраивание API транслитерации на страницу; Обновления API

Примеры: Управление транслитерацией с одним языком; Управление транслитерацией с несколькими языками; Транслитерация с пользовательским элементом управления; Транслитерация с помощью низкоуровневого API

Подробные сведения об API: Поддерживаемые языки; Поддержка языков с письмом справа налево^{Новинка!}; Настройка видимых компонентов; Совместимость с браузерами; Тип HTML-содержания

Устранение неполадок

Справочное руководство по классам

Аудитория

Эта документация рассчитана на тех, кто знаком с программированием на JavaScript и принципами объектно-ориентированного программирования. В Интернете можно найти множество руководств по JavaScript. Кроме того, вы должны понимать, что такое транслитерация с точки зрения пользователя. Прочитайте информацию о том, как использовать транслитерацию для индийских или арабских языков. Дополнительные сведения можно найти в этой статье.

Эта концептуальная документация не является полной и исчерпывающей. Она лишь позволяет быстро ознакомиться с транслитерацией и начать использовать ее на своей странице.

Введение

"Hello, World" транслитерации с помощью AJAX API для Google Переводчика

Проще всего начать изучение этого API с простого примера. В следующем примере включается транслитерация текстовой области на язык хинди, благодаря чему пользователи могут печатать на хинди с помощью клавиатуры с английской раскладкой. Кроме того, пользователи могут переключаться между английским и хинди с помощью горячих клавиш Ctrl+G. Информацию о выборе другого языка можно найти в справочном руководстве по классам API.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://www.google.com/jsapi">
    </script>
    <script type="text/javascript">

      // Load the Google Transliteration API
      google.load("elements", "1", {
            packages: "transliteration"
          });

      function onLoad() {
        var options = {
            sourceLanguage:
                google.elements.transliteration.LanguageCode.ENGLISH,
            destinationLanguage:
                [google.elements.transliteration.LanguageCode.HINDI],
            shortcutKey: 'ctrl+g',
            transliterationEnabled: true
        };

        // Create an instance on TransliterationControl with the required
        // options.
        var control =
            new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textbox with id
        // 'transliterateTextarea'.
        control.makeTransliteratable(['transliterateTextarea']);
      }
      google.setOnLoadCallback(onLoad);
    </script>
  </head>
  <body>
    Type in Hindi (Press Ctrl+g to toggle between English and Hindi)<br>
    <textarea id="transliterateTextarea" style="width:600px;height:200px"></textarea>
  </body>
</html>

Просмотреть пример на площадке для экспериментов с кодом

Встраивание API транслитерации на страницу

AJAX API транслитерации входит в модуль "elements". Чтобы встроить API транслитерации Google, сначала нужно добавить тег скрипта AJAX API Google:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Этот скрипт загрузит функцию google.load, которая позволит загружать отдельные API Google. Вызов функции google.load для загрузки API транслитерации Google выглядит следующим образом:

<script type="text/javascript">
  google.load("elements", "1", {
      packages: "transliteration"
  });
</script>

При этом будет загружена версия 1 API транслитерации. В настоящее время доступна версия 1 API транслитерации, в будущем могут появиться новые версии. Подробнее об этом рассказано в обсуждении версий ниже.

Обновления API

Второй аргумент функции google.load обозначает версию используемого AJAX API для Google Переводчика. В настоящее время доступна версия 1 API транслитерации, в будущем могут появиться новые версии.

Примеры

Управление транслитерацией с одним языком

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

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://www.google.com/jsapi">
    </script>
    <script type="text/javascript">

      // Load the Google Transliteration API
      google.load("elements", "1", {
            packages: "transliteration"
          });

      function onLoad() {
        var options = {
          sourceLanguage: 'en', // or google.elements.transliteration.LanguageCode.ENGLISH,
          destinationLanguage: ['hi'], // or [google.elements.transliteration.LanguageCode.HINDI],
          shortcutKey: 'ctrl+g',
          transliterationEnabled: true
        };
        // Create an instance on TransliterationControl with the required
        // options.
        var control =
            new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textfields with the given ids.
        var ids = [ "transl1", "transl2" ];
        control.makeTransliteratable(ids);

        // Show the transliteration control which can be used to toggle between
        // English and Hindi.
        control.showControl('translControl');
      }
      google.setOnLoadCallback(onLoad);
    </script>
  </head>
  <body>
  <center>Type in Hindi (Press Ctrl+g to toggle between English and Hindi)</center>
    <div id='translControl'></div>
    <br>Title : <input type='textbox' id="transl1"/>
    <br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
  </body>
</html>

Просмотреть пример (singlelangtransliteration.html)

Управление транслитерацией с несколькими языками

Этот пример очень похож на пример выше, но он также содержит элемент управления для выбора языка транслитерации. В этом примере с помощью параметра destinationLanguage указывается начальное значение языка транслитерации, а также перечисляются все языки, поддерживаемые на странице. Например, чтобы по умолчанию выполнять транслитерацию на язык телугу, а в качестве дополнительных вариантов в раскрывающемся меню задать тамильский язык и язык малаялам, нужно указать ['te', 'ta', 'ml'] в качестве значения параметра destinationLanguage.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://www.google.com/jsapi">
    </script>
    <script type="text/javascript">

      // Load the Google Transliteration API
      google.load("elements", "1", {
            packages: "transliteration"
          });

      function onLoad() {
        var options = {
          sourceLanguage: 'en',
          destinationLanguage: ['hi','kn','ml','ta','te'],
          shortcutKey: 'ctrl+g',
          transliterationEnabled: true
        };

        // Create an instance on TransliterationControl with the required
        // options.
        var control =
            new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textfields with the given ids.
        var ids = [ "transl1", "transl2" ];
        control.makeTransliteratable(ids);

        // Show the transliteration control which can be used to toggle between
        // English and Hindi and also choose other destination language.
        control.showControl('translControl');
      }
      google.setOnLoadCallback(onLoad);

    </script>
  </head>
  <body>
  <center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
    <div id='translControl'></div>
    <br>Title : <input type='textbox' id="transl1"/>
    <br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
  </body>
</html>

Просмотреть пример (multilangtransliteration.html)

Транслитерация с пользовательским элементом управления

Это более сложный пример, в котором показано создание пользовательского элемента управления транслитерацией. В нем используется флажок для переключения между английским языком и хинди при наборе текста, а также раскрывающийся список для изменения языка транслитерации. Кроме того, в нем регистрируются обработчики различных событий, которые может вызывать TransliterationControl. Информацию о возможных событиях можно найти в справочном руководстве по классам API.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://www.google.com/jsapi">
    </script>
    <script type="text/javascript">

      // Load the Google Transliteration API
      google.load("elements", "1", {
            packages: "transliteration"
          });

      var transliterationControl;
      function onLoad() {
        var options = {
            sourceLanguage: 'en',
            destinationLanguage: ['ar','hi','kn','ml','ta','te'],
            transliterationEnabled: true,
            shortcutKey: 'ctrl+g'
        };
        // Create an instance on TransliterationControl with the required
        // options.
        transliterationControl =
          new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textfields with the given ids.
        var ids = [ "transl1", "transl2" ];
        transliterationControl.makeTransliteratable(ids);

        // Add the STATE_CHANGED event handler to correcly maintain the state
        // of the checkbox.
        transliterationControl.addEventListener(
            google.elements.transliteration.TransliterationControl.EventType.STATE_CHANGED,
            transliterateStateChangeHandler);

        // Add the SERVER_UNREACHABLE event handler to display an error message
        // if unable to reach the server.
        transliterationControl.addEventListener(
            google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE,
            serverUnreachableHandler);

        // Add the SERVER_REACHABLE event handler to remove the error message
        // once the server becomes reachable.
        transliterationControl.addEventListener(
            google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE,
            serverReachableHandler);

        // Set the checkbox to the correct state.
        document.getElementById('checkboxId').checked =
          transliterationControl.isTransliterationEnabled();

        // Populate the language dropdown
        var destinationLanguage =
          transliterationControl.getLanguagePair().destinationLanguage;
        var languageSelect = document.getElementById('languageDropDown');
        var supportedDestinationLanguages =
          google.elements.transliteration.getDestinationLanguages(
            google.elements.transliteration.LanguageCode.ENGLISH);
        for (var lang in supportedDestinationLanguages) {
          var opt = document.createElement('option');
          opt.text = lang;
          opt.value = supportedDestinationLanguages[lang];
          if (destinationLanguage == opt.value) {
            opt.selected = true;
          }
          try {
            languageSelect.add(opt, null);
          } catch (ex) {
            languageSelect.add(opt);
          }
        }
      }

      // Handler for STATE_CHANGED event which makes sure checkbox status
      // reflects the transliteration enabled or disabled status.
      function transliterateStateChangeHandler(e) {
        document.getElementById('checkboxId').checked = e.transliterationEnabled;
      }

      // Handler for checkbox's click event.  Calls toggleTransliteration to toggle
      // the transliteration state.
      function checkboxClickHandler() {
        transliterationControl.toggleTransliteration();
      }

      // Handler for dropdown option change event.  Calls setLanguagePair to
      // set the new language.
      function languageChangeHandler() {
        var dropdown = document.getElementById('languageDropDown');
        transliterationControl.setLanguagePair(
            google.elements.transliteration.LanguageCode.ENGLISH,
            dropdown.options[dropdown.selectedIndex].value);
      }

      // SERVER_UNREACHABLE event handler which displays the error message.
      function serverUnreachableHandler(e) {
        document.getElementById("errorDiv").innerHTML =
            "Transliteration Server unreachable";
      }

      // SERVER_UNREACHABLE event handler which clears the error message.
      function serverReachableHandler(e) {
        document.getElementById("errorDiv").innerHTML = "";
      }
      google.setOnLoadCallback(onLoad);

    </script>
  </head>
  <body>
  <center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
    <div id='translControl'>
      <input type="checkbox" id="checkboxId" onclick="javascript:checkboxClickHandler()"></input>
      Type in <select id="languageDropDown" onchange="javascript:languageChangeHandler()"></select>
    </div>
    <br>Title : <input type='textbox' id="transl1"/>
    <br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
    <br><div id="errorDiv"></div>
  </body>
</html>

Просмотреть пример (customtransliteration.html)

Транслитерация с помощью низкоуровневого API

Низкоуровневый API транслитерации использует AJAX API для Google Переводчика (а не пакет elements, который используется остальными API транслитерации). Чтобы встроить AJAX API для Google Переводчика на свою страницу, воспользуйтесь загрузчиком AJAX API Google и следуйте приведенным здесь инструкциям.

В этом примере показана простая транслитерация строки JavaScript:

google.language.transliterate(["Namaste"], "en", "hi", function(result) {
  if (!result.error) {
    var container = document.getElementById("transliteration");
    if (result.transliterations && result.transliterations.length > 0 &&
        result.transliterations[0].transliteratedWords.length > 0) {
      container.innerHTML = result.transliterations[0].transliteratedWords[0];
    }
  }
});

Просмотреть пример (transliterate.html)

Подробные сведения об API

Поддерживаемые языки

В настоящий момент API транслитерации поддерживает транслитерацию с английской версии латинского алфавита на следующие языки:

Арабский^{Новинка!}
Бенгальский
Гуджарати
Хинди
Каннада
Малаялам
Маратхский
Непальский
Тамильский
Телугу

Настройка видимых компонентов

Чтобы элемент управления транслитерации, отображаемый с помощью метода showControl, вписался в вашу веб-страницу, его можно настроить, добавив дополнительные классы CSS в файл CSS по умолчанию. Файл CSS по умолчанию автоматически загружается при вызове функции google.load(). Он определяет стили для элемента управления и меню подсказок при транслитерации, которое появляется при нажатии или редактировании транслитерированного слова. Если загружать CSS по умолчанию не нужно, задайте для параметра "nocss" значение true.

google.load("elements", "1", {packages: "transliteration", "nocss" : true});

Меню выбора языка, кнопка, указывающая язык, выбранный пользователем, и меню подсказок размещаются в элементах div, обозначенных определенными классами CSS. Чтобы изменить их стиль под свою страницу, можно переопределить правила CSS, применяемые к этим элементам. Изучить файл CSS по умолчанию, загружаемый с пакетом API транслитерации, можно с помощью файла CSS транслитерации с комментариями. Ниже перечислены классы CSS, которые могут пригодиться для настройки:

goog-transliterate-indic-language-menu и goog-transliterate-indic-language-menu-highlight используются в меню выбора языка.
goog-transliterate-indic-suggestion-menu и goog-transliterate-indic-suggestion-menu-highlight используются в меню подсказок, которое появляется для исправления транслитерации.
goog-transliterate-indic-button и goog-transliterate-indic-button-checked используются в кнопке, указывающей выбранный пользователем язык.

Например, определив параметр background-color в goog-transliterate-indic-suggestion-menu, можно изменить цвет фона меню подсказок со значения по умолчанию #F0A000 на новое.

Поддержка языков с письмом справа налево

Для языков с письмом справа налево, таких как арабский, API по умолчанию автоматически изменяет направление вывода текста в соответствии с используемым языком и набранным текстом. (Направление текста задается в HTML и JavaScript с помощью свойства direction, которое принимает значения 'ltr' и 'rtl'. Оно влияет на положение курсора и выравнивание в текстовой области.)

Просмотреть пример транслитерации арабского текста (arabictransliteration.html)

Совместимость с браузерами

API транслитерации поддерживается браузером Firefox 1.5 и более поздних версий в операционных системах Windows и Linux, а также браузером Internet Explorer 6.0 и более поздних версий в операционной системе Windows (предпочтительно Windows XP). API транслитерации можно загрузить без ошибок практически во всех браузерах, поэтому можно спокойно загружать его перед проверкой на совместимость.

В различных приложениях иногда требуется разное поведение для пользователей, использующих несовместимые браузеры. В API транслитерации представлен глобальный метод google.elements.transliteration.isBrowserCompatible() для проверки на совместимость, но он не предоставляет никакого автоматического поведения при обнаружении несовместимого браузера. Большинство примеров в этом документе не содержат проверки браузера на совместимость или отображения сообщений об ошибке для более старых версий браузеров. Совершенно очевидно, что в настоящих приложениях должны быть предусмотрены соответствующие действия для несовместимых браузеров. Но мы исключили подобные проверки для упрощения примеров.

Тип HTML-содержания

API транслитерации обрабатывает большие объемы текста UTF-8, поэтому для страницы нужно задать тип содержания UTF-8, добавив метатег <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>. Без этого метатега API транслитерации не будет правильно работать на веб-странице.

Устранение неполадок

При наличии проблем с кодом стоит сделать следующее.

Поищите опечатки. Помните, JavaScript – язык, чувствительный к регистру.
Воспользуйтесь отладчиком JavaScript. В Firefox можно использовать консоль JavaScript или расширение FireBug. В IE можно использовать Отладчик сценариев (Microsoft).
Поищите ответ в группе обсуждений AJAX API. Если там нет сообщения, которое бы отвечало на ваш вопрос, разместите вопрос в группе, сопроводив его ссылкой на веб-страницу, где видна проблема.

Добавление виртуальной клавиатуры с помощью AJAX API для Google Переводчика

С помощью AJAX API виртуальной клавиатуры для Google Переводчика можно добавить экранную клавиатуру для любого текстового поля или области на вашей веб-странице. Это позволит посетителям веб-сайта печатать на любом языке с помощью клавиатуры с удобной для них раскладкой.

Что такое виртуальная клавиатура? Виртуальная клавиатура используется для перевода введенного текста с одной раскладки клавиатуры на другую.

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

Содержание

Аудитория

Введение: "Hello, World" API виртуальной клавиатуры; Встраивание виртуальной клавиатуры на страницу; Обновления API

Примеры: Отображение и скрытие клавиатуры; Переключение раскладки клавиатуры; Отображение меню; Две группы параметров клавиатуры

Подробные сведения об API: Поддерживаемые раскладки клавиатуры; Совместимость с браузерами

Устранение неполадок

Справочное руководство по классам

Аудитория

Эта концептуальная документация не является полной и исчерпывающей. Она лишь позволяет быстро ознакомиться с виртуальной клавиатурой и начать использовать ее на своей странице.

Введение

"Hello, World" API виртуальной клавиатуры

Проще всего начать изучение этого API с простого примера. В следующем примере показано включение виртуальной клавиатуры с русской раскладкой для текстовой области, чтобы пользователи могли набирать текст по-русски с помощью клавиатуры с английской раскладкой или мыши. Пользователи могут скрыть или отобразить виртуальную клавиатуру с помощью ее кнопок + и -. О выборе другой раскладки рассказано в справочном руководстве по классам API.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Google Onscreen Keyboard API
      google.load("elements", "1", {
          packages: "keyboard"
      });

      function onLoad() {
        var kbd = new google.elements.keyboard.Keyboard(
          [google.elements.keyboard.LayoutCode.RUSSIAN],
          ['t1']);
      }

      google.setOnLoadCallback(onLoad);
    </script>
  </head>
  <body>
  Type in Russian<br/>
  <textarea id="t1" style="width: 600px; height: 200px;"></textarea>
  </body>
</html>

Можно поэкспериментировать с аналогичным примером на площадке для экспериментов с кодом.

Встраивание API виртуальной клавиатуры на страницу

AJAX API виртуальной клавиатуры входит в модуль "elements". Чтобы встроить API виртуальной клавиатуры Google на свою страницу, сначала нужно добавить тег скрипта AJAX API Google:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Этот скрипт загрузит функцию google.load, которая позволит загружать отдельные API Google. Вызов функции google.load для загрузки API виртуальной клавиатуры Google выглядит следующим образом:

<script type="text/javascript">
  google.load("elements", "1", {
      packages: "keyboard"
  });

</script>

Функция загружает версию 1 API виртуальной клавиатуры. В настоящее время доступна версия 1 API виртуальной клавиатуры, в будущем могут появиться новые версии. Подробнее об этом рассказано в обсуждении версий ниже.

Обновления API

Второй аргумент функции google.load обозначает версию используемого AJAX API для Google Переводчика. В настоящее время доступна версия 1 API виртуальной клавиатуры, в будущем могут появиться новые версии.

При значительном изменении API мы обновляем номер версии и размещаем уведомление на сайте Google Code и в группе обсуждений AJAX API. Когда это происходит, мы поддерживаем обе версии не менее месяца, чтобы вы могли перевести свой код.

Команда AJAX API для Google Переводчика периодически обновляет API, чтобы исправить недавно обнаруженные ошибки и улучшить производительность. Эти исправления должны только повышать производительность и устранять ошибки, но могут случайно нарушить работу некоторых клиентов API. Чтобы сообщить о подобных проблемах, воспользуйтесь группой обсуждений AJAX API.

Примеры

Отображение и скрытие клавиатуры

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

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Google Onscreen Keyboard API
      google.load("elements", "1", {
          packages: "keyboard"
        });

      var kbd;  // A Keyboard object.

      function onLoad() {
        // Create an instance on Keyboard.
        kbd = new google.elements.keyboard.Keyboard([
          google.elements.keyboard.LayoutCode.POLISH],
          ['t1']);
      }

      // If the keyboard is visible, hide it.
      // If the keyboard is invisible, show it.
      function toggleVisible() {
        var button = document.getElementById("btVisible");
        if (kbd.isVisible()) {
          kbd.setVisible(false);
          document.getElementById('btVisible').value = "Show";
        } else {
          kbd.setVisible(true);
          document.getElementById('btVisible').value = "Hide";
        }
      }

      google.setOnLoadCallback(onLoad);
    </script>
  </head>
  <body>
  This is a demo for setVisible/isVisible.<br/>
  <input type="button" onclick="toggleVisible()" id="btVisible" value="Hide"></input><br/>
  <textarea type="text" id="t1" style="width: 600px; height: 200px;"></textarea>
  </body>
</html>

Можно поэкспериментировать с аналогичным примером на площадке для экспериментов с кодом.

Переключение раскладки клавиатуры

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

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Google Onscreen Keyboard API
      google.load("elements", "1", {
          packages: "keyboard"
        });

      var kbd;  // A Keyboard object.

      function onLoad() {
        // Create an instance on Keyboard.
        kbd = new google.elements.keyboard.Keyboard([
          google.elements.keyboard.LayoutCode.RUSSIAN],
          ['t1']);
      }

      google.setOnLoadCallback(onLoad);
    </script>
  </head>
  <body>
  This is a demo for setLayout/getLayout.<br/>
  <script type="text/javascript">
  </script>
  <input type="button" onclick="kbd.setLayout('ru')" value="Russian" /><br/>
  <input type="button" onclick="kbd.setLayout('hi')" value="Hindi" /><br/>
  <input type="button" onclick="kbd.setLayout('th')" value="Thai" /><br/>
  <input type="button" onclick="kbd.setLayout('ar')" value="Arabic" /><br/>
  <input type="button" onclick="kbd.setLayout('pl')" value="Polish" /><br/>
  <input type="button" onclick="kbd.setLayout('fa')" value="Persian" /><br/>
  <input type="text" id="t1" style="width: 600px"></input>
  </body>
</html>

Можно поэкспериментировать с аналогичным примером на площадке для экспериментов с кодом.

Отображение меню раскладок клавиатуры

В следующем примере перечислены поддерживаемые раскладки и продемонстрировано отображение меню раскладок на странице:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Google Onscreen Keyboard API
      google.load("elements", "1", {
          packages: "keyboard"
        });

      var kbd;  // A Keyboard object.

      // Draw a list of keyboard layouts in their native languages.
      // User can click any of them to switch to that keyboard layout.
      function drawMenu() {
        html = ["<ul>"];
        for (var i in google.elements.keyboard.LayoutCode) {
          var code = google.elements.keyboard.LayoutCode[i];
          var name = google.elements.keyboard.getLayoutName(code);
          html.push("<li><a href='#' onclick='kbd.setLayout(\"", code, "\")'>",
                    name, "</a></li>");
        }
        html.push("</ul>");
        document.getElementById("menu").innerHTML = html.join('');
      }

      function onLoad() {
        kbd = new google.elements.keyboard.Keyboard(
          [google.elements.keyboard.LayoutCode.RUSSIAN],
          ['t1']);

        drawMenu();
      }

      google.setOnLoadCallback(onLoad);
    </script>
  </head>
  <body>
  This is a demo for LayoutCode and getLayoutName.<br/>
  <div id="menu"></div><br/>
  <textarea id="t1" style="width: 600px; height: 200px;"></textarea>
  </body>
</html>

Две группы параметров клавиатуры

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

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Google Onscreen Keyboard API
      google.load("elements", "1", {
          packages: "keyboard"
      });

      function onLoad() {
        var kbd1 = new google.elements.keyboard.Keyboard(
          [google.elements.keyboard.LayoutCode.THAI],
          ['th1', 'th2']);

        var kbd2 = new google.elements.keyboard.Keyboard(
          [google.elements.keyboard.LayoutCode.ARABIC],
          ['ar1', 'ar2']);
      }

      google.setOnLoadCallback(onLoad);
    </script>
  </head>
  <body>
  Type in Thai and Arabic<br/>
  <textarea id="th1" style="width: 300px; height: 80px;"></textarea>
  <textarea id="ar1" style="width: 300px; height: 80px;"></textarea>
  <textarea id="th2" style="width: 300px; height: 80px;"></textarea>
  <textarea id="ar2" style="width: 300px; height: 80px;"></textarea>
  </body>
</html>

Можно поэкспериментировать с аналогичным примером на площадке для экспериментов с кодом.

Подробные сведения об API

Поддерживаемые раскладки клавиатуры

В настоящее время API виртуальной клавиатуры поддерживает следующие раскладки клавиатуры:

Арабская
Хинди
Персидская
Польская
Русская
Тайская

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

Совместимость с браузерами

API виртуальной клавиатуры поддерживается браузером Firefox 3 и более поздних версий в операционных системах Windows и Linux, а также браузером Internet Explorer 6.0 и более поздних версий в операционной системе Windows (предпочтительно Windows XP). API виртуальной клавиатуры можно загрузить без ошибок практически во всех браузерах, поэтому можно спокойно загружать его перед проверкой на совместимость.

Устранение неполадок

При наличии проблем с кодом стоит сделать следующее.

Поищите опечатки. Помните, JavaScript – язык, чувствительный к регистру.
Воспользуйтесь отладчиком JavaScript. В Firefox можно использовать консоль JavaScript или расширение FireBug. В IE можно использовать Отладчик сценариев (Microsoft).
Поищите ответ в группе обсуждений AJAX API. Если там нет сообщения, которое бы отвечало на ваш вопрос, разместите вопрос в группе, сопроводив его ссылкой на веб-страницу, где видна проблема.


например, "ajax api" или "open source"