Как написать математические формулы на html. Основные способы вставки формул в html-документы
Каждый пользователь желающий опубликовать в Сети текст содержащий математические или физические формулы, встречается с проблемой размещения эти формул в HTML — документах.
Как же это сделать?
Расмотрим 3 наиболее популярных способа:
1 способ: Вставка формул в виде рисунков. Использование Word и Microsoft Equation
Чаще всего формулы на HTML-страницах представляются в виде графики
(растровой или векторной), но этот способ имеет очевидные недостатки. Например, формулу-рисунок практически невозможно отредактировать
, а качество ее при печати обычно оставляет желать лучшего.
Для простых формул
, которые не требуют использования знаков интегралов, сумм с пределами, сложных дробей и т. п., можно ограничиться средствами самого Word
.
Для набора нижних и верхних индексов
необходимо выделить нужный текст и обратиться к пункту меню Формат > Шрифт.
Для вставки в формулу греческих
и различных специальных символов следует обратиться к пункту меню Вставка > Символ и выбрать нужный шрифт и символ. В качестве пробела при наборе формул следует использовать так называемый неразрывный пробел, который можно найти в меню Вставка > Символ или воспользоваться специальным сочетанием клавиш, нажав одновременно Ctrl+Shift+Пробел.
Для набора сложных формул существует редактор уравнений Microsoft Equation, который входит в Microsoft Office. Отметим, что MS Equation не всегда устанавливается по умолчанию, и о его наличии надо позаботиться при инсталляции редактора Word, а затем для удобства использования добавить в меню редактора Word соответствующую кнопку. После этого для набора формул достаточно нажать на кнопку или обратиться к пункту меню Вставка > Объект > Microsoft Equation. Можно вызывать редактор формул и в автономном режиме.
Недостатками первого способа является его сложность,нарушение порядка ввода формулы (например:сначала скобки, потом выражение в них), кроме того,формулы воспринимаются рисунком отдельным от текста и при изменении шрифта могут стать несоразмерными с ним.
2 способ: Вставка формул с помощью разметки MathML.
Общий принцип использования MathML состоит в том, что математические конструкции встраиваются в обычный HTML-документ и (если броузер либо специальная программа поддерживает эту спецификацию) адекватно воспроизводятся при загрузке документа из сети.
Первое, с чем приходится столкнуться в MathML и что отличает данный язык разметки от аналогов, — это использование двух способов кодирования выражений
. Один из них основан на непосредственной передаче синтаксиса формулы (presentation), другой, напротив, отражает семантику выражения (content). Проще говоря, первый способ передает запись формулы вне связи с ее смыслом, второй, наоборот, отражает ее математическое содержание.
Пример записи в MathML:
В результате получится формула:
Недостатки: не все браузеры поддерживает «MathML»; доскональное изучение «MathML» громоздко и сложно для обычного пользователя.
3 способ: Вставка формул с помощью разметки TeX.
Ее создатель Дональд Кнут.
Система ТеХ – система типографского набора
, предназначенная для создания книг, в особенности тех, где много математических формул. Подготовка рукописи в формате системы ТеХ означает, что вы точно указываете компьютеру, как преобразовать текст страницы.
Система ТеХ не имеет собственного редактора
. Для верстки tex-файла можно использовать любой редактор, например, Блокнот или WinEdt, специально ориентированный на набор файлов ТеХа. Текст форматируется при помощи системы тегов, подобных тегам языка HTML.
Если мы наберем следующую строку
MathJax позволяет включать математические формулы на web-страницы, используя разметку LaTeX, MathML или AsciiMath, после чего формулы будут обработаны javascript-библиотекой и преобразованы в HTML, SVG или MathML для отображения в любом современном браузере.
В настоящее время MathJax позволяет использовать как копию данной библиотеки на собственном сервере, так и версию библиотеки из CDN cdn.mathjax.org:
Конфигурация TeX-AMS-MML_HTMLorMML является одним из самых общих (и, следовательно, самых больших) файлов конфигурации. Хотя использование данной конфигурации возможно и не эффективно, но здесь она приведена для возможности быстрого старта использования MathJax.
Краткий справочникТак как разметка LaTeX показалась мне более лаконичной, далее описываются только вопросы по её использованию при работе с MathJax:
Описанные выше скобки не масштабируются вместе с формулой. То есть, если вы напечатаете (\frac{\sqrt x}{y^3}) , круглые скобки будут слишком маленькими: \((\frac{\sqrt x}{y^3})\) . Использование \left(и \right) выполнит автоматическую подстройку размера скобок к размеру формулы, которую они окружают: \left(\frac{\sqrt x}{y^3}\right) соответствует \(\left(\frac{\sqrt x}{y^3}\right)\) . \left и \right применяются ко всем следующим типам скобок: (и) \(\left(x\right)\) , [ и ] \(\left\) , \{ и \} \(\left\{x\right\}\) , | \(\left|x\right|\) , \langle и \rangle \(\left\langle x\right\rangle\) , \lceil и \rceil \(\left\lceil x\right\rceil\) , и \lfloor и \rfloor \(\left\lfloor x\right\rfloor\) .
Есть также невидимые скобки, обозначенные. : \left.\frac12\right\rbrace соответствует \(\left.\frac12\right\rbrace\) ;
- используйте \mathbb или \Bbb для полужирного шрифта для "черной доски": \(\mathbb{CHNQRZ}\) ;
- используйте \mathbf для полужирного шрифта: \(\mathbf{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathbf{abcdefghijklmnopqrstuvwxyz}\) ;
- используйте \mathtt для шрифта "печатной машинки": \(\mathtt{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathtt{abcdefghijklmnopqrstuvwxyz}\) ;
- используйте \mathrm для "римского" шрифта: \(\mathrm{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathrm{abcdefghijklmnopqrstuvwxyz}\) ;
- используйте \mathsf для шрифта без засечек: \(\mathsf{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) \(\mathsf{abcdefghijklmnopqrstuvwxyz}\) ;
- используйте \mathcal для "каллиграфического" написания: \(\mathcal{ ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) ;
- используйте \mathscr для "скриптового" шрифта (как бы написанного от руки): \(\mathscr{ABCDEFGHIJKLMNOPQRSTUVWXYZ}\) ;
- используйте \mathfrak для шрифта "Fraktur" (старый немецкий стиль): \(\mathfrak{ABCDEFGHIJKLMNOPQRSTUVWXYZ} \mathfrak{abcdefghijklmnopqrstuvwxyz}\) ;
- \lt \gt \le \ge \neq \(\lt\, \gt\, \le\, \ge\, \neq\) . Вы можете использовать \not , чтобы поместить косую черту почти на всё: \not\lt \(\not\lt\) , но часто это выглядит некрасиво;
- \times \div \pm \mp \(\times\, \div\, \pm\, \mp\) . \cdot соответствует точке в центре: \(x \cdot y\) ;
- \cup \cap \setminus \subset \subseteq \subsetneq \supset \in \notin \emptyset \varnothing \(\cup\, \cap\, \setminus\, \subset\, \subseteq \,\subsetneq \,\supset\, \in\, \notin\, \emptyset\, \varnothing\) ;
- {n+1 \choose 2k} или \binom{n+1}{2k} \({n+1 \choose 2k}\) ;
- \to \rightarrow \leftarrow \Rightarrow \Leftarrow \mapsto \(\to\, \rightarrow\, \leftarrow\, \Rightarrow\, \Leftarrow\, \mapsto\) ;
- \land \lor \lnot \forall \exists \top \bot \vdash \vDash \(\land\, \lor\, \lnot\, \forall\, \exists\, \top\, \bot\, \vdash\, \vDash\) ;
- \star \ast \oplus \circ \bullet \(\star\, \ast\, \oplus\, \circ\, \bullet\) ;
- \approx \sim \simeq \cong \equiv \prec \(\approx\, \sim \, \simeq\, \cong\, \equiv\, \prec\) ;
- \infty \aleph_0 \(\infty\, \aleph_0\) \nabla \partial \(\nabla\, \partial\) \Im \Re \(\Im\, \Re\) ;
- для сравнений по модулю используйте \pmod , например, a\equiv b\pmod n \(a\equiv b\pmod n\) ;
- \ldots соответствует многоточию в \(a_1, a_2, \ldots ,a_n\) ; \cdots соответствует многоточию в \(a_1+a_2+\cdots+a_n\) ;
- у некоторых греческих букв есть форма написания для обозначения переменной: \epsilon \varepsilon \(\epsilon\, \varepsilon\) , \phi \varphi \(\phi\, \varphi\) и т.д. "Скриптовая" (написанная от руки) l в нижнем регистре: \ell \(\ell\) .
Detexify позволяет нарисовать символ на web-странице, а затем перечисляет \(\TeX\) символы, которые напоминают нарисованный. Не гарантируется, что это будет работать и в MathJax, но это хорошее место для начала поиска. Чтобы проверить, поддерживается ли команда, обратите внимание на текущий список поддерживаемых \(\LaTeX\) команд на MathJax.org.
Чтобы использовать простой текст, используйте \text{...} : \(\{x\in s\mid x\text{ is extra large}\}\) ;
До выхода 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