Подготовка математических текстов средствами MathML. Математика и интернет: какие программы стоит использовать? Представление в HTML5

Все вышесказанное относится к отдельным формулам вне контекста документа. Давайте подробно рассмотрим пример, соответствующий примеру "Hello, World!", разбираемому при изучении языков программирования. Мы представим полный код документа XHTML 1.0, содержащего рассмотренный выше квадрат суммы двух переменных:

This is a perfect square:

$$

Это стандартная структура документа XHTML. Он начинается открывающим тегом , содержащим декларацию пространства имен XML и объявление языка. Элемент head содержит, как обычно, заголовок. Открывающий тег beginning also has a namespace declaration of an abbreviative prefix letter m to be used for the standard MathML namespace. Затем идет обычный параграф. И, наконец, идет элемент math, который также имеет декларацию пространства имен. Внутри элемента math находится разметка MathML.

Примеры MathML

Примеры разметки представления

Нотация: x 2 + 4x + 4 = 0.

Разметка:

⁢

Обратите внимание на использование вложенных элементов mrow для обозначения термов. Например, левая часть уравнения является операндом для "=". Выделение термов значительно улучшает структуру для визуального отображения, воспроизведения с помощью голоса и переноса строк. Символ MathML InvisibleTimes применяется для того, чтобы сообщить программе отображения, что между 4 и x запрещен перенос строки. На самом деле, такое использование данного элемента, введенного еще в MathML 1.0, не рекомендуется. Все обычные текстовые данные задаются кодами Unicode. Тем не менее, хотя символ для замены ⁢ ожидается в Unicode 3.2, и рассматриваются предложения по улучшению Unicode, в текущей версии Unicode 3.0 такого символа не используется. Мы можем использовать ожидаемую цифровую ссылку ࠎ но для понятности будем продолжать использовать в примерах элемент InvisibleTimes.

Разметка:

±

⁢

⁢

⁢

Элементы mfrac и msqrt используются для создания дроби и квадратного корня соответственно.

Обратите внимание, что знак "плюс-минус" задается специальной сущностью ±, хотя в данном случае существует такой символ Unicode, как B1;. MathML предоставляет обширный список имен элементов, задающих математические символы. В дополнение к математическим символам для вывода документа на экран и на печать, MathML предоставляет символы для воспроизведения документа с помощью речи. Для воспроизведения с помощью речи важно автоматически определять, как должен быть прочитан фрагмент

Как "z умножить на величину x плюс y " or "z умножить на x плюс y ". Символы ⁢ (U+2062) и ⁡ (U+2061) предоставляют авторам способ напрямую кодировать такие различия для программ речевого воспроизведения. Например, в первом случае, символ ⁢ (U+2062) должен быть вставлен после строки, содержащей z . MathML также содержит такие сущности как ⅆ (U+2146), представляющая дифференциал. При печати она отображается с отличными от обычного символа "d" интервалами, а произноситься может как "d" или "with respect to". Пока для исключения двусмысленности используются теги содержания или любой другой механизм, авторы всегда должны использовать описанные выше символы как сущности для того, чтобы сделать документы более доступными.

Разметка:

x

y

z

w

Элемент mtable указывает на начало таблицы в MathML. Элемент mtr определяет строку таблицы и элемент mtd содержит данные для элемента строки (ячейки). Большая часть элементов имеет атрибуты, определяющие свойства отображения на экране и на печати. Например, у элемента mfenced есть атрибуты, определяющие, какие символы должны использоваться в начале и в конце группируемого выражения. Атрибуты элементов-операторов устанавливаются в определенное справочником значение по умолчанию при помощи элемента .

До выхода 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

$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

До выхода 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

$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

Хоть интернет во многом создан усилиями физиков и математиков, путь математической формулы на его страницах был весьма долог и тернист. Только в последние годы можно сказать, что математические формулы прочно обосновались в Сети.

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

Частичным выходом из положения стала вставка формул в виде рисунков. Для их создания существует немало инструментов . Можно использовать визуальный редактор (например, Equation Editor из Microsoft Office) или преобразовать формулу, набранную в LaTeX , с помощью онлайнового конвертера . Наконец, есть Google Docs , редактор формул которого реализует обе эти возможности. Но подбирать размеры и позиционировать рисунок приходилось веб-мастеру. А значит, об интерактивности сайта оставалось только мечтать. Для этого нужен был язык, который позволил бы посетителю сайта самому набирать формулы.

Таких языков на рубеже 2000-х годов существовало два: LaTeX - для визуального представления формул, и MathML - для описания их структуры. К тому времени LaTeX уже много лет использовался для подготовки математических текстов, поэтому неудивительно, что именно его стали использовать для сетевой математики. Одной из первых попыток такого рода стала программа LaTeXML . Написанная на Perl, она обрабатывает документ LaTeX и выводит результат в файл XML. Затем ее постпроцессор конвертирует полученный XML в другие текстовые форматы, например, в HTML и XHTML (а теперь - и в MathML) или в рисунки. Результаты работы LaTeXML можно посмотреть .

Сравнение записи формулы в MathML и LaTeX

Однако это не решало проблем с интерактивностью. Для этого программа-обработчик должна была выполняться непосредственно в браузере. Первым на сторону клиента перешел jsMath Дэвида Сервона (Davide Cervone). Он преобразовывал формулы, набранные пользователем на языке LaTeX, в изображения, выполненные средствами HTML и CSS. Так появилась возможность создавать по-настоящему интерактивные математические веб-страницы.

Первый шаг был сделан, но проблем оставалось еще много. Нужно было добиться, чтобы программа работала во всех браузерах (начиная с ветеранов, вроде Internet Explorer 6) и наладить экспорт формул в различные форматы, в первую очередь, в MathML. Решить эти задачи призван был проект MathJax, начатый в 2009 г. под руководством Американского математического общества при поддержке и портала Stack Exchange . Созданная в результате библиотека MathJax работает во всех браузерах и умеет сохранять формулы в HTML+CSS, SVG и MathML. Пользователю не нужно устанавливать плагины или шрифты - теперь он просто работает.

Ввод формулы в MathJax…

и ее отображение

Если jsMath оживил математику в интернете, то MathJax "выпустил джинна из бутылки", позволив за короткое время реализовать массу замечательных идей. Хотите получить математическое образование в Сети? Загляните сюда и сюда . Нужно пообщаться с коллегами? Извольте . Создать публикации с «живыми» кодом и формулами? Вот и вот . Интересует система компьютерной алгебры на Android? Почему бы и нет . Чат с математической поддержкой? Легко . Создать блог, чтобы рассказать о своей работе? Пожалуйста . А еще MathJax использует Wikipedia , бесплатный архив электронных публикаций arXiv и Общероссийский математический портал . Так MathJax стал де-факто стандартом для отображения формул на веб-страницах.

Значит ли это, что все проблемы остались в прошлом? Нет, конечно. Так,

С распространением глобальных компьютерных сетей (в частности, Интернет) появилась необходимость размещения в ней в том числе и математических текстов.

Язык MathML является подмножеством языка XML (eX tensible M arkup L anguage - расширяемый язык разметки), который часто служит для создания других языков. Такое использование XML сегодня вполне естественно и хорошо зарекомендовало себя и в других случаях, когда применение HTML для передачи данных новых типов наталкивалось на ограничения этого формата. К настоящему времени консорциум W3C опубликовал 2-е издание версии 2.0 спецификации языка MathML, что говорит о жизнеспособности и устойчивости проекта.

Языки разметки, основанные на XML:

• Wireless Markup Language (WML): формат данных для (беспроводных) устройств, работающих с протоколом WAP (мобильные телефоны);
• Synchronized Multimedia Integration Language (SMIL):
• Задает временную разметку, внешний вид и т.д. для мультимедийных презентаций;
• Определяет порядок воспроизведения мультимедийных файлов;
• Для просмотра требуется SMIL-совместимый плеер (AMBULANT, MS IE6);
• Руководство и примеры: http://www.multimedia4everyone.com/
• Scalable Vector Graphics (SVG): для описания двухмерной векторной графики;
• Mathematical Markup Language (MathML) : для описания математических обозначений (формул);
• Chemical Markup Language (CML): для представления химических формул;
• другие.

Среди целей, которые ставились рабочей группой W3C по математике при создании MathML, были:

• обеспечение кодирования материалов математического характера для коммуникаций всех уровней образовательного и научного типа;
• обеспечение кодирования как математической символики, так и ее значений;
• поддержка создания шаблонов и других приемов математического редактирования;
• обеспечение преобразования в другие математические форматы как чисто презентационного, так и семантического характера, а также - из этих форматов в создаваемый язык математической разметки. Форматы вывода должны включать средства для отображения графической информации, синтеза речи, представления текста в форме, пригодной для ввода ее в системы компьютерной алгебры, совместимость с другими языками описания математических текстов, такими, как ТДО, возможность отображения “чистого” текста (т.е. не включающего математических символов и выражений), возможность вывода текстов на печать в различной форме, включая вывод по системе Брайля. При этом преобразования между различными форматами могут приводить к потерям информации;
• возможность передачи информации с учетом особенностей конкретных программ визуализации;
• поддержка эффективных процессов просмотра длинных математических выражений;
• обеспечение расширяемости возможностей (способами, которые заранее не известны).

Общий принцип использования MathML состоит в том, что математические конструкции встраиваются в обычный HTML-документ и (если браузер либо специальная программа поддерживает эту спецификацию) адекватно воспроизводятся при загрузке документа из сети.

Первое, с чем приходится столкнуться в MathML и что отличает данный язык разметки от аналогов, - это использование двух способов кодирования выражений. Один из них основан на непосредственной передаче синтаксиса формулы (presentation ), другой, напротив, отражает семантику выражения (content ). Презентационная разметка описывает математическую символику с выражениями, которые строятся с использованием некоторых схем вывода, с заданием способов размещения подвыражений, таких, как дроби, верхние и нижние индексы. Семантическая разметка описывает математические объекты и функции, где для каждого узла конструируется дерево выражения согласно некоторой конкретной схеме, а ветви этого дерева отвечают подвыражениям.

На настоящий момент веб-страницы, созданные с использованием MathML, можно просматривать в следующих браузерах (знак “+” означает, что более новые версии тоже работают):

• Windows:

o IE 5.0 с плагином Techexplorer

• Macintosh:

o IE 5.0+ с плагином Techexplorer

o Mozilla 0.9.9+

• Linux/Unix:

o Netscape 6.1 с плагином Techexplorer

o Mozilla 0.9.9+

o Amaya, все версии (только Presentation MathML)

Все элементы MathML делятся на три группы: элементы представления , элементы содержания и интерфейсные элементы.

Элементы представления описывают визуально ориентированную двухмерную структуру математической нотации. Например, элемент mrow обычно применяется для обозначения горизонтального ряда частей выражения, и элемент msup , который отмечает верхний индекс. Как правило, каждый элемент представления соответствует одному типу нотационной схемы, такой, как ряд, верхний индекс, нижний индекс и т.д. Любая формула состоит из частей, которые могут состоять из простейших элементов, таких, как цифры, буквы или другие символы.

Наиболее важными элементами представления являются mi , mn и mo , используемые для представления идентификаторов, чисел и операторов соответственно. Обычно эти элементы отображаются разными стилями: числа - прямым шрифтом, идентификаторы - наклонным, вокруг операторов оставляется дополнительное свободное пространство.

В терминах разметки, большинство элементов MathML определяются открывающим и закрывающим тегами, которые ограничивают содержание элемента. Некоторые элементы, например знаки операций ( ), определяются одиночным тегом.

Рассмотрим более подробно некоторые элементы, необходимые для верстки математических формул, на примере презентационной разметки.

Токены (token elements) представляют индивидуальные символы, названия, числа, обозначения и т.д. В основном в качестве содержания токены могут иметь только символы.

MathML игнорирует пробельные символы, встречающиеся вне токенов. Непробельные символы здесь запрещены. Пробельные символы, встречающиеся в содержании токенов, удаляются на концах, то есть удаляются все пробельные символы в начале и конце содержания. Пробельные символы, расположенные внутри содержания элементов MathML, свертываются канонически, то есть каждая последовательность из 1 или более таких символов заменяется на 1 (иногда называемый пустым символом).

Основные элементы

Индексы

Некоторые математические операции, которые можно использовать с тегом .

+ +
< >
≤ <
<= >=
++ ++
.NOT. not
and and
⁢ невидимый знак умножения
+ +

Рассмотрим несколько примеров формул в MathML.

1) sin 2 α + cos 2 α = 1

sin

α

+

cos

α

=

Греческую букву α получаем с помощью кода α (напоминаем, что используется Unicode).

Результат

Напоминаем также, что для работы с MathML в Internet Explorer необходимо установить MathPlayer.

В любом файле, содержащем разметку MathML, перед заголовочной частью документа должны присутствовать строки

Кроме того, любой код MathML открывается тегом

$$

и закрывается тегом .

a2

b2

sin

x+y

2x

x2

y2

Рассмотрим элементы для верстки таблиц и матриц.

1

1

1

1

1

1

0

0

0

1

1

0

0

0

1

1

0

0

0

1

1

1

1

1

1

Пример 2.

ax+by

=c

a1x+

b1y=

c1

Различные математические символы при необходимости нужно отыскивать в кодировочной таблице Unicode.

Пример .

S

…

-1

Σ

i=0

Довольно значительное количество примеров с интегралами можно найти на , поэтому не будем здесь на них останавливаться, рекомендуем читателю ознакомиться с примерами на указанном ресурсе.

Как отмечалось выше, MathML позволяет использовать презентационное и семантическое представления. Здесь мы сосредоточились на презентационном как наиболее удобоваримом и чаще используемом. Тем не менее, чтобы дать хотя бы некоторое представление о другом варианте, рассмотрим небольшой иллюстративный пример и запишем его в двух вариантах представления.

Пример . x 2 - 6x + 9 = 0

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

Во-первых, математические пакеты, скажем, Mathematica или Maple, позволяют сохранять набранные в них формулы в формате MathML.

Этот ресурс использует Java-скрипт ASCIIMathML.js (ver 2.0; сентябрь 2007; http://www1.chapman.edu/~jipsen/mathml/asciimath.html , автор скрипта - Peter Jipsen), работающий на компьютере пользователя, который загружается при загрузке демонстрационной страницы http://www1.chapman.edu/~jipsen/mathml/asciimathdemo.html . Поэтому, в частности, этот ресурс может использоваться локально: достаточно сохранить упомянутую демонстрационную html-страницу и можно производить конвертацию простых формул без подключения к Интернету.

В заключение отметим, что MathML как средство разметки также неплохо подходит при генерации различных математических заданий (см. примеры выше). При этом для программирования можно использовать, например, JavaScript, тогда пользователь получит возможность генерировать произвольное количество вариантов заданий по своему усмотрению. Также можно предусмотреть и генерацию ответов ко всем заданиям, что весьма несложно.

Рассчитываем, что на этом знакомство читателя со средствами верстки математических текстов не завершается и далее он сможет самостоятельно выбрать заинтересовавший его инструмент, а может быть, и применить на практике описанные технологии.

Литература и ресурсы Интернета