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