Основы MathML

MathML(Mathematical Markup Language, язык математической разметки) — это язык разметки, предназначенный для представления математических выражений и формул на веб-страницах.

Основным элементом, внутри которого производится разметка MathML, является <math>. Сам он может располагаться в нужном месте нашего HTML-кода, в частности, быть частью строки (пример 1).

Пример 1. Элемент <math>

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>MathML</title> </head> <body> <p>Пример выражения: <math> <mi>x</mi> <mo>=</mo> <mn>6</mn> <mo>+</mo> <mn>7</mn> </math></p> </body> </html>

У элемента <math> есть атрибут display, который определяет, как отображать выражение. Значение по умолчанию inline располагает его как строку. Значение block располагает выражение на новой строке и выравнивает по центру (пример 2).

Пример 2. Атрибут display

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>MathML</title> </head> <body> <p>Пример выражения:</p> <math display="block"> <mi>x</mi> <mo>=</mo> <mn>6</mn> <mo>+</mo> <mn>7</mn> </math> </body> </html>

Практически все элементы MathML начинаются на букву М и пишутся внутри элемента <math>.

<math>
  <mi>a</mi>
</math>

Любой текст, включая отдельные символы, должен располагаться только внутри элементов MathML. Вот так всякие символы и текст писать нельзя.

<math>X</math>

Ниже вложение выполнено корректно, поскольку символ X находится в элементе <mi>, который расположен внутри <math>.

<math><mi>X</mi></math>

Внутрь <math> непосредственно запрещено добавлять элементы HTML, но допустимо вставлять текстовые элементы (<span>, <a>, <input>, <select> и др.) внутрь <mtext>. Блочные элементы, такие как <p>, <div>, <h1> и другие, в MathML не допускаются.

В примере 3 показано использование <select> для создания интерактивного примера.

Пример 3. Добавление <select> в <math>

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>MathML</title> </head> <body> <p>Решите пример:</p> <math display="block"> <mn>4</mn> <mo>+</mo> <mn>9</mn> <mo>=</mo> <mtext> <select onchange="console.log(this.options[this.selectedIndex].value)"> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> </select> </mtext> </math> </body> </html>

Итоги

  • Элемент <math> создаёт математическое выражение и содержит все остальные элементы MathML.
  • Атрибут display со значением block элемента <math> позволяет разместить выражение на новой строке и выровнять его по центру.
  • Любые тексты, буквы и числа должны располагаться только внутрь элементов MathML.
  • HTML-элементы, если они требуются внутри формул, допустимо писать внутри элемента <mtext>, при этом набор HTML-элементов ограничен.

Перейти к заданиям

Автор: Влад Мержевич
Последнее изменение: 14.04.2024

См. также