Pull to refresh

MathMl в HTML5

Reading time 4 min
Views 38K
До выхода 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) 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
В 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: здесь или здесь
Tags:
Hubs:
+13
Comments 24
Comments Comments 24

Articles