Пруцков А. В. Математические выражения в веб-страницах: статья

Аннотация

Научные публикации или учебные материалы, размещаемые в сети Интернет, могут содержать математические выражения: формулы, специальные обозначения и др. Существует несколько способов включения математических выражений в веб-страницы. Поэтому актуальна проблема выбора наименее трудоемкого и наиболее функционального способа. В статье проанализированы способы включения математических выражений в веб-страницы, выявлены их преимущества и недостатки. Сделан вывод о том, что наименее трудоемким и наиболее функциональным способом для выполнения этой операции является использование Javascript-библиотеки KaTeX.

Библиографическая ссылка

Пруцков А. В. Математические выражения в веб-страницах // Cloud of Science. – 2020. – T. 7. – № 3. – С. 551-558.

Отправить сообщение автору

Контактная информация

Текст статьи

Введение

Одним из способов представления результатов исследований научному сообществу является размещение научных статей и отчетов (далее научные документы) в сети Интернет. Чаще всего научные документы представляются в формате PDF. Однако в некоторых случаях требуется их размещение в формате HTML.

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

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

    В статье сознательно опущены технические детали этих способов по следующим причинам:
  1. технические детали не являются целью статьи;
  2. технические детали способов могут измениться, поэтому предпочтительней обратиться на соответствующие веб-сайты, адреса которых приводятся в статье.

Представления математических выражений

    Математическое выражение может иметь следующие представления:
  • «классическое» – представление, которое используется в научных документах и учебной литературе; например, формула (1):
      $$ \frac{a+b}{c+d} $$
  • графическое – классическое представление, преобразованное в растровое (например, в форматах PNG или GIF) или векторное (например, формате SVG) изображение (см. рисунок);
    Пример графического представления математического выражения
  • внутритекстовое – представление математического выражения в виде строки символов внутри текста научного документа; например: \frac{a+b}{c+d}
    Математические выражения могут быть включены в веб-страницу в двух представлениях:
  1. графическом;
  2. внутритекстовом.

Существуют несколько способов преобразования графического и внутритекстового представлений в классическое.

Математические выражения в графическом представлении

    Вставка математических выражений в виде графических изображений состоит из следующих этапов:
  1. создание для каждого выражения изображения;
  2. вставки ссылок на изображения в веб-страницу.

Если научный документ имеет формат документа Word, то получить изображения математических выражение можно путем сохранения документа как веб-страницы. В результате будут созданы веб-страница, а также изображения математических выражений в формате PNG в отдельной папке. Созданная веб-страница содержит избыточные данные о документе Word и требует редактирования перед размещением ее на веб-сервере.

Внутритекстовые представления математических выражений

    В настоящее время чаще всего используются три внутритекстовых представления математических выражений.
  1. TeX/LaTeX представляет собой математический подъязык одноименного языка. Команды языка начинаются с символа наклонной черты (\). После команды могут следовать ее параметры. Более подробно это представление рассматривается в [1].
  2. ASCIIMath [2] является упрощенным представлением TeX/LaTeX. Например, перед командами необязательно ставить наклонную черту.
  3. MathML является разновидностью языка XML и поддерживается консорциумом Всемирной сети (World Wide Web Consortium, W3C) [3]. Синтаксис, примеры и программные инструменты для работы с MathML обсуждаются в [4].

Примеры записи формулы (1) внутритекстовыми представлениями приведены в таблице 1. Для получения представлений использовался онлайн-редактор формул VisualMathEditor [5].

Запись формулы (1) внутритекстовыми представлениями
TeX/LaTeXASCIIMathMathML
     \frac{a+b}{c+d}
    
     (a+b)/(c+d)
    

	
		
			
				
					a
					+
					b
				
				
					c
					+
					d

Использование Javascript-библиотек

Использование Javascript-библиотек для вставки математических выражений в веб-страницу

    Использование Javascript-библиотек в веб-страницах с математическими выражениями состоит в следующем:
  1. включении в текст веб-страницы математических выражений во внутритекстовом представлении;
  2. подключении в начало веб-страницы Javascript-библиотеки;
  3. добавлении параметров библиотеки и вызовов ее функций при необходимости.

При загрузке веб-страницы вызывается функция библиотеки. Функция перебирает все элементы веб-страницы. Если элемент является внутритекстовым представлением математического выражения, то функция преобразует его в классическое представление путем добавления новых тэгов.

Библиотека MathJax

Библиотека MathJax [6, 7] разрабатывалась при поддержке Американского математического общества и других организаций как платформа для математики в веб-страницах в основных Интернет-обозревателях (браузерах). Библиотека поддерживает все три внутритекстовых представления.

Библиотека KaTeX

Библиотека KaTeX [8] позиционируется как более быстрая по загрузке альтернатива библиотеки MathJax. Библиотека поддерживает только внутритекстовое представление TeX.

Динамическая генерация графических изображений математических выражений

Существует промежуточный способ между вставкой графических изображений и использованием Javascript-библиотек. Интернет-ресурс codecogs.com [9] динамически преобразует внутритекстовое представление в графическое.

    Интернет-ресурс предоставляет два способа преобразования:
  1. Использование ссылке тэга IMG языка HTML параметра с внутритекстовым представлением; графическое представление может быть в формате GIF или SVG; пример из [9] получения графического представления в формате SVG:
    В результате будет создано графическое изображение с математическим выражением 1+sin⁡(x).
  2. Использование Javascript-библиотеки latexit.js, которая преобразует внутритекстовые представления математических выражений в веб-странице в графические.

Анализ способов вставки математических выражений в веб-страницу

Автором статьи при создании веб-страниц были проанализированы все перечисленные способы по различным параметрам (табл. 2), что позволило выявить их преимущества и недостатки.

Сравнение способов вставки математических выражений в веб-страницу
Параметр Вставка математического выражения как графического изображения MathJax KaTeX CodeCogs
Трудоемкость написания веб-страницы Высокая Низкая Низкая Средняя
Скорость загрузки страницы Низкая Средняя Высокая Низкая
Исходное представление математического выражения Графическое Внутри- текстовое, TeX/LaTeX, ASCIIMath, MathML Внутри- текстовое, TeX Внутри- текстовое, LaTeX

На странице [10] можно сравнить скорости загрузки веб-страницы с математическими выражениями с использованием библиотек KaTeX и MathJax. В среднем библиотека KaTeX выполняет преобразования представлений более чем в 20 раз быстрее, чем библиотека MathJax.

Таким образом, наилучшим способом вставки математических выражений в веб-страницу среди всех способов, рассмотренных в статье, является использование JavaScript-библиотеки KaTeX.

Нумерация математических выражений с помощью каскадных таблиц стилей

    Математические выражения в тексте могут иметь номера. Автоматизировать нумерацию математических выражений можно с помощью каскадных таблиц стилей. Для автоматической нумерации необходимо дополнить текст следующими элементами:
  1. пометить часть текста веб-страницы, как содержащую номер формулы, с помощью тэга, например:
    или класса тэга, например:
  2. добавить к каскадной таблице стилей страницы следующие элементы (для случая класса тэга) [11]: 
    	BODY {
		COUNTER-RESET: equation;
	}
	.equation-number:after {
		CONTENT: "(" counter(equation) ")";
		COUNTER-INCREMENT: equation;
	}

Номер формулы имеет вид (X) (строка 5), где X – значение счетчика, и добавляется в начало текста внутри тэга (строка 4). При каждом новом тэге класса equation-number счетчик увеличивается (строка 6). В начале страницы счетчик обнуляется (строка 2).

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

Возможности редактора формул текстового процессора Microsoft Word

    В разделе 3 упоминался текстовый процессор Microsoft Word. Редактор формул этого текстового процессора имеет следующие возможности [12]:
  • наряду с традиционным набором формул с помощью команд на ленте, ввод математических выражений во внутритекстовых представлениях TeX или MathML, что заметно ускоряет их написание;
  • расширение замен обозначений внутритекстового представления (функция Автозамена);
  • изменение выравнивания и разрывов в математических выражениях.

Заключение

    Были получены следующие результаты:
  1. Выделены виды представлений математических выражений: классическое, графическое и внутритекстовое. Приведены три типа внутритекстовых представлений.
  2. Выявлены и применены на практике способы вставки математических выражений в веб-страницу: в виде графических изображений, с помощью использования Javascript-библиотек и динамической генерации графических изображений.
  3. На основе проведенного анализа способов вставки математических выражений в веб-страницу сделан вывод, что наилучшим способом является использование Javascript-библиотеки KaTeX. Библиотека KaTeX используется автором статьи на Интернет-ресурсе http://prutzkow.com [13].
  4. Рассмотрены аспекты автоматической нумерации математических выражений в веб-страницах и возможностями редактора формул текстового процессора Microsoft Word по работе с внутритекстовыми представлениями.

В статье рассматривались только математические выражения, но не химические формулы, что также является темой для отдельной статьи.

По этой тематике не так много публикаций, несмотря на ее актуальность, поэтому список литературы состоит в основном из ссылок на веб-страницы.

Автор благодарит профессора Никульчева Евгения Витальевича за предоставленную им возможность публиковать статьи в таком авторитетном журнале, как журнал Cloud of Science.

Библиографический список

  1. Grätzer, G. More Math Into LaTeX, 5th ed. Springer, 2016
  2. AsciiMath. [Электронный ресурс] URL: http://asciimath.org (Дата обращения 25.01.2020).
  3. W3C Math Home. [Электронный ресурс] URL: https://www.worg/Math/ (Дата обращения 25.01.2020).
  4. Елизаров А. М., Липачев Е. К., Малахальцев М. А. Основы MathML. Представление математических текстов в Internet. Практ. рук. 2-е изд., перераб. и доп. Казань: Изд-во Казан. мат. о-ва, 2008. 100 с.
  5. VisualMathEditor. [Электронный ресурс] URL: http://visualmatheditor.equatheque.net/index.html (Дата обращения 24.01.2020).
  6. Cervone, D. MathJax: A Platform for Mathematics on the Web // Notices of the American Mathematical Society, 2012, 59(2):312–316.
  7. MathJax. Beautiful math in all browsers. [Электронный ресурс] URL: https://www.mathjax.org (Дата обращения 25.01.2020).
  8. KaTeX – The fastest math typesetting library for the web. [Электронный ресурс] URL: https://katex.org (Дата обращения 25.01.2020).
  9. LaTeX Equations in HTML. CodeCogs Equation Editor [Электронный ресурс] URL: https://latex.codecogs.com/index.php (Дата обращения 23.01.2020).
  10. KaTeX and MathJax Comparison Demo. [Электронный ресурс] URL: https://www.intmath.com/cg5/katex-mathjax-comparison.php (Дата обращения 25.01.2020).
  11. Мейер Э. CSS – каскадные таблицы стилей. Подробное руководство, 3-е издание. Пер. с англ. СПб: Символ-Плюс, 2008. 576 с.
  12. Mamishev, A. V., Sargent, M. Creating Research and Scientific Documents Using Microsoft Word. Microsoft Press, 2013.
  13. Пруцков А. В. Интернет-ресурс для размещения результатов научной и образовательной деятельности // Вестник Рязанского государственного радиотехнического университета. 2018. № 1(63). С. 84-89.