Всё просто. Вы делаете разметку слов на странице вашего сайта в простом и понятном формате, а Морфана при загрузке страницы в браузер пользователя автоматически создает графические обозначения морфем и размещает их нужным образом. Несколько примеров:
| 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()
Подробности см. на гитхабе