Мне очень не нравится MathML — он громоздкий, неудобный, избыточный и не приспособлен для редактирования вручную. Попробуйте быстро поменять один символ в длинной формуле и вы возненавидите MathML. Вот то ли дело TEX, старина Кнут знал своё дело и писал систему для себя, впоследствии TEX стал стандартом де-факто в научной среде для написания формул. Если вы знакомы с HTML и CSS, то разобраться в TEX не составит никакого труда, он интуитивно понятен и имеет синтаксис, в чём-то схожий с этими языками.
Правда, остаётся проблема, как вывести формулу на страницу, чтобы она корректно отображалась во всех браузерах. Самым универсальным способом до сих пор остаётся изображение, только нам надо автоматизировать и упростить процесс создания картинок, для чего предназначены разные сервисы, о которых и пойдёт речь далее.
Редактор уравнений LaTEX
Лучше начать своё знакомство с миром формул с этого сервиса, благо он имеет небольшой онлайновый редактор, через который вы можете понять LaTEX — это расширение системы TEX с тем же синтаксисом. После того, как формула будет набрана, результат можно увидеть нажав на кнопку «Render Equation» (рис. 1).
Рис. 1. Вид редактора на странице
Формула добавляется на свою страницу через тег , как показано в примере 1.
Формула в формате TEX вставляется в адресе после знака вопроса и пишется одну строку. Если требуется увеличить или уменьшить размер изображения, то применяются следующие ключевые слова.
- iny (размер 8pt)
- small (10pt)
- ormal (12pt)
- large (14pt)
- huge (20pt)
Ключевое слово надо вставить перед формулой, как показано ниже.
На странице такая увеличенная формула выглядит следующим образом (рис. 2).
Рис. 2. Формула на странице
К сожалению, Гугл перестал поддерживать этот сервис, и его дальнейшая судьба неизвестна, но пока он продолжает нормально работать и им можно пользоваться.
Принцип вставки формулы тот же, что и у предыдущего сервиса. Мы используем тег и в качестве адреса ссылаемся на сервис Гугла и передаём ему формулу в формате TEX. Сам адрес в общем виде записывается так.
В примере 2 показано добавление формулы нормального распределения.
Для изменения размеров формулы мы можем воспользоваться ключевыми словами iny, large и др., добавляя их перед выражением. У Гугла, также, есть и другой способ управления размером картинки, для этого в её адрес надо добавить параметр chs= x , например chs=200×20. Учтите, что пропорции картинки при этом могут сильно исказиться, если неверно выбрать соотношение сторон. Единственный параметр (chs=40) воспринимается как высота изображения, ширина при этом будет вычисляться автоматически (пример 3).
Пример 3. Размер изображения
Изображение формулы высотой 40 пикселов показано на рис. 3.
Рис. 3. Формула с заданной высотой
MathJax
Если на вашем сайте требуется вывести множество разных формул и математических символов, то имеет смысл подключить локальную библиотеку MathJax. Эта библиотека работает во всех браузерах, включая старые версии IE, а также на iPhone, iPad и Android, поддерживает нотацию MathML, TEX и AsciiMath.
Для использования MathJax необходимо скачать библиотеку и все требуемые для её работы файлы и скопировать их к себе на сервер. Можно поступить проще и загружать скрипт по сети, как показано ниже.
Главный JS-файл занимает около 50 Кб, но в процессе работы подгружает разные шрифты и другие скрипты. В итоге получается около пары сотен килобайт. Вроде много, но надо учитывать, что большинство файлов кэшируется при первой загрузке и в следующий раз файлы уже не загружаются.
По умолчанию формулы выделяются с помощью конструкции $$. $$ и [. ], а строчные символы и выражения через (. ) (пример 4).
Пример 4. Использование MathJax
Результат данного примера показан на рис. 4.
Рис. 4. Формулы на странице
Если щёлкнуть по формуле правой кнопкой мыши, то откроется меню, через которое можно настроить некоторые параметры и посмотреть исходник в виде TEX или MathML (рис. 5).
Это задание архивной главы. Перейдите по ссылке, чтобы пройти актуальный курс.
Следующие два тега обычно используются не для выделения слов, а для выделения отдельных символов. Их используют для указания единиц измерения или для написания простых формул.
Например: 20 м 2 , H2O, X 3 +X 2 =1
Тег отображает текст в виде верхнего индекса.
Тег отображает текст в виде нижнего индекса.
Стоит отметить, что эти теги являются чисто презентационными и не имеют собственной семантики.
Эти теги можно использовать внутри друг друга для создания более сложных формул.
Если вам нужно вставить очень сложную формулу в HTML-документ, лучше воспользоваться специальным языком разметки 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-контейнер :