MathJax

MathJax — это кроссплатформенная библиотека с открытым исходным кодом, предназначенная для отображения математических формул и обозначений в веб-браузерах. Она позволяет встраивать в HTML-страницы математические выражения, написанные на языках разметки LaTeX, MathML и AsciiMath, и преобразовывать их в векторную графику (SVG) или растровые изображения, обеспечивая корректное отображение на любых устройствах без необходимости установки дополнительных плагинов.

История

Разработка MathJax началась в 2009 году как преемник более ранней системы JavaScript-отображения математики — jsMath, созданной тем же автором, Дэвидом Барбером (David Barber). Проект был запущен Американским математическим обществом (AMS) совместно с Design Science, Inc. и Обществом промышленной и прикладной математики (SIAM) при поддержке ряда издательств и университетов. Первая стабильная версия MathJax 1.0 вышла в апреле 2010 года.

Ключевые этапы развития:

• 2010–2012: Версии 1.x. Реализована поддержка LaTeX, MathML и AsciiMath. Основной режим вывода — HTML+CSS с использованием шрифтов STIX.
• 2013: Версия 2.0. Введена поддержка SVG-вывода, улучшена производительность и добавлена поддержка MathML в браузерах, не поддерживающих его нативно.
• 2017: Версия 2.7. Последнее крупное обновление линейки 2.x.
• 2018: Релиз MathJax 3.0. Полная переработка архитектуры: модульная система, TypeScript, поддержка асинхронной загрузки, новый движок рендеринга. Версия 3.x стала основной.
• 2023–2024: Версии 3.2.x и 3.3.x. Оптимизация производительности, улучшенная поддержка MathML 3, исправление ошибок.

Архитектура и принцип работы

MathJax работает на стороне клиента (в браузере пользователя) или на сервере (с помощью Node.js). Процесс отображения формулы включает три этапа:

1. Обнаружение и разбор. Скрипт сканирует DOM-дерево страницы в поисках математических выражений, заключённых в специальные разделители (например, \(...\) для LaTeX, $$...$$ для отображения в отдельной строке, <math>...</math> для MathML). Найденные выражения передаются в парсер, который создаёт внутреннее представление — абстрактное синтаксическое дерево (AST).

1. Преобразование в DOM-дерево. На основе AST формируется внутреннее DOM-дерево, представляющее математическое выражение в виде набора элементов (символов, индексов, дробей, скобок и т.д.) с учётом правил типографики и расположения.

1. Рендеринг. DOM-дерево преобразуется в видимый формат. MathJax поддерживает три основных режима вывода:

• SVG (масштабируемая векторная графика). Формируется один или несколько SVG-элементов для каждой формулы. Обеспечивает высокое качество при любом масштабе, но может снижать производительность на страницах с большим количеством формул.
• HTML+CSS (с использованием шрифтов). Формула отображается с помощью комбинации HTML-элементов (span, div) и шрифтовых файлов (WOFF, OTF). Этот режим быстрее для статических страниц, но требует загрузки шрифтов.
• Common HTML (CHTML). Упрощённый вариант HTML+CSS, использующий системные шрифты браузера. Наиболее быстрый, но с ограниченной типографикой.

Пользователь может выбрать предпочтительный режим вывода или настроить автоматический выбор в зависимости от браузера.

Возможности и поддерживаемые форматы

MathJax поддерживает следующие языки математической разметки:

• LaTeX. Наиболее популярный формат. MathJax реализует практически все команды стандартного LaTeX для математических формул, включая окружения (align, gather, matrix), символы (греческие буквы, операторы, стрелки), а также макросы и пользовательские команды.
• MathML (Mathematical Markup Language). Стандарт W3C для представления математики в XML. MathJax поддерживает как Presentation MathML (описывает внешний вид), так и Content MathML (описывает смысл выражения).
• AsciiMath. Простой текстовый формат, близкий к тому, как математика записывается в текстовых редакторах (например, sum_(i=1)^n i^2).

Дополнительные возможности:

• Автоматическое определение языка. MathJax может автоматически определять, на каком языке написана формула, и использовать соответствующий парсер.
• Поддержка доступности (Accessibility). Встроенная поддержка экранных дикторов (NVDA, JAWS) через ARIA-атрибуты и генерацию текстового описания формулы (MathML alttext).
• Интерактивность. Возможность масштабирования формулы по клику, копирования в буфер обмена в формате LaTeX или MathML, а также навигации по формуле с клавиатуры.
• Настройка внешнего вида. Пользователь может менять размер шрифта, цвет, отступы и другие CSS-свойства формул через глобальные конфигурации.
• Серверный рендеринг. С помощью пакета mathjax-node можно генерировать SVG-изображения формул на стороне сервера, что полезно для статических сайтов или PDF-генерации.

Применение

MathJax широко используется в веб-среде для отображения математики в:

• Научных и образовательных онлайн-журналах. Крупные издательства, такие как Elsevier, Springer Nature, Taylor & Francis, используют MathJax для отображения формул в статьях.
• Платформах для онлайн-обучения. Системы управления обучением (LMS) — Moodle, Canvas, Blackboard — интегрируют MathJax для отображения математических заданий.
• Вики-движках. MediaWiki (движок Википедии) использует MathJax в качестве одного из расширений для рендеринга формул.
• Форумах и сообществах. Математические форумы (Math StackExchange, Physics StackExchange) применяют MathJax для набора формул в сообщениях.
• Персональных сайтах и блогах. Блогеры и преподаватели встраивают MathJax в свои страницы для публикации лекций и заметок.
• Научных презентациях и документации. Инструменты, такие как Jupyter Notebook, R Markdown и Sphinx, используют MathJax для отображения формул в выходных HTML-файлах.

Производительность и ограничения

MathJax 3.x значительно быстрее предшественника благодаря асинхронной загрузке модулей и оптимизации алгоритмов. Однако при большом количестве формул на странице (сотни и тысячи) может наблюдаться задержка при начальной загрузке, особенно в режиме SVG. Для решения этой проблемы используются:

• Асинхронная загрузка. Формулы рендерятся по мере появления в области видимости (lazy loading).
• Кэширование. Результаты рендеринга идентичных формул кэшируются.
• Серверный рендеринг. Готовые SVG-изображения встраиваются в HTML-код на этапе сборки страницы.

Ограничения MathJax:

• Не поддерживает сложные макросы LaTeX, такие как \usepackage, \documentclass, и не является полноценным компилятором LaTeX. Он предназначен только для математических формул, а не для вёрстки документов.
• Зависимость от JavaScript. Если JavaScript отключён в браузере, формулы не отобразятся. Для решения этой проблемы используется тег <noscript> с альтернативным содержимым.
• Проблемы с производительностью на мобильных устройствах при большом количестве формул в режиме SVG.

Альтернативы

Помимо MathJax, существуют и другие решения для отображения математики в вебе:

• KaTeX. Библиотека от Khan Academy, ориентированная на максимальную скорость рендеринга. KaTeX быстрее MathJax, но поддерживает меньшее количество команд LaTeX и не поддерживает MathML.
• jsMath. Предшественник MathJax, ныне считается устаревшим.
• MathPlayer. Плагин для Internet Explorer, ныне не поддерживается.
• Нативная поддержка MathML в браузерах. Современные браузеры (Firefox, Safari) имеют встроенную поддержку MathML, но она неполная и может отличаться в реализации.

Интересные факты

• MathJax используется на сайте arXiv.org — крупнейшем архиве научных препринтов по физике, математике и информатике.
• В 2012 году проект MathJax получил премию «Software of the Year» от журнала Physics World.
• MathJax поддерживает отображение формул не только в HTML, но и в EPUB-файлах, что позволяет читать математические книги на электронных читалках.
• Исходный код MathJax написан на TypeScript и доступен на GitHub под лицензией Apache 2.0.

Источники

• Официальная документация MathJax (docs.mathjax.org)
• Репозиторий MathJax на GitHub
• Статья «MathJax: A Platform for Mathematics on the Web» (Davide Cervone, 2012)
• Документация MediaWiki по расширению Math