MathMl в HTML5
До выхода HTML5 использование формул было сущим наказанием. Судите сами: в 2005-м необходимо было иметь под рукой либо специальный браузер, либо разбивать текст на собственно HTML и вставки из изображений или PDF. Поиск и прочие операции редактирования и/или вывода на экран/бумагу был неоднозначной задачей, коей посвящались целые монографии.
В 2012-м было уже попроще. Появилась возможность подключать необходимые плагины (Firemath для FireFox и Daum Equation Editor для Chrome). Но неоднозначность стандартов (и поддержки) фактически заставляла писать одну и ту же статью для каждого из браузеров (и для их версий). Или встречать пользователей волшебным приветствием «Ваш браузер надо обновить/дополнить расширением».
Неудобно? — Да! Отнимало много времени на поиск универсального решения? — Да! Заставляет думать о том, какой тип записи лучше (презентационный или содержательный), каким конвертером пользоваться (а их только общеизвестных с десятка полтора)? — ДА! ДА! ДА!
В результате работа по публикации превращалась в освоение двух-трех лексиконов разметки и изучения работы минимум одной программы-перекодировщика.
Атрибуты тэга
Представление в HTML5
Представление в XHTML
Поддержка браузерами
Полноценные версии
| Элемент | 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 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).
| Спецификация | Статус | Комментарий |
|---|---|---|
| MathML 3.0 | Рекомендация | Текущая спецификация |
| MathML 2.0 | Рекомендация | Начальная спецификация |
Надеюсь, развитие этого нужного и полезного тэга продолжится.
Математика в картинках
Мне очень не нравится MathML — он громоздкий, неудобный, избыточный и не приспособлен для редактирования вручную. Попробуйте быстро поменять один символ в длинной формуле и вы возненавидите MathML. Вот то ли дело TEX, старина Кнут знал своё дело и писал систему для себя, впоследствии TEX стал стандартом де-факто в научной среде для написания формул. Если вы знакомы с HTML и CSS, то разобраться в TEX не составит никакого труда, он интуитивно понятен и имеет синтаксис, в чём-то схожий с этими языками.
Правда, остаётся проблема, как вывести формулу на страницу, чтобы она корректно отображалась во всех браузерах. Самым универсальным способом до сих пор остаётся изображение, только нам надо автоматизировать и упростить процесс создания картинок, для чего предназначены разные сервисы, о которых и пойдёт речь далее.
Редактор уравнений LaTEX
Лучше начать своё знакомство с миром формул с этого сервиса, благо он имеет небольшой онлайновый редактор, через который вы можете понять LaTEX — это расширение системы TEX с тем же синтаксисом. После того, как формула будет набрана, результат можно увидеть нажав на кнопку «Render Equation» (рис. 1).
Рис. 1. Вид редактора на странице
Формула в формате TEX вставляется в адресе после знака вопроса и пишется одну строку. Если требуется увеличить или уменьшить размер изображения, то применяются следующие ключевые слова.
Ключевое слово надо вставить перед формулой, как показано ниже.
На странице такая увеличенная формула выглядит следующим образом (рис. 2).
Рис. 2. Формула на странице
К сожалению, Гугл перестал поддерживать этот сервис, и его дальнейшая судьба неизвестна, но пока он продолжает нормально работать и им можно пользоваться.
Принцип вставки формулы тот же, что и у предыдущего сервиса. Мы используем тег и в качестве адреса ссылаемся на сервис Гугла и передаём ему формулу в формате TEX. Сам адрес в общем виде записывается так.
В примере 2 показано добавление формулы нормального распределения.
Пример 3. Размер изображения
Изображение формулы высотой 40 пикселов показано на рис. 3.
Рис. 3. Формула с заданной высотой
MathJax
Если на вашем сайте требуется вывести множество разных формул и математических символов, то имеет смысл подключить локальную библиотеку MathJax. Эта библиотека работает во всех браузерах, включая старые версии IE, а также на iPhone, iPad и Android, поддерживает нотацию MathML, TEX и AsciiMath.
Для использования MathJax необходимо скачать библиотеку и все требуемые для её работы файлы и скопировать их к себе на сервер. Можно поступить проще и загружать скрипт по сети, как показано ниже.
Главный JS-файл занимает около 50 Кб, но в процессе работы подгружает разные шрифты и другие скрипты. В итоге получается около пары сотен килобайт. Вроде много, но надо учитывать, что большинство файлов кэшируется при первой загрузке и в следующий раз файлы уже не загружаются.
Пример 4. Использование MathJax
Результат данного примера показан на рис. 4.
Рис. 4. Формулы на странице
Если щёлкнуть по формуле правой кнопкой мыши, то откроется меню, через которое можно настроить некоторые параметры и посмотреть исходник в виде TEX или MathML (рис. 5).
Nellij’s Blog
Основные способы вставки формул в html-документы
Вставка формул в html-документы с помощью разметки MathML
Необходимость разметки MathML вызвана тем, что формат HTML, несмотря на множество замечательных свойств, имеет довольно-таки ограниченные возможности передачи математических обозначений. Чаще всего формулы на HTML-страницах представляются в виде графики (растровой или векторной), но этот способ имеет очевидные недостатки. Например, формулу-рисунок практически невозможно отредактировать, а качество ее при печати обычно оставляет желать лучшего. Развитие идей и привело к созданию целого семейства языков математической разметки, к которым относится и MathML. Разработчики осознавали глубину проблематики и поставили цель создать спецификацию, удовлетворяющую следующим ограниченным, но все же достаточно важным требованиям:
ü легкость освоения и ручного набора основных математических обозначений
ü максимальная совместимость с другими математическими форматами, которая должна обеспечиваться соответствующими конвертами
ü возможность вывода формул на различные терминальные устройства
ü поддержка расширяемости, т. е. введения новых символов, схем.
Общий принцип использования MathML состоит в том, что математические конструкции встраиваются в обычный HTML-документ и воспроизводятся при загрузке документа из сети.
Язык MathML предлагает гибкую и расширяемую систему записи математического материала, позволяющую взаимодействовать с внешними программами и осуществлять высококачественное отображение в различных информационных средах. Общий принцип использования MathML состоит во встраивании математических конструкций в XHTML/HTML-документ. Cоздание веб-страниц с использованием MathML возможно тремя способами: HTML + презентационный MathML, XHTML + презентационный MathML, XML + MathML
Введение в MathML
Основная задача MathML состоит в представлении математической информации в виде, пригодном для ее передачи и обработки в сети Internet, так же как гипертекст позволил подобную функциональность для текстовой, а затем и мультимедийной информации. Мы можем работать в глобальной сети с текстом и картинками, с видео — и аудиопотоками, даже с геолокационными данными! Неужели у нас нет средств для отображения каких-то интегралов и пределов? Конечно есть.
MathML (Mathematical Markup Language) — это XML-язык, первая реализация которого появилась еще в 1998 году и тогда же была рекомендована W3C в качестве стандарта. Хотя история непредставления математической информации в электронном виде началась еще до широкого распространения Интернета. В частности, свои стандарты в этой области предлагали SGML (Standard Generalized Markup Language) и TEX. Предложение о включении HTML Math в прототип HTML 3.0 внес Dave Raggett еще в 1994 году. В ноябре 1995 года команде W3C было выдвинуто предложение о реализации поддержки математики в рамках HTML. В марте 1997 года была первая W3C Math Working Group. Вторая появилась в июле 1998 года, и именно ей удалось добиться стадии рекомендации W3C. Казалось бы, цель была достигнута, но производители браузеров (в отличие от ученых мужей в консорциуме) не очень спешили поддерживать реализацию стандарта, и долгое время MathML существовал и развивался просто как один из XML-языков разметки. И доразвился в октябре 2010 года до версии 3.0, которую в настоящее время мы уже можем использовать для отображения в современных браузерах без дополнительных плагинов.
Что собой на деле представляет MathML-разметка? Примерно вот это:
Результат можно видеть на рис. 116. Впечатляет? Тогда пойдем дальше.
В общем-то, это только одна сторона MathML. Любой человек, знакомый с математикой чуть дальше школьной программы, может понять, что основной проблемой создания языка разметки для математического контента является необходимость одновременно реализовывать представление математической нотации (формы) и содержание представляемых математических идей и объектов. Этот дуализм отражен делением элементов разметки MathML на
Рис. 116. MathML в браузере
Два класса — элементов представления (Presentation MathML) и элементов содержания (Content MathML). Разницу между ними можно продемонстрировать на примере. Запишем хорошо известное со школы квадратное уравнение (ну или квадратный трехчленный полином, как его называют в народе), используя Presentation MathML, а заодно и познакомимся с практикой применения MathML на вебстранице. Сейчас для этого надо совсем немного — просто вставить в нужном месте HTML-контейнер :
Как написать уравнения в html?
Я хочу написать какое-то сложное математическое уравнение на своей веб-странице. Есть ли плагин или что-нибудь для этого?
7 ответов
для сложных уравнений, MathJax является текущим практическим решением. MathML является более структурным подходом в принципе, но поддержка браузера довольно ограничена и часто сомнительного качества.
однако сложность относительна. Для некоторых людей, E = mc2 или ∂/∂t + v ⋅ ∇ может быть сложным, и такие конструкции могут быть написаны довольно хорошо, используя только HTML с некоторыми помощь от CSS; см. мою страницу математика в HTML (и CSS).
вы можете попробовать это. Вид устаревший, поэтому не уверен, как это будет работать:
Если вы не хотите реализовывать JavaScript в своем HTML, вы можете использовать инструмент редактора уравнений CodeCogs (http://www.codecogs.com/latex/about.php).
Это очень простой в использовании. Все, что вы делаете, это использовать интерфейс кнопки, чтобы написать уравнение и ссылка HTML изображение сразу генерируется. При запуске HTML-кода изображение будет сгенерировано на серверах CodeCogs и реализовано на вашем сайте. Это очень удобный инструмент.
пример использования mathjax :
и он должен отображаться как уравнение просто отлично на странице.
Я знаю, что это немного поздно. Но хотелось бы упомянуть о jqMath который я лично нашел проще и намного легче, чем MathJax.
теперь вы можете писать математические уравнения и формулы в HTML или веб-страницы.
посетите приведенную выше ссылку, чтобы узнать больше о том, как писать математические формулы с помощью jqMath.
Я опаздываю на вечеринку 🙂 Но по соображениям производительности,UpMath просто может быть лучше MathJax. Он использует уценка и латекс для отображения сложных уравнений и формул и даже изображений на основе SVG. Кто-то может захотеть проверить.