Интегралы больше не проблема

5 января 2016 Антон Кулешов 1620 0

Математика и все, что связано с ней, не очень популярная тема в рунете. Если за рубежом профессора и преподаватели ещё ведут свои блоги, есть весьма интересные сайты университетов, то у нас все остановилось на банальном распространении курсовых и контрольных. Однако, креативным людям увлекающимся матаном и понимающим в сайтостроении, сегодняшняя статья будет не безынтересна. А затронем мы в ней вывод формул в браузер, на заметку студентам – полноценный сайт, подготовленный к дипломному проекту с парой-тройкой коментов, будет выглядеть на защите просто убийственно, по сравнению с приевшимися презентациями в PowerPoint.

Реклама

В годы моей студенческой юности набор математических формул в обычном word уже вызывал уйму неприятных эмоций, с появлением 2007 версии данная проблема слегка сгладилась. Но вывод математических формул в окне браузера был огромнейшей проблемой! Самое простое решение – показать пользователю картинку с формулой, что и мы и видели на подавляющем числе ресурсов, о каком-либо качестве тут и говорить не приходилось. Кто-то пытался выкладывать формулы в строчном представлении, как мы это делаем для работы в excel – вариант рабочий, но математические формулы становятся трудны для прочтения и восприятия.

Все, кто работал с JavaScript, наверняка знает, что у языка для математических расчётов и получения различных констант есть объект Math. Так вот, библиотека katex поможет визуализировать расчётные данные. Это не единственное решение, поэтому давайте рассмотрим плюсы его использования:

  • Быстрое и синхронное отображение формул;
  • Качественная отрисовка формул;
  • Автономность работы – библиотека не требует других скриптов и расширений;
  • Поддерживает отрисовку и на стороне сервера. Вы можете спокойно отрисовать нужные формулы на сервере, используя NodeJS, а затем отправить страницу браузеру как HTML.

Подключим стили и сам скрипт:

<link href="katex.min.css" type="text/css" rel="stylesheet" />
<script src="katex.min.js" type="text/javascript"></script>

Вот, собственно, и все, что нужно сделать. Стоит только отметить, что в архиве, который прикреплен к статье, находятся также и шрифты, используемые библиотекой. Подключать их не требуется – katex сама будет использовать то, что ей нужно, важно не забывать их скидывать в папку с проектом!

Переходим к использованию плагина и попробуем написать простую формулу:

katex.render("c = \\pm\\sqrt{c^2 + x^3}", element);

/*
	Первые слэшы необходимы для экранирования вторых
	Поэтому на странице демо пишем без них
	c = \pm\sqrt{c^2 + x^3}
*/

Чтобы отрисовать формулу необходимо её передать первым параметром метода render(), а вторым – элемент DOM дерева, куда отображать результат. Список операций, которые доступы для этой библиотеки можно найти на странице из документации по скрипту.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Нужен ли менеджер задач

21 июля 2017 Антон Кулешов
Нужен ли менеджер задач

Сегодня речь пойдет о целесообразности использования менеджера или планировщика задач! Вопрос на сегодняшний день не просто актуален, а является важной частью для комфортной работы в сети или реальной жизни. Честно говоря, я и сам раньше не был сторонником данного рода сервисов, считая, что важную информацию можно просто записать себе в блокнот или добавить в закладки браузера. И скажу, что это уже изначально неслабо ограничивает. Да, повседневные и мелкие пометки/заметки проще писать на листке бумаге, но если нужно как-то систематизировать их, проанализировать выполненные или просто, найти заметку месячной давности, то менеджер задач хороший инструмент для этого.

Два способа сделать меню для сайта на HTML и CSS

26 января 2015 Антон Кулешов

Всем привет! Сегодня разберем пару примеров реализации горизонтального меню – самых простых и самых надежных.

Слайдер на jQuery с эффектом занавеса

24 декабря 2014 Антон Кулешов

Недавно я обозревал нестандартный слайдер с красивыми эффектами при смене картинок. В этот раз я хочу рассказать про слайдер jqFancyTransitions с эффектом занавеса, написанный на jQuery.