Sykoku 18 фев 2015 в 18:00

MathMl в HTML5

4 мин

39K

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

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

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

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

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

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

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

class, id, style
При условии использования вместе с таблицами стилей.
dir
Указывает направление формулы: ltr — слева направо или rtl — справа налево.
ref
Используется для установки гиперссылки на указанный URI.
mathbackground
Цвет фона. Вы можете использовать #rgb, #rrggbb и названия цветов HTML .
mathcolor
Цвет текста. Вы можете использовать #rgb, #rrggbb и названия цветов HTML .
display
Этот атрибут определяет способ вывода. Возможные значения:

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

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

mode <span title=«Этот устаревший API больше не используется, но, вероятно, все еще работает.»

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

Примеры

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

<!DOCTYPE html>
<html>
  <head>
    <title>MathML in HTML5</title>
  </head>
  <body>

  <math>
    <mrow>
      <mrow>
        <msup>
          <mi>a</mi>
          <mn>2</mn>
        </msup>
        <mo>+</mo>
        <msup>
          <mi>b</mi>
          <mn>2</mn>
        </msup>
      </mrow>
      <mo>=</mo>
      <msup>
        <mi>c</mi>
        <mn>2</mn>
      </msup>
    </mrow>
  </math>

  </body>
</html>

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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>MathML in XHTML</title>
</head>
<body>

  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
      <mrow>
        <msup>
          <mi>a</mi>
          <mn>2</mn>
        </msup>
        <mo>+</mo>
        <msup>
          <mi>b</mi>
          <mn>2</mn>
        </msup>
      </mrow>
      <mo>=</mo>
      <msup>
        <mi>c</mi>
        <mn>2</mn>
      </msup>
    </mrow>
  </math>

</body>
</html>

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

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

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

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

Элемент	Chrome	Firefox (Gecko)	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

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

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

Cпецификации

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

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

Смотрите также

Тест браузера на поддержку MathML: здесь или здесь

Теги:

Хабы:

MathMl в HTML5

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

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

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

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

Смотрите также

Публикации

Истории

Ближайшие события