Латех и веб-технологии

В прошлый раз я рассказал о своем сервисе, который генерирует для веба картинки с математическими формулами на латехе. Теперь я расскажу, как заставить программное обеспечение (TeX Live, nginx, php-fpm, SVGO) и технологии (HTML, CSS, JS, SVG) работать вместе, чтобы получился такой результат.

Аналоги

Как я уже упоминал, источником вдохновения был сервис CodeCogs. В одном из вариантов его использования на страницу подключается специальный JS, который ищет формулы, ограниченные специальными символами, например $...$ или \[...\], и заменяет их на картинки.

У такого подхода несколько достоинств. Во-первых, скрипт определяет, поддерживает ли браузер формат SVG. Если нет, то используется растровая альтернатива. Во-вторых, замена формул происходит в браузере, и на сервере не нужна предварительная обработка html-кода. О недостатках я уже писал: у формул внутри текста нет выравнивания по базовой линии, и сам сервис CodeCogs иногда глючит и выдает картинки с ошибками (например, слишком крупные символы в индексах). Это вдохновило меня на дальнейший поиск.

Интерфейс сервиса: клиентская часть

Поиск привел к статье о решении проблемы с базовой линией в латехе. Я занялся адаптацией этого решения для веба. Его суть в том, что с помощью специальных команд латех записывает в отдельный файл размеры и положение базовой линии будущей формулы. Это положение регулируется на веб-странице численным значением css-свойства vertical-align картинки с формулой. Ключевая проблема адаптации заключалась в том, как перенести значение из файла в свойство vertical-align.

Очевидный способ — парсинг html-кода и замена формул на картинки на сервере — не позволил бы сделать универсальный сервис. И мне удалось найти обходной путь: скрипты в SVG и обмен сообщениями между веб-страницей и внутренними svg-картинками.

После генерации svg-файла я добавляю в него короткий скрипт с вызовом postMessage и передачей размеров и положения базовой линии. Вот пример:

<script type="text/ecmascript">
if (window.parent.postMessage)
    window.parent.postMessage("1.14|40.1|14.3|" + window.location, "*");
</script>

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

В браузерах поддержка сообщений между документами даже шире, чем поддержка SVG. Скрипты в svg-картинках не работают, если их подключать через тег img. Я выбирал между тегами embed, object и iframe, по результатам тестирования остановился на первом. В старых браузерах, показывающих растровые картинки, проблема базовой линии остается нерешенной, но с этим можно жить.

Устройство сервиса: серверная часть

При первом обращении по адресу, например, http://tex.s2cms.ru/svg/x%5E2 вызывается главный php-скрипт. Он подставляет формулу «x^2» в шаблон (tex-файл) и конвертирует получившийся tex-документ командой latex в dvi-файл. Последний утилитами dvipng и dvisvgm конвертируется в png- и svg-картинки. К svg-файлам дописывается вызов postMessage, как описано выше. Ответ в запрошенном формате возвращается клиенту и соединение с ним разрывается функцией fastcgi_finish_request(). Содержимое картинок сохраняется в кеше, а svg-файлы предварительно отправляются утилите SVGO на оптимизацию и утилите gzip для создания дополнительной сжатой копии.

Кеш — это набор файлов и папок, имена которых определяются md5-хешем запрошенного URL. Я разобрался с настройкой веб-сервера nginx, чтобы он отдавал содержимое кеша напрямую, как обычные статические файлы, без вмешательства интерпретатора PHP. Обычным способом, через директиву try_files, этого сделать не получилось, потому что длина URL может превышать допустимую длину имен файлов. Поэтому пришлось использовать хеш-функцию от URL. Вычислением md5-хеша занимается сам nginx с помощью специального модуля HttpLuaModule поддержки языка Луа.

location /svg {
    set_by_lua $file_path '
        local md5 = ngx.md5(ngx.var.request_uri);
        return "/cache/" .. md5:sub(1, 3) .. "/" .. md5:sub(4);
    ';

    try_files $file_path @latex;
}

Если в кеше нужного файла нет, тогда запрос передается интерпретатору PHP и обрабатывается описанным выше способом. Модуль HttpLuaModule не входит в nginx. Но, как выяснилось, в Дебиане можно обойтись без компиляции исходников. В пакете nginx-extras модуль уже есть.

Запуск латеха — относительно тяжелая операция для сервера: время генерации картинок сравнимо с секундой. В связи с этим кеш имеет принципиальное значение для функционирования сервиса. В обычных условиях использования повторные обращения к старым формулам происходят гораздо чаще, чем обращения к новым формулам (у текстов один автор и множество читателей). Повторные обращения обслуживаются веб-сервером с помощью кеша и не создают большой нагрузки на сервер. Даже если злоумышленник попытается вызвать отказ сервиса потоком запросов к незакешированным формулам, он загрузит работой бэкенд — интерпретатор PHP. Это приведет к трудностям с генерацией новых формул (точнее, к ошибкам 502/504), но не повлияет на отдачу сгенерированных ранее формул.

Опыт эксплуатации и доработка

Как показала практика, метод определения положения базовой линии (depth в терминах теха) и размеров формулы через команды \lrbox и \usebox небезупречен. Иногда штрихи символов могут выходить за пределы области, и тогда размеры (и положение базовой линии) определяются неточно. И dvipng, и dvisvgm умеют находить правильные границы самостоятельно. Но если положение границы корректируется, становится неточной информация о базовой линии.

На помощь пришла особенность утилиты dvisvgm. Она поддерживает набор специальных команд, которые выводят в комментариях итогового svg-файла служебную информацию. Мне подошли такие команды:

\special{dvisvgm:bbox new formula}
\special{dvisvgm:raw<!--start {?x} {?y} -->}
...
\special{dvisvgm:raw<!--bbox {?bbox formula} -->}

Они выводят координаты левого верхнего и правого нижнего угла ({?bbox}), а также координаты точки ({?x} и {?y}), которая по счастливому стечению обстоятельств оказалась на базовой линии. С такой информацией определение положения базовой линии — дело обычного вычитания. Этот метод работает безупречно.