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

5 января 2016 Антон Кулешов 1588 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
Читайте далее

Слайдер с красивыми эффектами - Coin Slider

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

Совсем недавно, работая над новым сайтом, мне потребовался слайдер с красивыми эффектами. Ранее я описывал два достойных решения, которые в большинстве случаев подходят. В этот раз я хочу уделить внимание jQuery плагину под названием Coin Slider.

Простой прогресс бар загрузки страницы

8 января 2016 Антон Кулешов

Создавая веб-приложение, не важно, какого уровня: будет ли это обычный веб-сайт или сервис, который принимает массу параметров и обрабатывает их на сервере – хорошей практикой является добавление прогресс бара (progress bar), за анимацией которого можно спрятать все времязатратные части нашего приложения.

Табы для сайта на jQuery

21 октября 2014 Антон Кулешов

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