Как сделать уравнение в html

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

Представление в HTML5

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

Примечания: XHTML документы с MathML должны быть поданы как application/xhtml+xml . Вы можете легко добиться этого, добавив .xhtml расширение для локальных файлов. Для серверов Apache вы можете настроить .htaccess файл для этого расширения на правильный тип MIME. Поскольку мы сохранили наш MathML в виде XML-документа, необходимо быть уверенным в правильно оформленном XML-документе.

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

Полноценные версии

Мобильные версии

В 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.

Надеюсь, развитие этого нужного и полезного тэга продолжится.

Введение в 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 http://www.mathjax.org/ . Лично я нахожу его очень хорошим.

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

однако сложность относительна. Для некоторых людей, E = mc2 или ∂/∂t + v ⋅ ∇ может быть сложным, и такие конструкции могут быть написаны довольно хорошо, используя только HTML с некоторыми помощь от CSS; см. мою страницу математика в HTML (и CSS).

вы можете попробовать это. Вид устаревший, поэтому не уверен, как это будет работать:

Если вы не хотите реализовывать JavaScript в своем HTML, вы можете использовать инструмент редактора уравнений CodeCogs (http://www.codecogs.com/latex/about.php).

Это очень простой в использовании. Все, что вы делаете, это использовать интерфейс кнопки, чтобы написать уравнение и ссылка HTML изображение сразу генерируется. При запуске HTML-кода изображение будет сгенерировано на серверах CodeCogs и реализовано на вашем сайте. Это очень удобный инструмент.

пример использования mathjax :

загрузите cdn: (обязательно укажите ?config= опция, поскольку она не входит в рекомендуемая cdn ссылка — default работает просто отлично):

затем внутри вашего html просто оберните уравнение внутри $$ $$

и он должен отображаться как уравнение просто отлично на странице.

Я знаю, что это немного поздно. Но хотелось бы упомянуть о jqMath который я лично нашел проще и намного легче, чем MathJax.

1. распакуйте загруженный файл
2. найти файлы jqmath-и т. д.-0.4.6.минута.js и jqmath-0.4.3.в CSS, и включите их в свой html
3. убедитесь, что ваш html имеет на .
4. также включают jQuery перед использованием этих.

теперь вы можете писать математические уравнения и формулы в HTML или веб-страницы.

посетите приведенную выше ссылку, чтобы узнать больше о том, как писать математические формулы с помощью jqMath.

Я опаздываю на вечеринку 🙂 Но по соображениям производительности,UpMath просто может быть лучше MathJax. Он использует уценка и латекс для отображения сложных уравнений и формул и даже изображений на основе SVG. Кто-то может захотеть проверить.