gifts2017

Рендеринг математических формул с помощью KaTex.

Опубликовал Соломон Яковлевич (meganibler) в раздел Программирование - Практика программирования

Рендеринг математических формул в HTMLDocument, с применением javascript библиотеки KaTex.

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

Пример формулы (1): γ=±(100*δ)/Xn (первый символ - латинская гамма)
На печать требовалось выводить формулы в "академическом" представлении. Как в книжках по высшей математике. 

Решение виделось таким:

  1. набор формул на языке разметки LaTex
  2. рендеринг в картинку (png), хранение картинки в базе  
  3. вставка картинки в макет, при печати

 


Но, оказалось, рендерить красивые формулы можно на чистом html. На GitHub, уже как год, существует проект KaTeX распространяемый под лицензией MIT. Смысл проекта - онлайн рендеринг математических формул на страницах, при помощи небольшой javascript библиотеки.

Синтаксис описания формул, какой же как и в TeX. Но, надо понимать, что маленькая библиотека поддерживает весьма ограниченный набор функций. Например, на данный момент нет поддержки массивов, но проект развивается и функцию \array скоро добавят (надеюсь). Еще нет поддержки кириллицы, об этом, в конце публикации.

Формулу из примера (1), используя синтаксис Tex, можно записать в виде: \\gamma = \\pm \\frac{100 \\cdot \\sigma}{x_n}
Вот так выглядит рендер формулы в браузере, с помощью KaTex: gamma = pm frac{100 cdot sigma}{x_n} (да, это картинка, т.к. вставить сюда сгенерированный html не получится)

В прикрепленных к публикации файлах, есть демонстрационная обработка, с примерами работы библиотеки.

Что требуется для корректной работы демонстрационой обработки:

  1. IE не ниже восьмой версии.
  2. Установленные локально шрифты семейства Katex.

 

Какие еще есть особенности:

  1. Для возможности локальной работы обработки, текст "katex.min.js" и "katex.min.css" вставлен в одноименные макеты обработки. При желании, можно запустить собственный веб сервер, выложить туда файлы с гитхаба, и закомментировать строки: СтрЗаменить(HTMLDocument, "
  2. По умолчанию, HTMLDocument работает в режиме IE 7 версии, в которой KaTex корректно не отражается. Для решения проблемы, в голову html вставлен тег: "meta http-equiv="X-UA-Compatible" content="IE=9"" 
  3. Для установки шрифтов нужно: под правами администратора скопировать в папку Fonts или "Установить" правой кнопкой мыши, все файлы в папке с расширением ttf. Шрифты зарегистрируются в системе, под фамилией Katex. Браузер IE, должен увидеть новые шрифты на лету, без перезапуска.
  4. Чтобы не устанавливать шрифты локально, можно запустить веб сервер и опубликовать шрифты в папке \SiteName\katex\fonts\. Но такой вариант у меня не заработал: при обработке css, IE упорно не видит шрифты в папке \fonts. Именно IE запущенный в HTMLDocument. В простой, тестовой страничке, все работает нормально. 
  5. KaTex не поддерживает кириллицу. Для решения проблемы, придется вносить изменения в исходный код и собирать katex.min.js самому (Makefile).

 

Скачать файлы

Наименование Файл Версия Размер
Обработка-пример работы библиотеки KaTex 5
.epf 33,63Kb
30.09.14
5
.epf 33,63Kb Скачать
Необходимые для обработки шрифты 4
.zip 525,63Kb
30.09.14
4
.zip 525,63Kb Скачать

См. также

Подписаться Добавить вознаграждение
Комментарии
1. DAnry (DAnry) 01.10.14 17:08
Очень интересная работа, узкой специализации конечно, но интересная...
2. Галина Орехова (orehova123) 01.10.14 19:33
Ох, красавец! А я свой диплом в ЛаТехе писала от и до. Научник тогда еще бубнил "ну сдалась тебе твоя 1с-ка". Знал бы он, что и на 1с тоже такое делать можно :)
Плюсую за идею и работу! Развивай, дойдешь до того, чтоб в конфе писались целые статьи, а не просто формулы рисовались
3. Сергей Одинесников (monsta) 01.10.14 23:01
Знал бы он, что и на 1с тоже такое делать можно

Показать HTML документ?
wunderland; infoengineer; +2 Ответить 1
4. Галина Орехова (orehova123) 02.10.14 09:43
5. Трактор Трактор (Трактор) 02.10.14 17:50
первый символ - латинская гамма

Разве в латинице есть буква гамма? Это же греческая буква.
6. John Smith (PiccaHut001) 08.10.14 14:57
"5.KaTex не поддерживает кириллицу" - бесполезная хрень, смысл её использовать у нас?