[Из песочницы] MathMl в HTML5

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

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

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

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

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

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

mode

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

Примеры Теорема ПифагораПредставление в HTML5 MathML in HTML5

a 2 + b 2 = c 2

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

a 2 + b 2 = c 2

Примечания: 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 атрибутов для элементов верхнего уровня (т.е. такое же поведение как  элемента). Тем не менее, 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 Рекомендация Начальная спецификация Надеюсь, развитие этого нужного и полезного тэга продолжится.

© Habrahabr.ru