Основные способы вставки формул в html-документы. Математические формулы в HTML-документах

Влад Мержевич

Мне очень не нравится MathML - он громоздкий, неудобный, избыточный и не приспособлен для редактирования вручную. Попробуйте быстро поменять один символ в длинной формуле и вы возненавидите MathML. Вот то ли дело TEX, старина Кнут знал своё дело и писал систему для себя, впоследствии TEX стал стандартом де-факто в научной среде для написания формул. Если вы знакомы с HTML и CSS, то разобраться в TEX не составит никакого труда, он интуитивно понятен и имеет синтаксис, в чём-то схожий с этими языками.

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

Редактор уравнений LaTEX

Лучше начать своё знакомство с миром формул с этого сервиса, благо он имеет небольшой онлайновый редактор, через который вы можете понять LaTEX - это расширение системы TEX с тем же синтаксисом. После того, как формула будет набрана, результат можно увидеть нажав на кнопку «Render Equation» (рис. 1).

Рис. 1. Вид редактора на странице

Формула добавляется на свою страницу через тег , как показано в примере 1.

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

  • \tiny (размер 8pt)
  • \small (10pt)
  • \normal (12pt)
  • \large (14pt)
  • \huge (20pt)

Ключевое слово надо вставить перед формулой, как показано ниже.

На странице такая увеличенная формула выглядит следующим образом (рис. 2).

Рис. 2. Формула на странице

Google

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

Принцип вставки формулы тот же, что и у предыдущего сервиса. Мы используем тег и в качестве адреса ссылаемся на сервис Гугла и передаём ему формулу в формате TEX. Сам адрес в общем виде записывается так.

https://chart.googleapis.com/chart?cht=tx&chl=формула

В примере 2 показано добавление формулы нормального распределения.

Для изменения размеров формулы мы можем воспользоваться ключевыми словами \tiny, \large и др., добавляя их перед выражением. У Гугла, также, есть и другой способ управления размером картинки, для этого в её адрес надо добавить параметр chs=x, например chs=200x20. Учтите, что пропорции картинки при этом могут сильно исказиться, если неверно выбрать соотношение сторон. Единственный параметр (chs=40) воспринимается как высота изображения, ширина при этом будет вычисляться автоматически (пример 3).

Пример 3. Размер изображения

Изображение формулы высотой 40 пикселов показано на рис. 3.

Рис. 3. Формула с заданной высотой

MathJax

Если на вашем сайте требуется вывести множество разных формул и математических символов, то имеет смысл подключить локальную библиотеку MathJax. Эта библиотека работает во всех браузерах, включая старые версии IE, а также на iPhone, iPad и Android, поддерживает нотацию MathML, TEX и AsciiMath.

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

Главный JS-файл занимает около 50 Кб, но в процессе работы подгружает разные шрифты и другие скрипты. В итоге получается около пары сотен килобайт. Вроде много, но надо учитывать, что большинство файлов кэшируется при первой загрузке и в следующий раз файлы уже не загружаются.

По умолчанию формулы выделяются с помощью конструкции $$...$$ и \[...\], а строчные символы и выражения через \(...\) (пример 4).

Пример 4. Использование MathJax

MathJax

При \(a \ne 0\) получается два корня уравнения \(ax^2 + bx + c = 0\), для нахождения которых используют формулу $${x}_{1,2} = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

Результат данного примера показан на рис. 4.

Рис. 4. Формулы на странице

Если щёлкнуть по формуле правой кнопкой мыши, то откроется меню, через которое можно настроить некоторые параметры и посмотреть исходник в виде TEX или MathML (рис. 5).

Рис. 5. Контекстное меню

Каждый пользователь желающий опубликовать в Сети текст содержащий математические или физические формулы, встречается с проблемой размещения эти формул в 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:

  • чтобы увидеть, как написана любая из формул, кликните правой кнопкой мыши на выражении и выберите "Show Math As > TeX Commands" (символы разделителей не показываются);
  • для отображения формулы в отдельном блоке заключите её в разделители $$...$$ или \[...\] \[\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}\]
  • для отображения формулы внутри строки заключите её в разделители \(...\) . Например, \(\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}\) . Обратите внимание, что разделители $...$ по умолчанию не поддерживаются, так как одиночные знаки доллара могут появляться в тексте и вызывать ошибочное преобразование текста в формулу;
  • для отображения букв греческого алфавита , используйте \alpha , \beta , …, \omega: \(\alpha\) , \(\beta\) , …, \(\omega\) . Для верхнего регистра используйте \Gamma , \Delta , …, \Omega: \(\Gamma\) , \(\Delta\) , …, \(\Omega\) ;
  • для верхних и нижних индексов используйте ^ и _ . Например, x_i^2: \(x_i^2\) ;
  • группы . Верхний и нижний индексы, а также другие операции применяются только к следующей "группе". "Группой" является либо один символ, либо любая формула, заключенная в фигурные скобки {...} . Если вы выполните 10^10 , то неожиданно получите \(10^10\) . Но 10^{10} даст вам возможно то, что вы хотели: \(10^{10}\) . Используйте фигурные скобки, чтобы выделить формулу, к которой применяется верхний или нижний регистр: x^5^6 вызовет ошибку; {x^y}^z соответствует \({x^y}^z\) , и x^{y^z} соответствует \(x^{y^z}\) . Заметьте отличие между x^i^2 \(x_i^2\) и x_{i^2} \(x_{i^2}\) ;
  • скобки . Одиночные символы () создают круглые и квадратные скобки \((2+3)\) . Используйте \{ и \} для отображения фигурных скобок \(\{\}\) .
    Описанные выше скобки не масштабируются вместе с формулой. То есть, если вы напечатаете (\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\) ;
  • суммы и интегралы \sum и \int ; нижний индекс соответствует нижнему пределу, а верхний индекс - верхнему пределу. Например, \sum_1^n \(\sum_1^n\) . Не забудьте {...} , если пределы состоят из более чем одного символа. Например, \sum_{i=0}^\infty i^2 соответствует \(\sum_{i=0}^\infty i^2\) . Аналогично \prod \(\prod\) , \int \(\int\) , \bigcup \(\bigcup\) , \bigcap \(\bigcap\) , \iint \(\iint\) ;
  • дроби . Существует два способа создать дробь. \frac ab применятся к следующим двум группам и генерирует следующее \(\frac ab\) ; для более сложных числителей и знаменателей используйте {...} : \frac{a+1}{b+1} соответствует \(\frac{a+1}{b+1}\) . Если числитель и знаменатель слишком сложны, можно использовать \over , который разделяет группу, в которой находится: {a+1\over b+1} соответствует \({a+1\over b+1}\) ;
  • шрифты
    • используйте \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}\) ;
  • знаки корня . Используйте \sqrt , который подстраивается к размеру аргумента: \sqrt{x^3} \(\sqrt{x^3}\) ; \sqrt{\frac xy} \(\sqrt{\frac xy}\) . Для сложных выражений предпочтительнее использование {...}^{1/2} ;
  • некоторые функции , такие как "lim", "sin", "max", "ln" и т.д., обычно используют "римский" (прямой) шрифт вместо "итальянского" (курсив). Используйте \lim , \sin и т.д., чтобы получить подобное: \sin x \(\sin x\) , а не sin x \(sin x\) . Используйте нижние индексы, чтобы прикрепить дополнительные надписи к \lim: \lim_{x\to 0} \[\lim_{x\to 0}\]
  • существует слишком большое количество специальных символов и обозначений , чтобы перечислить здесь из все. Вот некоторые из наиболее часто используемых:
    • \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.

  • пробелы . MathJax обычно сам решает, как использовать пробелы в формулах, используя комплексный набор правил. Печать дополнительных пробелов в формулах не изменит количество пробелов, которые добавит в формулу MathJax: a␣b и a␣␣␣␣b соответствуют \(a b\) . Чтобы добавить больше пробелов, используйте \, для узкого пробела \(a\,b\) или \; для широкого пробела \(a\;b\) . \quad и \qquad соответствуют большим пробелам \(a\quad b\) , \(a\qquad b\) .
    Чтобы использовать простой текст, используйте \text{...} : \(\{x\in s\mid x\text{ is extra large}\}\) ;
  • акценты и диакритические знаки . Используйте \hat для одиночного символа \(\hat x\) , \widehat для формулы \(\widehat{xy}\) (но если вы сделаете символ слишком широким, это будет выглядеть нелепо). Аналогичным образом \bar \(\bar x\) и \overline \(\overline{xyz}\) , и \vec \(\vec x\) и \overrightarrow \(\overrightarrow{xy}\) и \overleftrightarrow \(\overleftrightarrow {xy}\) . Для точек, как \(\frac d{dx}x\dot x = \dot x^2 + x\ddot x\) , используйте \dot и \ddot ;
  • специальные символы, используемые для интерпретации MathJax, могут быть экранированы , используя символ \ : \$ \(\$\) , \{ \(\{\) , \_ \(\_\) и т.д. Если вам нужен символ \ , вы должны использовать \backslash \(\backslash\) , так как \\ соответствует новой строке.
  • .

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

    ü легкость освоения и ручного набора основных математических обозначений

    ü максимальная совместимость с другими математическими форматами, которая должна обеспечиваться соответствующими конвертами

    ü возможность вывода формул на различные терминальные устройства

    ü поддержка расширяемости, т. е. введения новых символов, схем.

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

    Язык MathML предлагает гибкую и расширяемую систему записи математического материала, позволяющую взаимодействовать с внешними программами и осуществлять высококачественное отображение в различных информационных средах. Общий принцип использования MathML состоит во встраивании математических конструкций в XHTML/HTML-документ. Cоздание веб-страниц с использованием MathML возможно тремя способами: HTML + презентационный MathML, XHTML + презентационный MathML, XML + MathML

    Для преобразования математических выражений в MathML существует множество утилит . Основными браузерами , непосредственно поддерживающими MathML, являются последние версии Mozilla и его разновидности. Многие другие браузеры поддерживают этот формат при установке соответствующих плагинов . Кроме того, MathML поддерживается основными офисными программами, такими как Microsoft Word и OpenOffice.org , а также математическими программными продуктами например, Mathematica , Maple . MathML — о чень мощный и универсальный язык разметки формул. Правда, ред актировать формулы (и читать) довольно тяжело . Язык MathML построен по XML-технологии и для задания фрагментов формул используются свои теги.

    Пример описания простой формулы

    x

    +

    3

    Пример 2

    Вставка формул в html-документы с помощью разметки TeX

    TeX – это популярный язык разметки, который используют многие люди, особенно в математическом мире, текстовый процессор, система форматирования документов.

    Пакет позволяет автоматизировать многие задачи набора текста и подготовки статей, включая набор текста на нескольких языках, нумерацию разделов и формул, перекрёстные ссылки, размещение иллюстраций и таблиц на странице, ведение библиографии и др.

    Формулы в LaTeX набираются с помощью специальных команд. Например, формула для нормального распределения в LaTeX будет выглядеть так: \frac{1}{\sigma\sqrt{2\pi}}\exp\left(-\frac{(x-\mu) ^2}{2\sigma^2}\ right)

    а отображаться будет так:

    Исходный код математической формулы записывается внутри тега ... Пробелы игнорируются (ТеХ их сделает сам). Пустые строки не разрешаются.

    Достоинства TEX:

    • программные реализации TEX есть практически для всех типов компьютеров
    • низкие требования к аппаратным ресурсам (для работы достаточно IBM PC совместимого компьютера с 286/386 процессором)
    • переносимость исходных текстов, (результаты форматирования, т.е. конечный вид вашего документа, будет идентичен для все платформ)
    • при печати получается текст типографского качества,
    • большое количество бесплатных реализаций
    • возможность подготовки математических и других формул любой сложности которые будут прекрасно смотреться при печати, затрачивая при этом минимум усилий
    • расширяемость (на основе имеющихся базовых команд можно создавать свои, более сложные)

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

    Набор сложных формул существенно легче и быстрее «визуальных» редакторов (M$ Equation, MathCAD). В особенности это заметно, где требуется выравнивание формул относительно друг друга, расстановка нумерации, а также при использовании нестандартных математических обозначений.

    Формулы поддерживаются только в нотации TeX. Пример:

    E=mc^2

    что будет выглядеть так:

    Вставка формул в html-документы в виде рисунков

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

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