Главная

MathMl в HTML5

2015-02-18 в 15:00, admin, рубрики: html, html5, latex, MathMl, метки: HTML5, LaTeX, MathMl

До выхода 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
Этот атрибут определяет способ вывода. Возможные значения:

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

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

mode

Устаревшие значение 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-документе.

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

Особенность	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	Рекомендация	Начальная спецификация