diff --git a/tools/mathml/demos/einstein/index.html b/tools/mathml/demos/einstein/index.html new file mode 100644 index 0000000000..800cf35997 --- /dev/null +++ b/tools/mathml/demos/einstein/index.html @@ -0,0 +1,78 @@ + + + + Формула Эйнштейна — MathML — Дока + + + + + + + + + + +
+

Формула Эйнштейна

+ + + E + = + m + + c + 2 + + +
+ + diff --git a/tools/mathml/demos/menclose/index.html b/tools/mathml/demos/menclose/index.html new file mode 100644 index 0000000000..9ee46b2c54 --- /dev/null +++ b/tools/mathml/demos/menclose/index.html @@ -0,0 +1,74 @@ + + + + Пример menclose элемента — MathML — Дока + + + + + + + + + + +
+ + + x + + + y + + +
+ + diff --git a/tools/mathml/demos/mfrac/index.html b/tools/mathml/demos/mfrac/index.html new file mode 100644 index 0000000000..c79ca29d8b --- /dev/null +++ b/tools/mathml/demos/mfrac/index.html @@ -0,0 +1,73 @@ + + + + Пример дроби — MathML — Дока + + + + + + + + + + +
+ + + a + b + + +
+ + diff --git a/tools/mathml/demos/mi1/index.html b/tools/mathml/demos/mi1/index.html new file mode 100644 index 0000000000..3ce3682f5e --- /dev/null +++ b/tools/mathml/demos/mi1/index.html @@ -0,0 +1,70 @@ + + + + Пример mi элемента — MathML — Дока + + + + + + + + + + +
+ + x + +
+ + diff --git a/tools/mathml/demos/mi2/index.html b/tools/mathml/demos/mi2/index.html new file mode 100644 index 0000000000..821dcb8159 --- /dev/null +++ b/tools/mathml/demos/mi2/index.html @@ -0,0 +1,70 @@ + + + + Пример mi элемента — MathML — Дока + + + + + + + + + + +
+ + sin + +
+ + diff --git a/tools/mathml/demos/mn/index.html b/tools/mathml/demos/mn/index.html new file mode 100644 index 0000000000..5eb0dc4184 --- /dev/null +++ b/tools/mathml/demos/mn/index.html @@ -0,0 +1,70 @@ + + + + Пример mn элемента — MathML — Дока + + + + + + + + + + +
+ + 67 + +
+ + diff --git a/tools/mathml/demos/mo/index.html b/tools/mathml/demos/mo/index.html new file mode 100644 index 0000000000..e419a28a0b --- /dev/null +++ b/tools/mathml/demos/mo/index.html @@ -0,0 +1,72 @@ + + + + Пример mo элемента — MathML — Дока + + + + + + + + + + +
+ + x + + + 1 + +
+ + diff --git a/tools/mathml/demos/mphantom/index.html b/tools/mathml/demos/mphantom/index.html new file mode 100644 index 0000000000..4e63fbaf6c --- /dev/null +++ b/tools/mathml/demos/mphantom/index.html @@ -0,0 +1,74 @@ + + + + Пример mphantom элемента — MathML — Дока + + + + + + + + + + +
+ + x + + + + y + + +
+ + diff --git a/tools/mathml/demos/mroot/index.html b/tools/mathml/demos/mroot/index.html new file mode 100644 index 0000000000..0ae82c8b1b --- /dev/null +++ b/tools/mathml/demos/mroot/index.html @@ -0,0 +1,73 @@ + + + + Пример кубического корня — MathML — Дока + + + + + + + + + + +
+ + + x + 3 + + +
+ + diff --git a/tools/mathml/demos/mrow/index.html b/tools/mathml/demos/mrow/index.html new file mode 100644 index 0000000000..9b99ffb269 --- /dev/null +++ b/tools/mathml/demos/mrow/index.html @@ -0,0 +1,81 @@ + + + + Пример группировки — MathML — Дока + + + + + + + + + + +
+ + + + a + + + b + + + c + + + d + + + +
+ + diff --git a/tools/mathml/demos/mspace/index.html b/tools/mathml/demos/mspace/index.html new file mode 100644 index 0000000000..c89c136652 --- /dev/null +++ b/tools/mathml/demos/mspace/index.html @@ -0,0 +1,72 @@ + + + + Пример mspace элемента — MathML — Дока + + + + + + + + + + +
+ + x + + y + +
+ + diff --git a/tools/mathml/demos/msqrt1/index.html b/tools/mathml/demos/msqrt1/index.html new file mode 100644 index 0000000000..80053d99dd --- /dev/null +++ b/tools/mathml/demos/msqrt1/index.html @@ -0,0 +1,72 @@ + + + + Первый пример квадратного корня — MathML — Дока + + + + + + + + + + +
+ + + x + + +
+ + diff --git a/tools/mathml/demos/msqrt2/index.html b/tools/mathml/demos/msqrt2/index.html new file mode 100644 index 0000000000..cd21a64ec5 --- /dev/null +++ b/tools/mathml/demos/msqrt2/index.html @@ -0,0 +1,79 @@ + + + + Второй пример квадратного корня — MathML — Дока + + + + + + + + + + +
+ + + + + x + 2 + + + + 1 + + + +
+ + diff --git a/tools/mathml/demos/msub/index.html b/tools/mathml/demos/msub/index.html new file mode 100644 index 0000000000..51750ae44b --- /dev/null +++ b/tools/mathml/demos/msub/index.html @@ -0,0 +1,73 @@ + + + + Пример индекса — MathML — Дока + + + + + + + + + + +
+ + + a + 1 + + +
+ + diff --git a/tools/mathml/demos/msubsup/index.html b/tools/mathml/demos/msubsup/index.html new file mode 100644 index 0000000000..9d8975881e --- /dev/null +++ b/tools/mathml/demos/msubsup/index.html @@ -0,0 +1,74 @@ + + + + Пример индекса и степени — MathML — Дока + + + + + + + + + + +
+ + + x + 1 + 2 + + +
+ + diff --git a/tools/mathml/demos/msup/index.html b/tools/mathml/demos/msup/index.html new file mode 100644 index 0000000000..dfcb7ddbee --- /dev/null +++ b/tools/mathml/demos/msup/index.html @@ -0,0 +1,73 @@ + + + + Пример степени — MathML — Дока + + + + + + + + + + +
+ + + x + 2 + + +
+ + diff --git a/tools/mathml/demos/mtable/index.html b/tools/mathml/demos/mtable/index.html new file mode 100644 index 0000000000..b7a9ba65a4 --- /dev/null +++ b/tools/mathml/demos/mtable/index.html @@ -0,0 +1,79 @@ + + + + Пример матрицы — MathML — Дока + + + + + + + + + + +
+ + + + 1 + 2 + + + 3 + 4 + + + +
+ + diff --git a/tools/mathml/demos/mtext/index.html b/tools/mathml/demos/mtext/index.html new file mode 100644 index 0000000000..46f9dce5a9 --- /dev/null +++ b/tools/mathml/demos/mtext/index.html @@ -0,0 +1,73 @@ + + + + Пример mtext элемента — MathML — Дока + + + + + + + + + + +
+ + v + = + 60 + км/ч + +
+ + diff --git a/tools/mathml/demos/munderover/index.html b/tools/mathml/demos/munderover/index.html new file mode 100644 index 0000000000..d0bd200016 --- /dev/null +++ b/tools/mathml/demos/munderover/index.html @@ -0,0 +1,78 @@ + + + + Пример верхней и нижней записи — MathML — Дока + + + + + + + + + + +
+ + + + + i + = + 1 + + n + + +
+ + diff --git a/tools/mathml/demos/pythagoras/index.html b/tools/mathml/demos/pythagoras/index.html new file mode 100644 index 0000000000..f9d325ce69 --- /dev/null +++ b/tools/mathml/demos/pythagoras/index.html @@ -0,0 +1,85 @@ + + + + Формула Пифагора — MathML — Дока + + + + + + + + + + +
+

Формула Пифагора

+ + + + a + 2 + + + + + b + 2 + + = + + c + 2 + + +
+ + diff --git a/tools/mathml/demos/quadequ/index.html b/tools/mathml/demos/quadequ/index.html new file mode 100644 index 0000000000..1f24f5fe96 --- /dev/null +++ b/tools/mathml/demos/quadequ/index.html @@ -0,0 +1,98 @@ + + + + Корни квадратного уравнения — MathML — Дока + + + + + + + + + + +
+

Корни квадратного уравнения

+ + + x + = + + + ( + - + b + ± + + + + b + 2 + + - + 4 + a + c + + + ) + + + 2 + a + + + +
+ + diff --git a/tools/mathml/demos/semantics/index.html b/tools/mathml/demos/semantics/index.html new file mode 100644 index 0000000000..6dd80e2483 --- /dev/null +++ b/tools/mathml/demos/semantics/index.html @@ -0,0 +1,73 @@ + + + + Пример semantics элемента — MathML — Дока + + + + + + + + + + +
+ + + x + Переменная x + + +
+ + diff --git a/tools/mathml/demos/simple/index.html b/tools/mathml/demos/simple/index.html new file mode 100644 index 0000000000..fcb23d832b --- /dev/null +++ b/tools/mathml/demos/simple/index.html @@ -0,0 +1,74 @@ + + + + Простая формула — MathML — Дока + + + + + + + + + + +
+

Простейшая формула

+ + + x + + + 5 + +
+ + diff --git a/tools/mathml/demos/style/index.html b/tools/mathml/demos/style/index.html new file mode 100644 index 0000000000..a80a8ecd75 --- /dev/null +++ b/tools/mathml/demos/style/index.html @@ -0,0 +1,86 @@ + + + + Стилизация формулы — MathML — Дока + + + + + + + + + + +
+

Формула Эйнштейна

+ + + E + = + m + + c + 2 + + +
+ + diff --git a/tools/mathml/demos/tylor/index.html b/tools/mathml/demos/tylor/index.html new file mode 100644 index 0000000000..f25038fafc --- /dev/null +++ b/tools/mathml/demos/tylor/index.html @@ -0,0 +1,112 @@ + + + + Формула Тейлора — MathML — Дока + + + + + + + + + + +
+

Формула Тейлора

+ + + f + (x) + = + + + + n + = + 0 + + + + + + + f + + ( + n + ) + + + ( + a + ) + + + n + ! + + + + + ( + x + - + a + ) + + n + + +
+ + diff --git a/tools/mathml/index.md b/tools/mathml/index.md new file mode 100644 index 0000000000..22b50f4b3d --- /dev/null +++ b/tools/mathml/index.md @@ -0,0 +1,1007 @@ +--- +title: "MathML — язык для математических формул в браузере" +description: "Разбираемся, что такое MathML, зачем он нужен, как писать математические формулы прямо в HTML и когда он может заменить KaTeX и MathJax." +authors: + - drakesbot12 +keywords: + - mathml + - equations + - mathematics + - formula + - mathjax + - katex +related: + - html/details + - html/span + - css/display +tags: + - article +--- + +## Что такое MathML и зачем он нужен + +Когда на сайте нужно показать математическую формулу, разработчики обычно используют изображения, `KaTeX`, `MathJax` или пишут формулы в синтаксисе `LaTeX`. Однако браузеры умеют отображать математические выражения самостоятельно благодаря технологии `MathML`. + +`MathML` (*Mathematical Markup Language*) — это язык разметки для описания математических формул. Он входит в семейство веб-стандартов W3C и позволяет создавать дроби, степени, индексы, корни, матрицы, интегралы и другие математические конструкции прямо в HTML-документе. + +В отличие от изображения, формула в `MathML` остаётся полноценной частью страницы. Браузер понимает её структуру, поэтому текст формулы можно выделять, копировать, масштабировать без потери качества и корректно озвучивать с помощью программ экранного доступа. + +## Почему раньше использовали картинки + +Долгое время поддержка `MathML` в браузерах была неполной и нестабильной. Из-за этого математические выражения часто сохраняли в виде изображений: + +```html +E = mc² +``` + +Такой подход был простым, но имел множество недостатков: +- формулы размывались при увеличении; +- их нельзя было выделить и скопировать; +- поисковые системы не понимали содержимое формулы; +- возникали проблемы с доступностью для пользователей скринридеров; +- приходилось создавать отдельное изображение для каждой формулы. + +Позже появились библиотеки вроде `MathJax` и `KaTeX`, которые позволяли писать формулы в привычном синтаксисе `LaTeX` и автоматически преобразовывали их для отображения в браузере. + +## Чем MathML отличается от LaTeX + +Новички часто путают `MathML` и `LaTeX`, хотя это разные технологии. + +`LaTeX` — это язык подготовки документов и записи математических формул. Например, квадратное уравнение в `LaTeX` может выглядеть так: + +```latex +x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} +``` + +`MathML` описывает ту же формулу с помощью XML-подобной разметки: + +```html + + x + = + ... + +``` + +Главное отличие заключается в том, что `LaTeX` ориентирован на удобство написания человеком, а `MathML` — на структурированное описание формулы для браузеров и других программ. + +На практике многие инструменты автоматически преобразуют `LaTeX` в `MathML`, поэтому разработчику не всегда приходится писать `MathML` вручную. + +## Поддержка браузеров + +Исторически именно поддержка браузеров была главным препятствием для распространения `MathML`. Некоторые браузеры отображали формулы корректно, другие поддерживали лишь часть возможностей, а где-то технология вовсе отсутствовала. + +Ситуация изменилась с появлением стандарта `MathML Core`. Сегодня современные версии Chrome, Edge, Firefox и Safari поддерживают основные возможности `MathML` без дополнительных библиотек и полифилов. + +Это означает, что простые и даже достаточно сложные математические формулы можно вставлять прямо в HTML и рассчитывать на корректное отображение у большинства пользователей. + +## Что такое MathML Core + +Изначально спецификация `MathML` была очень большой и содержала множество возможностей, которые браузеры реализовывали по-разному или не поддерживали вовсе. Из-за этого разработчики долгое время не могли рассчитывать на одинаковое отображение формул во всех браузерах. + +Чтобы решить эту проблему, была создана спецификация `MathML Core`. + +`MathML Core` — это современный поднабор `MathML`, который включает наиболее востребованные элементы и определяет единые правила их отображения. Именно на эту спецификацию ориентируются современные браузеры. + +Благодаря появлению `MathML Core` поддержка математических формул стала более предсказуемой и совместимой между различными браузерами. В частности, полноценная реализация `MathML Core` появилась в Chrome и браузерах на базе Chromium, что стало важным шагом для распространения технологии в веб-разработке. + +Сегодня большинство элементов, используемых для создания дробей, корней, степеней, индексов, матриц и других распространённых математических конструкций, входят в `MathML Core` и поддерживаются современными версиями Chrome, Edge, Firefox и Safari. + +Если в документации или статьях упоминается поддержка `MathML` в современных браузерах, чаще всего речь идёт именно о поддержке стандарта `MathML Core`. + +## Где используется MathML сегодня + +Несмотря на то что многие проекты продолжают использовать `KaTeX` или `MathJax`, `MathML` постепенно возвращается в веб-разработку благодаря улучшенной поддержке браузеров. + +Его можно встретить: +- в электронных учебниках и образовательных платформах; +- в научных публикациях и исследовательских проектах; +- в технической документации; +- в системах компьютерной алгебры; +- в приложениях для изучения математики и физики; +- в генераторах формул и редакторах математических выражений. + +Особенно полезен `MathML` там, где важны доступность, семантика и возможность работать с формулой как с обычным содержимым страницы, а не как с картинкой. + +## Как выглядит MathML-документ + +Простейшая структура формулы выглядит так: + +```html + + x + + + 5 + +``` + + + +Внутри MathML каждый элемент отвечает за свою часть математического выражения: + +- `` — корневой элемент, внутри которого располагается вся формула; +- `` (*Math Identifier*) — переменная или математический идентификатор, например `x`, `y` или `sin`; +- `` (*Math Operator*) — математический оператор, например `+,` `−`, `=`, `×` или `∑`; +- `` (*Math Number*) — число. + +Такой подход позволяет браузеру понимать структуру формулы, а не просто отображать набор символов. Благодаря этому математические выражения корректно озвучиваются скринридерами, масштабируются вместе со страницей и остаются доступными для копирования и обработки. + +## Из чего состоят формулы + +Любая формула в `MathML` собирается из небольших элементов, каждый из которых отвечает за определённый тип содержимого: переменные, числа, операторы или обычный текст. Чаще всего для этого используются четыре базовых контейнера. + +### Текстовые контейнеры +#### `` — математический идентификатор + +Элемент `` используется для переменных, названий функций и других математических обозначений. + +```html + + x + +``` + + + +Обычно внутри `` находится одна буква, но можно использовать и несколько символов: + +```html + + sin + +``` + + + +#### `` — число + +Элемент `` предназначен для чисел. + +```html + + 67 + +``` + + + +Можно использовать целые числа, дроби, десятичные значения и другие числовые записи. + +#### `` — оператор + +Элемент `` описывает математические операторы и специальные символы. + +```html + + x + + + 1 + +``` + + + +Через `` обычно записывают: +- арифметические операции (`+`, `−`, `×`, `÷`); +- знаки сравнения (`=`, `<`, `>`); +- скобки; +- символы суммирования (`∑`); +- интегралы (`∫`) и другие специальные обозначения. + +#### `` — обычный текст + +Иногда внутри формулы нужно разместить пояснение или текстовую подпись. Для этого используется элемент . + +```html + + v + = + 60 + км/ч + +``` + + + +Этот элемент полезен, когда формула содержит единицы измерения, комментарии или другие текстовые данные. + +### Группировка выражений + +Когда формула становится сложнее пары символов, возникает необходимость объединять несколько элементов в одну логическую группу. Для этого используется элемент ``. Он не влияет на внешний вид формулы напрямую, но помогает браузеру понять структуру выражения. Можно сказать, что `` играет роль скобок на уровне разметки. Например, дробь с суммой в числителе и знаменателе: + +```html + + + + a + + + b + + + c + + + d + + + +``` + + + +Без `` браузеру было бы сложнее определить, какие элементы относятся к числителю, а какие — к знаменателю. + +### Дроби и корни + +`MathML` содержит специальные элементы для математических конструкций, которые сложно выразить обычным текстом. + +#### Дроби + +Для создания дробей используется элемент ``. Первый дочерний элемент становится числителем, второй — знаменателем. + +```html + + + a + b + + +``` + + + +Внутри числителя и знаменателя можно размещать любые другие элементы MathML, включая степени, корни и даже другие дроби. + +#### Квадратный корень + +Для квадратного корня существует элемент ``. + +```html + + + x + + +``` + + + +Внутри корня может находиться как один элемент, так и целое выражение: + +```html + + + + + x + 2 + + + + 1 + + + +``` + + + +#### Корень произвольной степени + +Если нужен не квадратный корень, а корень произвольной степени, используется элемент ``. + +```html + + + x + 3 + + +``` + + + +Так будет записан кубический корень из `x`. Первый дочерний элемент задаёт подкоренное выражение, второй — показатель корня. + +### Степени, индексы и пределы + +Одни из самых часто используемых элементов MathML отвечают за степени, индексы и различные математические обозначения над и под символами. + +#### Верхний индекс + +Элемент `` создаёт верхний индекс. + +```html + + + x + 2 + + +``` + + + +Первый элемент задаёт основание, второй — показатель степени. + +#### Нижний индекс + +Для нижнего индекса используется ``. + +```html + + + a + 1 + + +``` + + + +Такая запись часто используется в математике, физике и программировании. + +#### Индекс и степень одновременно + +Если нужны и нижний индекс, и степень, используется элемент ``. + +```html + + + x + 1 + 2 + + +``` + + + +Порядок дочерних элементов такой: +- Основание. +- Нижний индекс. +- Верхний индекс. + +#### Суммы и пределы + +Для размещения элементов над и под символами используются специальные элементы: +- `` — содержимое под символом; +- `` — содержимое над символом; +- `` — содержимое одновременно сверху и снизу. + +Например, математическая сумма: + +```html + + + + + i + = + 1 + + n + + +``` + + + +Получится привычная запись суммы от `i = 1` до `n`. +Похожим образом можно оформлять пределы, произведения и другие математические операторы. + +### Матрицы и таблицы + +Для создания матриц и других табличных структур используются элементы: +- `` — таблица; +- `` — строка; +- `` — ячейка. + +Простейшая матрица 2 × 2 выглядит так: + +```html + + + + 1 + 2 + + + 3 + 4 + + + +``` + + + +Структура очень похожа на HTML-таблицы: + +```bash +mtable +├── mtr +│ ├── mtd +│ └── mtd +└── mtr + ├── mtd + └── mtd +``` + +На практике эти элементы используются не только для матриц, но и для систем уравнений, определителей и других математических конструкций, где требуется строгая табличная структура. + +## Стилизация формул + +`MathML` встроен в браузер и является частью DOM-дерева страницы. Это значит, что к математическим элементам можно применять CSS почти так же, как к обычным HTML-элементам. Например, изменить размер формулы: + +```css +math { + font-size: 1.5rem; +} +``` + +Изменить цвет: + +```css +math { + color: crimson; +} +``` + +Сделать отдельные части формулы другого цвета: + +```css +mi { + color: dodgerblue; +} +``` + + + +Также можно использовать привычные свойства: + +- [`font-size`](/css/font-size/); +- [`color`](/css/color/); +- [`background`](/css/background/); +- [`margin`](/css/margin/); +- [`padding`](/css/padding/); +- [`display`](/css/display/). + +Для больших формул часто используют блочное отображение: + +```html + + E + = + m + + c + 2 + + +``` + + + + +По умолчанию формулы отображаются как строчные элементы и располагаются внутри текста. Атрибут `display="block"` переносит формулу на отдельную строку и центрирует её так же, как это принято в учебниках и научных статьях. + +Для длинных выражений полезно добавить: + +```css +math { + overflow-x: auto; +} +``` + +Тогда формула не выйдет за пределы экрана на мобильных устройствах. + +## Полезные элементы, о которых редко говорят + +Большинство формул можно собрать из десятка основных элементов, но в `MathML` есть и менее известные теги. + +### `` + +Создаёт дополнительный отступ. + +```html + + x + + y + +``` + + + +Полезен, когда нужно вручную настроить расстояние между элементами. + +### `` + +Позволяет обводить выражение рамкой или другими декоративными элементами. + + + + x + + + y + + + + + +Можно использовать разные варианты оформления: рамки, круги, диагональные линии и другие обозначения. + + + +### `` + +Создаёт невидимый элемент, который занимает место в формуле. + +```html + + x + + + + y + + +``` + + + +Часто применяется для выравнивания сложных математических выражений. + +### `` + +Позволяет хранить дополнительную информацию о формуле. + +```html + + + x + Переменная x + + +``` + + + +Обычно используется специализированными математическими редакторами и инструментами доступности. + +## Практические примеры + +Теперь попробуем собрать несколько известных формул шаг за шагом. + +### Формула Пифагора + +Итоговая формула выглядит так: + + + +**Шаг 1. Создаём левую часть:** + +```html + + + a + 2 + + +``` +**Шаг 2. Добавляем второе слагаемое:** + +```html + + + a + 2 + + + + + + + b + 2 + + +``` +**Шаг 3. Добавляем знак равенства и правую часть:** + +```html + + + a + 2 + + + + + + + b + 2 + + + = + + + c + 2 + + +``` + +### Квадратное уравнение + +Формула решения квадратного уравнения: + + + +**Шаг 1. Создаём левую часть:** + +```html + + x + = + +``` + +**Шаг 2. Добавляем дробь:** + +```html + + x + = + + + + + + +``` + +**Шаг 3. Собираем знаменатель:** + +```html + + 2 + a + +``` + +**Шаг 4. Добавляем корень:** + +```html + + ... + +``` + +**Шаг 5. Собираем выражение под корнем:** + +```html + + b + 2 + + +- + +4 +a +c +``` + +**Шаг 6. Получаем итоговую формулу:** + +```html + + x + = + + + + ( + - + b + ± + + + + + b + 2 + + + - + + 4 + a + c + + + + ) + + + + 2 + a + + + +``` + +### Формула Тейлора + +Формула Тейлора показывает, как представить функцию в виде бесконечной суммы. + + + +**Шаг 1. Создаём функцию:** + +```html +f +( +x +) +``` + +**Шаг 2. Добавляем знак равенства:** + +```html += +``` + +**Шаг 3. Создаём знак суммы:** + +```html + + + + + n + = + 0 + + + + +``` + +**Шаг 4. Добавляем дробь:** + +```html + + ... + +``` + +**Шаг 5. Добавляем степень:** + +```html + + + ( + x + + a + ) + + + n + +``` + +После объединения всех частей получится полноценная формула Тейлора: + +```html + + f + (x) + = + + + + + n + = + 0 + + + + + + + + f + + ( + n + ) + + + ( + a + ) + + + + n + ! + + + + + + ( + x + + a + ) + + n + + +``` + +### Формула Эйнштейна + +Самая известная формула физики: + + + +Собирается очень просто. + +**Шаг 1. Добавляем энергию:** + +```html +E +``` + +**Шаг 2. Добавляем знак равенства:** + +```html += +``` + +**Шаг 3. Добавляем массу:** + +```html +m +``` + +**Шаг 4. Добавляем скорость света в квадрате:** + +```html + + c + 2 + +``` + +Итог: + +```html + + E + = + m + + + c + 2 + + +``` + +# MathML против KaTeX и MathJax + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВозможностьMathMLKaTeXMathJax
Встроен в браузер
Требует JavaScript
Поддержка LaTeXЧастично
Скорость работыОчень высокаяВысокаяСредняя
ДоступностьОтличнаяХорошаяХорошая
Размер библиотеки0 КББолее сотни КББолее 1 МБ
+ +## Когда НЕ стоит использовать MathML + +Несмотря на множество преимуществ, `MathML` подходит не для всех задач. В некоторых случаях удобнее использовать другие решения. + +### Если весь контент уже написан в LaTeX + +Во многих образовательных платформах, научных публикациях и системах управления контентом формулы хранятся в формате `LaTeX`. Переписывать большое количество существующих формул на `MathML` обычно не имеет смысла. + +В таких ситуациях чаще используют инструменты, которые автоматически преобразуют `LaTeX` в `MathML` или отображают его с помощью `KaTeX` и `MathJax`. + +### Если нужен полный набор возможностей LaTeX + +Хотя `MathML` позволяет создавать очень сложные математические конструкции, экосистема `LaTeX` существует десятилетиями и включает огромное количество пакетов для научной и технической вёрстки. + +Если проект активно использует специфические возможности `LaTeX`, перенос на чистый `MathML` может оказаться неудобным или потребовать дополнительных инструментов. + +### Если требуется поддержка старых браузеров + +Современные браузеры хорошо поддерживают `MathML Core`, однако в старых версиях браузеров поддержка может быть неполной или отсутствовать вовсе. + +Если приложение должно одинаково работать в устаревших браузерах, может потребоваться использование `KaTeX`, `MathJax` или других решений с дополнительными механизмами совместимости. + +### Если пользователи вводят формулы самостоятельно + +Большинство людей знакомы с синтаксисом `LaTeX`, но редко пишут формулы вручную на `MathML`. + +Например, запись: + +```latex +\frac{a+b}{c+d} +``` + +обычно воспринимается гораздо проще, чем эквивалентная запись на `MathML`. + +Поэтому в редакторах формул и пользовательских интерфейсах чаще позволяют вводить выражения в формате `LaTeX`, а затем автоматически преобразуют их в `MathML` для отображения. + + +## Когда стоит использовать MathML + +`MathML` особенно хорошо подходит для проектов, где формулы являются важной частью контента. + +Например: +- документация по математике и физике; +- образовательные платформы; +- электронные учебники; +- научные публикации; +- энциклопедии; +- сайты с большим количеством формул; +- генерация формул из `LaTeX`. + +Если на странице всего несколько формул, можно написать их вручную. + +Если формул сотни или тысячи, обычно используют генераторы, которые автоматически преобразуют `LaTeX` в `MathML`. + +## Итог + +`MathML` отлично подходит для публикации математического контента в вебе, особенно когда важны семантика, доступность и отсутствие дополнительных библиотек. Однако в проектах, где уже используется `LaTeX`, требуется поддержка старых браузеров или пользователи самостоятельно вводят формулы, другие решения могут оказаться более удобными.