Pinyin.js – плагин для популярной библиотеки jQuery

Pinyin.js Jquery плагин

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

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

Это может быть не сильно большой проблемой, если вводить Пиньинь требуется только лично вам и не очень часто. Но если вы разрабатываете сайт или какой-либо сервис, связанный с китайским языком, и хотите позволить своим пользователям вводить там Пиньинь, вы не можете быть уверены, что у них отработаны для этого подходящие методы или есть нужное ПО. Тут придётся прибегнуть к разработке собственных внутренних средств ввода или искать какие-то обходные пути.

Я сам столкнулся с такой проблемой и задумал решить её радикально — создать супер-простой и лёгкий real-time конвертёр Пиньиня на JavaScript, который будет работать примерно как указанный выше Pinyinput, но на любой веб-странице с любым программным обеспечением. Так появился плагин для популярной библиотеки jQuery с очевидным названием Pīnyīn.js.

С его помощью можно взять любое текстовое поле на вашей веб-странице и сделать так, чтобы оно понимало «нумерованный Пиньинь» (с номером тона после слога, вместо надстрочного знака, например zhi1dao4) и мгновенно конвертировало его в «правильный» Пиньинь (zhīdào). Просто и точно, никакой настройки и возни. Требуется просто подключить плагин к последней версии jQuery на вашем сайте и активировать его для нужного текстового поля (полей) на странице: $('input.myClass').pinyin();

Страница проекта на ГитХабе может быть найдена здесь. Там же есть рабочая демонстрация и исходный код плагина с комментариями.

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

Проект полностью работоспособен как есть, но ему тем не менее есть куда расти, так что любые предложения и пожелания только приветствуются.

А для тех, кто веб-разработкой не занимается, но при этом хочет иметь возможность, когда нужно, быстро ввести строчку на Пиньине без установки нового ПО, демка сама по себе уже может полезна. Ей можно пользоваться например вот так :)


Привет! Меня зовут Саша. Я главный редактор Магазеты.

Мы собираем базу знаний о Китае и китайском языке при поддержке читателей уже 16 лет.

У нас нет рекламы, есть только вы. Поддержите Магазету и помогите сохранить её бесплатной и без рекламы.


11 комментариев

  1. Диакрити́ческие зна́ки мо́жно вводи́ть шта́тными сре́дствами Windows.
    Ставите курсор после гласной и вводите например Alt-769 на цифровой цлавиатуре (справа). Над гласной появляется значок ударения. Также и остальное. Коды можно посмотреть в таблице символов, только там 16-ричные, а вводить надо десятичные.

    1. Штатными средствами Mac OS X тоже можно, правда только в английской раскладке.
      Option+a потом нужная буква для ¯
      Option+e для ´
      Option+v для ˇ
      Option+` для `

      1. Раз пошла такая пьянка, то штатными средствами linux тоже можно (ibus, в моём случае).

        Нужны пакеты ibus и ibus-m17n, отконфигурированный и запущенный ibus-daemon (конфигурируется умеренно интуитивно, требуется добавить метод ввода “Chinese – pinyin (m17n)”)

        После чего ввод пиньиня méi wéntì — с включённым соответствующим методом ввода (хоткеем или мышкой по иконке в трее) вводится слог, потом цифра тона.

    1. Я не знаком с механикой работы WordPress-плагинов, поэтому нет — версии для него пока нет.

      Но так как jQuery включён в WordPress по умолчанию, не должно составить труда добавить код плагина на страницу и использовать его согласно инструкции.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *