MathML in HTML5

Getting started with MathML

In this article, we will take a simple HTML document and see how to add MathML formulas into it, introducing a few elements along the way.

Prerequisites:	Basic computer literacy, basic software installed, basic knowledge of working with files, and HTML basics (study Introduction to HTML.)
Objective:	To understand the basic syntax of MathML and how to integrate it in HTML pages.

Inserting formulas in HTML via the element

MathML uses the same syntax as HTML to represent a tree of elements and attributes. In particular, each mathematical formula is represented by an element which can be placed inside an HTML page. In the following document, it is inside a paragraph of text:

doctype html> html lang="en-US"> head> title>My first math pagetitle> head> body> p> The fraction math> mfrac> mn>1mn> mn>3mn> mfrac> math> is not a decimal number. p> body> html> 

The element specifies a fraction with a numerator (its first child) and a denominator (its second child). This is how it renders in your browser:

Warning: If you just see «1 3» instead of a fraction, then your browser may not support MathML. Check out the browser compatibility table for further details.

The display attribute

Note that in the previous example, the formula is on the same line as the text of the paragraph. However, it is quite common to instead render large mathematical formulas centered on their own line as shown below. To achieve that, you need to attach a display=»block» attribute on the element.

doctype html> html lang="en-US"> head> title>My first math pagetitle> head> body> p> The fraction math display="block"> mfrac> mn>1mn> mn>3mn> mfrac> math> is not a decimal number. p> body> html> 

You may also notice some subtle change in the appearance: the text and vertical spacing of the fraction becomes a bit bigger. Without the display=»block» attribute, the height is minimized to avoid disturbing the flow of the surrounding text. With the display=»block» attribute, priority is instead put on legibility of the mathematical formula.

Note: This corresponds to the LaTeX’s concept of inline formulas (delimited by dollar signs $. $ ) and display formulas (delimited by \[. \] ).

Note: The appearance change mentioned above is actually controlled by the math-style property which is initially normal for and compact otherwise. In some MathML subtrees, this property can then automatically become compact but we will ignore this subtlety for this introductory tutorial. Again, this is similar to LaTeX.

Grouping with the element

The element can actually contain an arbitrary number of children and will essentially render them in a row. For instance, the simple formula «1 + 2 + 3» would be encoded like this in MathML:

math> mn>1mn> mo>+mo> mn>2mn> mo>+mo> mn>3mn> math> 

The element is a generic container that performs similar layout but can be placed anywhere in the MathML subtree. It is helpful to group several elements together. For instance, the numerator of the following fraction (its first child) is «one plus two».

math> mfrac> mrow> mn>1mn> mo>+mo> mn>2mn> mrow> mn>3mn> mfrac> math> 

Active learning: nested expressions

As an exercise, figure out how to write the following expressions using only the MathML elements we’ve seen so far. If you are stuck or want to verify the solution, check the source code of the example.

ol> li> "one half" plus "two third": math> mfrac> mn>1mn> mn>2mn> mfrac> mo>+mo> mfrac> mn>2mn> mn>3mn> mfrac> math> li> li> "one plus two plus three" over "four plus five": math> mfrac> mrow> mn>1mn> mo>+mo> mn>2mn> mo>+mo> mn>3mn> mrow> mrow> mn>4mn> mo>+mo> mn>5mn> mrow> mfrac> math> li> li> "one quarter" over "two plus three": math> mfrac> mfrac> mn>1mn> mn>4mn> mfrac> mrow> mn>2mn> mo>+mo> mn>3mn> mrow> mfrac> math> li> ol> 

Summary

In this article, we have taken a look at how to use the element to insert a mathematical formula inside a HTML document. We have learned about rendering differences between elements that use display=»block» or not. In addition, we stumbled upon a couple of other MathML elements: for fractions, for grouping and finally a few text elements. We will analyze these text containers further in the next article.

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

MathMl в HTML5

До выхода HTML5 использование формул было сущим наказанием. Судите сами: в 2005-м необходимо было иметь под рукой либо специальный браузер, либо разбивать текст на собственно HTML и вставки из изображений или PDF. Поиск и прочие операции редактирования и/или вывода на экран/бумагу был неоднозначной задачей, коей посвящались целые монографии.

В 2012-м было уже попроще. Появилась возможность подключать необходимые плагины (Firemath для FireFox и Daum Equation Editor для Chrome). Но неоднозначность стандартов (и поддержки) фактически заставляла писать одну и ту же статью для каждого из браузеров (и для их версий). Или встречать пользователей волшебным приветствием «Ваш браузер надо обновить/дополнить расширением».

Неудобно? — Да! Отнимало много времени на поиск универсального решения? — Да! Заставляет думать о том, какой тип записи лучше (презентационный или содержательный), каким конвертером пользоваться (а их только общеизвестных с десятка полтора)? — ДА! ДА! ДА!

В результате работа по публикации превращалась в освоение двух-трех лексиконов разметки и изучения работы минимум одной программы-перекодировщика.

Теперь, с приходом HTML5, все стало намного проще. В нем появился новый контейнер .
Каждый допустимый экземпляр MathML должен быть внутри этого контейнера.
Он не допускает вложений, но внутри может быть произвольное число других дочерних элементов.

Атрибуты тэга

В дополнение к следующим атрибутам, тэг воспринимает любые атрибуты из .

• block — означает, что этот элемент будет отображаться за пределами текущего диапазона текста, как блока, который может быть расположен в любом месте без изменения смысла текста;
• inline -означает, что этот элемент будет отображаться внутри текущего диапазона текста, и не могут быть перемещены из нее без изменения значения этого текста.

Значение по умолчанию inline .

Устаревшие значение display attribute.
Возможные значения: display (который имеет тот же эффект, как display=»block» ) и inline .
overflow
Определяет, как выражение ведет себя, если текст слишком длинный и не помещается в указанном диапазоне ширины.
Возможные значения: linebreak (по умолчанию), scroll , elide , truncate , scale .

Представление в HTML5

      $a^2+b^2=c^2$   

Представление в XHTML

       $a^2+b^2=c^2$   

Примечания: XHTML документы с MathML должны быть поданы как application/xhtml+xml . Вы можете легко добиться этого, добавив .xhtml расширение для локальных файлов. Для серверов Apache вы можете настроить .htaccess файл для этого расширения на правильный тип MIME. Поскольку мы сохранили наш MathML в виде XML-документа, необходимо быть уверенным в правильно оформленном XML-документе.

Поддержка браузерами

Полноценные версии

Элемент	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
XHTML описание	(только 24-я)	1.0 (1.7 и выше)	9.5	5.1
HTML5 описание	(только 24-я)	4.0 (2.0)	5.1
dir	12.0 (12.0)
href	WebKit bug 85733	7.0 (7.0)	WebKit bug 85733
mathbackground	(только 24-я)	4.0 (2.0)	5.1
mathcolor	(только 24-я)	4.0 (2.0)	5.1
overflow

Мобильные версии

Элемент	Android	Chrome для Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
XHTML описание	1.0 (1.0)
HTML5 описание	4.0 (2.0)
dir	12.0 (12.0)
href	7.0 (7.0)
mathbackground	4.0 (2.0)
mathcolor	4.0 (2.0)
overflow

В Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) появилась поддержка всех MathML атрибутов для элементов верхнего уровня (т.е. такое же поведение как элемента). Тем не менее, displaystyle атрибут не отрабатывается. Его поддержка была добавлена в Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5).

Альтернативные текстовые описания ( alttext ) или ссылки на альтернативное изображение, (атрибуты altimg , altimg-width , altimg-height и altimg-valign ) в настоящее время не реализованы в Gecko.

Спецификация	Статус	Комментарий
MathML 3.0	Рекомендация	Текущая спецификация
MathML 2.0	Рекомендация	Начальная спецификация

Надеюсь, развитие этого нужного и полезного тэга продолжится.

Источник

HTML. Вычисления в форме

Для проведения тестов с вычислениями в html-форме и выводом результатов в элемент управления , используйте файл test.html.

Элемент формы

Синтаксис

Атрибуты

Атрибут	Описание
id	идентификационный номер элемента управления, уникальный в пределах всего html-документа
name	имя элемента управления, уникальное в пределах html-формы
for	перечисление id элементов html-формы, используемых в вычислении*
form	id html-формы, к которой принадлежит элемент управления

* Атрибут for позволяет видеть взаимосвязь между элементами формы, используемыми в вычислении, и результатом вычисления, выведенном в элемент управления .

Атрибуты элемента не являются обязательными, но, чтобы отобразить в этом элементе результаты вычислений, необходим один из атрибутов — id или name .

Примеры вычислений

Пример 1

Автоматическое вычисление площади треугольника сразу при вводе аргументов:

Атрибут oninput срабатывает при изменении значения элемента , участвующего в вычислении в качестве аргумента. Теги абзаца ( ) использовать не обязательно, а для разделения строк применить тег
. Текст можно обернуть тегами , или , или оставить без тегов.

Метод parseFloat анализирует значение элемента формы как строку и возвращает первое число. Если первый символ строки не является цифрой, возвращается значение NaN .

В качестве разделителя дробной части следует использовать точку. Чтобы можно было вводить запятую, необходимо предусмотреть ее преобразование в точку:

Замените первую строку в коде первого примера, и введенная запятая, перед вычислением, будет автоматически преобразовываться в точку.

Пример 2

Вычисление площади круга по его радиусу при нажатии кнопки:

Источник