KaTeX — библиотека для математических формул

В процессе разработки одного из приложений (как не сложно догадаться — это Кафедра) мне приходилось выкручиваться с рисованием формул средствами HTML. Как только сложность формул достигла более высокой отметки, пришлось прикрутить к проекту библиотеку KaTeX (более производительный аналог MathJax). Как это сделать и несколько нюансов про библиотеку будет ниже.

К слову говоря, никакой библиотеки для формул обычно не требовалось, так как 99% формул требовали лишь:

  • верхнего индекса, например x2
  • нижнего индекса, как в z4
  • гρέчεсκοгο αλφαβиτα
  • и немного спецсимволов

Однако в 1% случаев требовалось что-то посложнее, типа тех же дробей, а иногда матриц. Вот ради этого 1% формул я и решил в конце концов привязать к проекту что-то вроде MathJax. Однако руки дошли буквально недавно.

Изначально я очень долго присматривался к технологиям MathML и TeX, пытаясь выбрать сначала среди них, а уже затем подбирать библиотеку. Не утруждая вас столь же длительными рассуждениями сразу скажу, что в итоге остановился на хорошо знакомом мне ранее TeX из-за его краткости и естественности (в некотором смысле).

Библиотека №1 в мире JS+TeX — это уже упомянутый MathJax, однако данная библиотека является настоящим швейцарским ножом, умеющим абсолютно всё и ещё чуть-чуть. Что это даёт из минусов? Размер? Скорость работы? Да, хотя основной вклад в размер вносят входящие в комплект библиотеки шрифты. Что-то мне ещё не понравилось в лицензии библиотеки. Мне послышалось, что она не полностью свободная и я, не став далее углубляться в этот вопрос, пошёл искать что-то иное.

Случайно на Хабре наткнулся на библиотеку KaTeX, которая была заметно шустрей. Сравните быстродействие на картинке.

Сравнение производительности

Сравнение производительности

Картинка взята с официального github библиотеки. Слева пример того, как отрисовывается страница с katex, а справа — MathJax. Что? Картинка не самая объективная, так как взята у заинтересованной стороны? Совершенно верно. Katex не является панацеей и на самом деле производительность может оказаться совсем скромной. Однако она явно выше, чем у конкурента. Берём.

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

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

<link rel="stylesheet" href="data/katex/katex.min.css">
<script src="data/katex/katex.min.js"></script>

Использовать библиотеку нужно так:

// всё использование идёт вокруг одной-единственной функции-рендера:
katex.render("a = b^2 + c^2", element);
 
// этой функции нужно передать два параметра:
// - формулу в формате tex
// - html-элемент, где она будет отображаться

Более конкретный пример:

<!-- в этом div-элементе и будет отображена наша формула -->
<div id="formula1234qwerty"></div>
 
<!-- его содержимое пустое, но нас интересует только его идентификатор; если у нас на странице тысяча формул, то у каждого такого элемента должен быть уникальный id -->
 
 
<script type="text/javascript">
	window.addEventListener(
		"load",
		function ()
		{
			var text = "a = b^2 + c^2";
			var element = document.getElementById("formula1234qwerty");
			katex.render(text, element);
		}
	);
</script>

Упомяну ещё одну свою хотелку — библиотеку для рисования химических формул и уравнений. Для этого даже существует специальный язык CML, однако с этим справляется и KaTeX. Поэтому здесь я поиски пока прекращу и остановлюсь на том, что есть. Одним словом, данная библиотека позволяет мне и математические формулы рисовать, и химические. Достаточно удобно?

Обращу внимание на некоторые странности (особенности?) в работе. А именно, когда мы набираем формулы, то нужно быть внимательным к фигурным скобкам. Например, при использовании дроби необходимо ставить пробелы, иначе рендер не работает:

% данный пример работать не будет:
\\frac{1}{2}
 
% но стоит добавить пробелы после открывающих скобок и перед закрывающими, как всё заработает:
\\frac{ 1 }{ 2 }

В свою очередь с матрицами будет всё с точностью до наоборот:

% такой пример работает корректно:
\\begin{vmatrix} -3 &amp; 3 &amp; -4 \\\\ 0 &amp; 3 &amp; 2 \\\\ -3 &amp; 2 &amp; -4 \\end{vmatrix}
 
% а такой, увы, не работает:
\\begin{ vmatrix } -3 &amp; 3 &amp; -4 \\\\ 0 &amp; 3 &amp; 2 \\\\ -3 &amp; 2 &amp; -4 \\end{ vmatrix }

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

% экспонента, аргументом которой является полином в ещё некоторой степени:
e^{ -2 x^{ 2 } + 4 x^{ -3 } }^{ 10 }
 
% или даже так:
2^{3}^{4}
 
% то есть выражение в степени и ещё раз в степени - это не по зубам
% однако, как только мы расставим круглые скобки в нужных местах, то всё заработает

В Кафедре Katex используется дважды, а именно: непосредственно как средство отображения формул, а ещё как ядро математического редактора. Да, теперь вместе с основной программой разрабатывается и ряд вспомогательных инструментов, созданных не для пользователей программы, а для разработчиков. Как выяснилось, не все разработчики являются программистами вообще и не так хорошо знают TeX в частности. Вот для них и разработан простейший математический редактор:

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

2 Responses to KaTeX — библиотека для математических формул

  1. Я тоже недавно хотел использовать KaTeX, но оказалось, что он не рендерит формулы, если в них есть русские буквы.

    • Да, серьёзная недоработка. Хорошо, что она меня стороной обошла. Если вопрос с производительностью перестанет быть важным, то и я смогу отказаться, перейдя на MathJax. Там, вроде, нет такой проблемы?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*