Памятка по использованию MathML

6 марта 2026

Иногда в этом блоге я использую математические формулы. Добавить формулу в статью всегда было проблемой. Приходилось либо создавать по картинке на каждую формулу, либо вместо формул использовать отрывки кода на Python. К счастью, прогресс не стоит не месте, и теперь у нас есть MathML. Последний является частью стандарта HTML5.

MathML поддерживается всеми современными веб-браузерами, в том числе и мобильными. Дольше всего поддержки не было в Chrome и его производных. На самом деле, когда-то поддержка была. Однако в 2013-м ее удалили из-за опасений на предмет безопасности кода, и вернули только в 2023-м. Таким образом, на сегодняшний день MathML не работает лишь у тех, кто (1) пользуется Chrome и (2) не обновлялся три года или дольше. Если у вас настолько старый браузер, то отсутствие поддержки MathML – это меньшая из проблем.

Рассмотрим простой пример использования MathML:

π = 3.14159...

В коде страницы это выгодяти так:

<math display="block">
  <mi>&pi;</mi> <mo>=</mo> <mn>3.14159...</mn>
</math>

Тэг <math> говорит, что у нас здесь формула. Атрибут display="block" означает, что формула является блочным элементом. По умолчанию формулы считаются строчными (inline) элементами и выглядят так: $π = 3.14159...$ Идентификаторы (переменные) оборачиваются в тэги <mi>, операторы – в тэги <mo>, а числа – в тэги <mn>. Также элементы можно объединять в группы при помощи <mrow>.

Чтобы получить деление, используем <mfrac>:

<mfrac>
  <mrow><mi>a</mi> <mo>+</mo> <mi>b</mi></mrow>
  <mi>c</mi>
</mfrac>

Здесь и далее я опускаю <math display="block"> для краткости. Приведенный отрывок дает следующий результат:

\frac{a + b}{c}

Для корня квадратного и корня n-ой степени используем <msqrt> и <mroot> соответственно:

<msqrt><mi>n</mi></msqrt>
<mo lspace="0.5em">+</mo>
<mroot><mi>m</mi><mn>3</mn></mroot>

Результат:

\sqrt{n} + \sqrt[3]{m}

Заметьте, что степень корня указывается вторым значением. Также обратите внимание на атрибут lspace="0.5em". С его помощью я увеличил отступ слева от плюса. Мне показалось, что так формула выглядит красивее. Для увеличения отступа справа есть rspace. Характерно, что для <mi> и <mn> названные атрибуты не работают.

Рассмотрим более сложный пример:

<munderover>
  <mo>&sum;</mo>
  <mpadded voffset="-0.2em">
    <mrow><mi>i</mi> <mo>=</mo> <mn>1</mn></mrow>
  </mpadded>
  <mpadded voffset="0.2em">
    <mi>n</mi>
  </mpadded>
</munderover>

<msup>
  <mi>i</mi>
  <mn>3</mn>
</msup>

<mo>=</mo>

<msup>
<mrow>
  <mo>(</mo>
  <mfrac>
    <mrow>
    <mi>n</mi><mo lspace="0.3em">(</mo><mi>n</mi><mo>+</mo><mn>1</mn><mo>)</mo>
    </mrow>
    <mn>2</mn>
  </mfrac>
  <mo>)</mo>
</mrow>
<mn>2</mn>
</msup>

Вот как это выглядит:

\sum_{i = 1}^{n} i^{3} = {(\frac{n (n + 1)}{2})}^{2}

Примечание: В Chrome для Android на момент написания этих строк имелся баг, из-за которого в формуле рисовались маленькие скобки вместо больших. При этом в Chrome для iOS, а также Windows и MacOS формула отображается правильно. Данная проблема была зарепорчена разработчикам.

Тэг <munderover> позволяет присоединить элементы сверху и снизу выражения. Для символа суммы используем ∑, для произведения – ∏, для интеграла – ∫. Мне не понравилось, как формула выглядит в некоторых браузерах, поэтому я увеличил вертикальные отступы при помощи тэгов <mpadded>.

Для верхнего индекса или возведения в степень используем тэг <msup>. Аналогично, для нижнего индекса есть <msub>. Если нужны и верхний и нижний индексы, то используем <msubsup>.

Чтобы скобки растянулись по вертикали, нужно взять все выражение вместе со скобками в <mrow>. Помимо круглых скобок допускается использовать квадратные и фигурные. Для взятия по модулю можно писать <mo>|</mo>. Для округления в меньшую сторону используем уголки &lfloor; и &rfloor;, а для округления в большую – &lceil; и &rceil;.

По моим представлениям, данной шпаргалки должно хватать в большинстве случаев. Если же в ней чего-то не нашлось, то рекомендую обратиться к документации на developer.mozilla.org.