Если Вы заметили ошибку, выделите ее и нажмите Ctrl+Enter
Для разработчиков
Материал из OrthoWiki
Чего интересного уже есть:
В процессе разработки словаря было реализовано ряд полезных скриптов, которые могли бы быть использованы разработчиками в других проектах.
Стили
Перед тем как начать работу с церковнославянским текстом, необходимо установить некоторые стили. В orthodic.org используются следующие классы стилей:
- cs - для отображения текста церковнославянскими шрифтами.
- draw-cs - тот же церковнославянский текст, но в дальнейшем будет преобразован в изображения слов, если у посетителя не установлены церковнославянские шрифты.
<style type="text/css">
.cs, .draw-cs {font-family:"Triodion ieUcs","OrthodoxTT ieUcs8","Orthodox.tt ieUcs8","StaroUspenskaya ieUcs","Pochaevsk ieUcs","Feofan ieUcs","Evangelie ieUcs","Orthodox ieUcs8","OrthodoxT1 ieUcs8","Irmologion ieUcs" !important;}
.draw-cs img{border:none}
</style>
Особенности работы
Следует отметить, что подключать скрипт лучше в <head>:
<script type="text/javascript" src="http://www.orthodic.org/scripts/orthodic_org.js"></script>
А вот использовать различные его методы в <body>. Иначе, если их тоже расположить в <head> они работать не будут.
Установлен ли церковнославянский шрифт у посетителя
- Скрипт: http://www.orthodic.org/scripts/orthodic_org.js
- Класс: orthodic_org
- Метод: hasAnyFont()
Возвращает true иди false в зависимости от того найдены ли были в системе у посетителя шрифты из следующего списка:
- OrthodoxTT ieUcs8
- Orthodox.tt ieUcs8
- Triodion ieUcs
- Irmologion ieUcs
- StaroUspenskaya ieUcs
- Pochaevsk ieUcs
- Feofan ieUcs
- Evangelie ieUcs
- Orthodox ieUcs8
- OrthodoxT1 ieUcs8
Пример использования:
<!-- подключаем библиотеку (желательно в head) -->
<script type="text/javascript" src="http://www.orthodic.org/scripts/orthodic_org.js"></script>
<!-- .... -->
<!-- А этот скрипт уже в body: -->
<script type="text/javascript">
// Пример работы:
if (orthodic_org.hasAnyFont()){
alert('В Вашей системе церковнославянские шрифты установлены');
}else{
alert('В Вашей системе церковнославянские шрифты не установлены');
}
</script>
Установлен ли в системе у посетителя заданный шрифт?
- Скрипт: http://www.orthodic.org/scripts/orthodic_org.js
- Класс: orthodic_org
- Метод: hasFont(fontName)
В качестве параметра принимает имя шрифта, который ищем в системе Возвращает true или false
Пример использования:
<!-- подключаем библиотеку (желательно в head) -->
<script type="text/javascript" src="http://www.orthodic.org/scripts/orthodic_org.js"></script>
<script type="text/javascript">
// Пример работы:
// Установлен ли шрифт Triodion ieUcs?
alert('В вашей системе шрифт "Triodion ieUcs" ' + (orthodic_org.hasFont("Triodion ieUcs")?'':'НЕ ') + 'установлен');
// Установлен ли шрифт Arial?
alert('В вашей системе шрифт "Arial" ' + (orthodic_org.hasFont("Arial")?'':'НЕ ') + 'установлен');
</script>
Отображение церковнославянского текста посетителю, у которого не установлены церковнославянские шрифты
В случае, когда у посетителя церковнославянские шрифты не установлены мы можем превратить каждое слово в изображение и показать его посетителю.
- Скрипт: http://www.orthodic.org/scripts/orthodic_org.js
- Класс: orthodic_org
- Метод: draw(node, tag)
С помощью этого метода производится поиск церковнославянского текста в тегах, которые имеют класс "draw-cs" (данный класс можно сменить) и замена их на набор изображений. Параметрами может быть передано:
- node - узел в котором производится поиск тегов с классом draw-cs. Если параметр не передан, производится поиск по всему документу
- tag - тег, который должен содержать церковнославянский текст. Помогает ускорить поиск и преобразование текста. По умолчанию ищется по всех тегах узла node
Пример использования:
<div id="gospel">
<h1 class="draw-cs">Н0вый завётъ ГDа нaшегw Ї}са хrтA</h1>
<ul>
<li class="draw-cs">T матfeа с™0е бlговэствовaніе</li>
<li class="draw-cs">T мaрка с™0е бlговэствовaніе</li>
<li class="draw-cs">T луки2 с™0е бlговэствовaніе</li>
<li class="draw-cs">T їwaнна с™0е бlговэствовaніе</li>
</ul>
</div>
Самый простой способ преобразования:
<script type="text/javascript">
orthodic_org.draw();
</script>
Более быстрым будет, если мы укажем узел, в котором надо искать церковнославянский текст:
<script type="text/javascript">
orthodic_org.draw(document.getElementById('gospel'));
</script>
Зачем же нам переводить текст в изображения, если у пользователя и так установлен церковнославянский шрифт?
<script type="text/javascript">
if (!orthodic_org.hasAnyFont()){
orthodic_org.draw(document.getElementById('gospel'));
}
</script>
По-умолчанию рисуется черный текст на белом фоне размером 20pt. Эти и другие параметры можно изменить с помощью следующих методов:
- setColor('#color') - установка цвета шрифта
- setBackgroundColor('#color') - установка цвета фона
- setFontSize(int size) - задать размер шрифта (в pt - целое число)
А так же:
- setHeight(int h) - задать высоту изображения в px (по-умолчанию 45px)
- setTop(int top) - задать отступ сверзу в px (по-умлочанию - 30)
- setLeft(int left) - задать отступ слева в px (по-умолчанию - 0)
Пример: нужно отрисовать заголовок (тег h1) красным шрифтом большими буквами (24pt):
<script type="text/javascript">
if (!orthodic_org.hasAnyFont()){
// рисуем пункты списка
orthodic_org.draw(document.getElementById('gospel'), 'li');
// рисуем заголовок
orthodic_org.setColor('#f00');
orthodic_org.setFontSize('24');
orthodic_org.draw(document.getElementById('gospel'), 'h1');
}
</script>
Церковнославянский редактор
Для ввода церковнославянского текста со сходной с пакетом "Ирмологий" раскладкой клавиатуры может использоваться javascript-церковнославянский редактор. Активизация его может быть произведена следующим образом:
<!-- Подключаем скрипт (желательно в head) --> <script type="text/javascript" src="http://www.orthodic.org/scripts/jsUcs.js"></script> <!-- В элемент формы для ввода (imput или textarea) ставим событие onkeydown --> <input type="text" class="cs" onkeydown="return jsUcs.main(this, event)" />
Примечания:
- Редактор пока работает только для браузера firefox
- Для того, что бы текст был церковнославянский текст при вводе был читабельным, надо ставить достаточно большой размер шрифта (18-20pt).
- Для ввода церковнославянского текста в таком поле пользователям Linux надо включить английскую раскладку
- Не забудьте стилями задать церковнославянский шрифт (в даном случае class="cs")
Открытый исходный код
Церковнославянский словарь написан на php с использованием Zend Framework. Код относительно сносно задокументирован. Использовалось автоматическое тестирование. Разработка велась в svn, исходники свободно доступны для изучения и модификации здесь: https://bitbucket.org/eugenzor/orthodic
Что еще нужно сделать
- Научить работать церковнославянский редактор с другими популярными браузерами
- Внедрить кеширование при отдаче страниц словаря, что бы уменьшить нагрузку на базу данных и увеличить скорость работы словаря
- Научить работать формы редактирования и добавления церковнославянских слов (в административном интерфейсе редактора http://orthodic.org/editor) через ajax что бы ускорить работу редакторов
- Напечатать изображение церковнославянского слова на прозрачной подложке (пока получается только на каком-либо монотонной подложке, что не дает возможности использовать слова на немонотонных фонах)
