Что это?

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

HTML-разметка Результат
<span data-morfana-markup="ko:1-4;ok:0;os:1-4;">пять</span>
пять
<span data-morfana-markup="ko:1-5;ok:6-8;os:1-5;">лебеде́й</span>
лебеде́й
<span data-morfana-markup="ko:1-3;ok:4-4;ko:5-7;su:8-9;ok:0;osL:1-3;osR:5-9">себялюбец</span>
себялюбец

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

HTML-разметка Результат
<span data-morfana-markup="ko:1-5;ok:6-6;ko:7-10;su:11-11;ok:12-13;osL:1-5;osR:7-11"><strong>десят</strong>и<span style="color: #FF00FF;">эт<span style="letter-spacing: 10px;">аж</span></span>ный</span>
десятиэтажный

Еще больше примеров слов на странице «Примеры»

Внимание! Текущая версия библиотеки 2.3.0b.

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

Что нового по сравнению с 1.1.2a:

  • существенно переписан код библиотеки, чтобы избавиться от нескольких ошибок одного типа
  • в конфигурацию добавлена возможность указать цвет и толщину линий, а также необходимость реагировать на события пользовательского интерфейса (для поддержки функции выбора/удаления значка морфемы в интерактивах)
  • в конфигурацию добавлена возможность влиять на ширину нулевого окончания и размер отступов, добавляемых к буквам внутри окончаний и перед нулевыми окончаниями.
  • каждый SVG теперь снабжается атрибутом data-morfana-command, в котором сохраняется часть разметки, на основе которой создан данный SVG (для поддержки функции удаления значка морфемы в интерактивах)
  • добавлена возможность передать callback в метод Morfana.draw()

Подробности см. на гитхабе