Тег <math> (от английского mathematics, «математика») задаёт одну математическую формулу, записанную на языке MathML. Браузер сам рисует дроби, степени, корни и знаки суммы, и картинки с формулами для этого не нужны. Тег парный: закрывающий </math> обязателен.
Внутри math пишутся свои теги: mi, mn, mo, mrow, mfrac и другие. Отдельными страницами в шпаргалке они не описаны, их разбирают разделы этой страницы. Как и svg, формула подчиняется правилам отдельного языка внутри HTML, и многие привычки обычной разметки здесь не работают.
<math>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
</math>В этой статье
- Тег math в HTML: что это и чем он похож на svg
- Как записать формулу: mi, mn, mo и mrow
- display: формула в строке или отдельным блоком
- Дроби, степени и корни: mfrac, msup, msqrt
- Таблицы и матрицы: mtable, mtr и mtd
- Какие теги пишут внутри math
- Цвет и размер формулы: CSS и атрибуты
- Доступность формулы
- Атрибуты тега math
- Поддержка браузерами: где работает math
Тег math в HTML: что это и чем он похож на svg
MathML (от английского Mathematical Markup Language) описывает формулу вложенными тегами. Разбор страницы помещает math и всё внутри в отдельное пространство имён MathML. У такого элемента свой класс MathMLElement, а вложенные теги считаются MathML-тегами со своими правилами.
Поэтому document.createElement("math") создаёт не формулу, а неизвестный HTML-элемент: разметка выглядит так же, но вместо формулы на экране просто цифры подряд. Для формулы из скрипта нужен createElementNS с адресом пространства имён.
const NS = "http://www.w3.org/1998/Math/MathML";
const bad = document.createElement("math"); // HTMLUnknownElement
const good = document.createElementNS(NS, "math"); // MathMLElementПример: что создаёт браузер
Кнопки собирают одну и ту же дробь тремя способами. Класс и пространство имён читаются из страницы после каждого нажатия.
Поддерживают все браузеры: по MDN, тег доступен везде с января 2023 года. Формат описан в спецификации MathML Core.
Как записать формулу: mi, mn, mo и mrow
Формула собирается из мелких частей, и у каждой части свой тег. Тег mi (identifier) записывает переменную или название функции, mn (number) число, mo (operator) знак действия, скобку или запятую. Тег mrow объединяет несколько частей в одну группу, чтобы остальные теги считали её одним целым: например, числитель из трёх частей в mfrac.
Отступы вокруг знаков браузер подбирает сам, поэтому пробелы между тегами не нужны. Текст, записанный прямо внутри math без этих тегов, на экране не появляется: ширина и высота такой формулы равны нулю.
<math>
<mrow>
<mi>a</mi><mo>+</mo><mi>b</mi>
</mrow>
<mo>=</mo>
<mi>c</mi>
</math>display: формула в строке или отдельным блоком
По умолчанию формула строчная: она стоит в одной строке с текстом и сжимается, чтобы не раздвигать строки. Атрибут display="block" выносит формулу в отдельный блок на всю ширину, и в нём она рисуется крупнее: пределы суммы стоят над и под знаком. Значение inline совпадает с поведением по умолчанию. В CSS у такой формулы своё значение display: math для строчной и block math для блочной.
<p>Сумма ряда <math display="inline">...</math> сходится.</p>
<math display="block">...</math>Пример: display inline и block
Одна и та же формула в трёх состояниях. Ширина, высота и значение display читаются из формулы после каждого нажатия.
Дроби, степени и корни: mfrac, msup, msqrt
Для дроби нужен mfrac с двумя вложенными частями: числитель и знаменатель. Степень задаёт msup (основание и показатель), индекс внизу msub, оба сразу msubsup. Квадратный корень пишется msqrt, корень другой степени mroot с основанием и показателем. Знак суммы с пределами собирается из munderover: пределы стоят снизу и сверху. Теги munder и mover ставят надпись только снизу или только сверху. У знака интеграла пределы обычно ставят сбоку через msubsup.
<math display="block">
<mi>x</mi><mo>=</mo>
<mfrac>
<mrow><mo>-</mo><mi>b</mi></mrow>
<mrow><mn>2</mn><mi>a</mi></mrow>
</mfrac>
</math>Пример: теги для разных формул
Кнопки показывают формулу и разметку, из которой она собрана.
Таблицы и матрицы: mtable, mtr и mtd
Матрицу и выровненные по столбцам расчёты собирают три тега. Тег mtable задаёт таблицу, mtr строку, mtd ячейку. По смыслу они совпадают с table, tr и td в HTML, но пишутся только внутри math. Скобки вокруг матрицы пишутся отдельными тегами mo в обёртке mrow.
<math>
<mtable>
<mtr><mtd><mn>1</mn></mtd><mtd><mn>2</mn></mtd></mtr>
<mtr><mtd><mn>3</mn></mtd><mtd><mn>4</mn></mtd></mtr>
</mtable>
</math>Матрицу 2 на 2 можно посмотреть в примере выше, кнопка «Матрица».
Какие теги пишут внутри math
Основные теги внутри math
| Тег | Что записывает |
|---|---|
mi | переменную или название функции |
mn | число |
mo | знак действия, скобку, запятую |
mtext | обычный текст внутри формулы |
mspace | пробел заданной ширины |
mrow | группу частей |
mfrac | дробь |
msqrt, mroot | корень |
msub, msup, msubsup | нижний и верхний индексы |
munder, mover, munderover | надпись под символом и над ним |
mtable, mtr, mtd | таблицу, строку и ячейку |
Устаревший mfenced
Тег mfenced когда-то добавлял скобки и запятые вокруг списка. Он устарел и в стандарт не вошёл: скобки рисует только Safari. Вместо него пишут mrow с тегами mo.
Ширина формулы показывает, нарисованы ли скобки и запятая.
Обычный HTML внутри math
Обычные HTML-теги внутри math не работают. Разбор страницы выносит div наружу, и все теги после него тоже оказываются вне формулы. Исключение: текстовые теги mtext, mi, mn, mo и ms. Внутри них разметка остаётся на месте, например тег b.
Кнопки показывают, где оказывается div и остаётся ли b внутри mtext.
Цвет и размер формулы: CSS и атрибуты
Формула наследует color и font-size от родителя, как обычный текст. Поэтому размер формулы меняется размером шрифта, а цвет свойством color. Те же задачи решают атрибуты mathcolor, mathsize и mathbackground, но MDN считает их устаревшими, поэтому лучше писать CSS.
math {
font-size: 1.25em;
color: seagreen;
}Пример: цвет, размер и фон
Итоговые значения прочитаны браузером после каждого нажатия.
Доступность формулы
У тега math есть неявная роль math, и программы чтения экрана читают формулу по структуре. Если формула читается плохо, ей добавляют название через aria-label.
<math aria-label="x в квадрате">
<msup><mi>x</mi><mn>2</mn></msup>
</math>Проверка: что видит программа чтения экрана
| Разметка | Что видит программа чтения экрана (по снимку браузера) |
|---|---|
<math><msup>...</msup></math> | формула «x 2»: роль math, название из содержимого |
<math aria-label="x в квадрате">...</math> | формула «x в квадрате» |
Атрибуты тега math
Тег принимает глобальные атрибуты (id, class, style, aria-*) и собственные атрибуты MathML.
| Атрибут | Что делает | Значение по умолчанию |
|---|---|---|
display | block: формула отдельным блоком; inline: в строке | inline |
displaystyle | крупный вид формулы; true делает, например, дробь выше | зависит от display |
mathcolor | цвет формулы; устарел, лучше CSS color | нет |
mathbackground | фон формулы; устарел, лучше CSS background | нет |
mathsize | размер шрифта формулы; устарел, лучше CSS font-size | нет |
scriptlevel | уровень вложенности для размера индексов; Safari не поддерживает | нет |
dir | направление письма: ltr или rtl | нет |
xmlns | пространство имён: нужен в XML-документе, в HTML не нужен | нет |
Полное описание есть на странице MDN.
Поддержка браузерами: где работает math
Формулы понимают все современные браузеры. Версии в таблице взяты из базы совместимости MDN.
const ok = typeof MathMLElement === "function";Пример: таблица поддержки
| Браузер | С какой версии | Заметка |
|---|---|---|
| Chrome | 109 | работает; в версии 24 была частичная реализация, в версии 25 её убрали |
| Edge | 109 | работает на том же движке |
| Firefox | 4 | работает; до версии 4 была частичная реализация только в XHTML |
| Safari | 5.1 | работает |
| Chrome для Android, Firefox для Android, Safari на iOS | 109, 4 и 5 | работает |
Частые ошибки с тегом math
Чаще всего формулу пишут как обычный текст или как HTML, а так она не работает.
| Ошибка | Что получится | Как исправить |
|---|---|---|
<math>\frac{1}{2}</math> (запись из LaTeX) | Ничего не выводится: ширина и высота равны нулю | Записать теги MathML или подключить MathJax или KaTeX |
mfenced | В большинстве браузеров скобок и запятых нет | mrow с тегами mo |
<div> или <p> внутри math | Тег выносится наружу вместе со всем, что идёт после него | Использовать mtext |
document.createElement("math") | Неизвестный HTML-элемент, формулы нет | createElementNS с адресом пространства имён MathML (он записан в примере выше) |
Формула без display там, где нужна отдельная строка | Формула сжата и стоит в строке с текстом | display="block" |
Текст формулы без тегов mi, mn, mo | Формула пустая | Каждую часть записать своим тегом |
