Как использовать?

Использовать библиотеку можно разными способами.

Простой способ.

  1. Подключить на странице требуемые библиотеки (jQuery и Rangy) и саму Морфану.
  2. Слова, для которых требуется разметка, заключить в <span> с атрибутом data-morfana-markup, в значение которого прописать код разметки. Подробнее о разметке читайте в Документация→Синтаксис

После того, как страница и все требуемые скрипты загрузятся, Морфана автоматически выполнит разметку. Ниже представлен пример полноценной страницы.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/rangy/1.2.3/rangy-core.js"></script>
	<script type="text/javascript" src="http://cdn.morfana.ru/latest/morfana.min.js"></script>
</head>
<body>
	 <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">десятиэтажный</span>
</body>
</html>

Обратите внимание, что все js-скрипты загружаются с других серверов. Разумеется, их можно скачать и обеспечить подгрузку с сервера своего сайта.

Непростой способ.

В код страницы добавляется скрипт конфигурирования. Например:

<script type="text/x-morfana-config">Morfana.configure({autoStart: false, freezeWord: false});</script>

В этом случае Морфана загружается, но не кидается сразу в бой. Это дает возможность запустить обработку страницы или отдельных слов по нужным событиям. А значит можно делать разные интерактивные штуки – редактор разметки или упражнение с проверкой. Подробнее о конфигурации читайте в Документация→Конфигурация.

Соответственно, в собственном коде вы можете написать нечто подобное*:

<a href="#" onclick="Morfana.draw(); return false;">обработать всю страницу - все элементы, имеющие атрибут data-morfana-markup</a>
<a href="#" onclick="Morfana.draw('#word1'); return false;">обработать слово в span c id = word1, разметка будет взята из атрибута data-morfana-markup. Если атрибута нет, будет выполнена попытка найти все дочерние элементы с этим атрибутом и обработать их</a>
<a href="#" onclick="Morfana.draw('#word2', 'ok:9-9;'); return false;">обработать слово в span c id = word2, передав разметку и проигнорировав собственный атрибут элемента, если он есть</a>

* inline JavaScript здесь для наглядности, не делайте так! ;-)

Внимание!

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

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

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