Практикум-презентация

1. Использование макропакета MathJax при
создании математических TeX-формул в
контексте веб-сайтов
Практикум-презентация
Исполнитель:
магистрант кафедры информационных ресурсов ФИДК
Люцко Наталия Михайловна
Минск, 2013

2. О создании TeX
• Создателем настольной издательской системы
TеX считается Дональд Эрвин Кнут (англ.
Donald Ervin Knuth) - идеолог
программирования, американский учёный,
почётный профессор Стэнфордского
университета и нескольких других
университетов в разных странах, иностранный
член Российской академии наук,
преподаватель, автор 19 монографий (в том
числе ряда классических книг по
программированию) и более 160 статей,
разработчик нескольких известных
программных технологий. Автор всемирно
известной серии книг, посвящённой основным
алгоритмам и методам вычислительной
математики.

3. • LaTeX (произносится [leɪtɛk]по-русски — лате́х) —
наиболее популярный набор макрорасширений (или
макропакет) системы компьютерной вёрстки ΤΕΧ,
который облегчает набор сложных документов.
• Пакет позволяет автоматизировать многие задачи набора
текста и подготовки статей, включая набор текста на
нескольких языках, нумерацию разделов и формул,
перекрёстные ссылки, размещение иллюстраций и
таблиц на странице, ведение библиографии и др. Кроме
базового набора существует множество пакетов
расширения LaTeX. Первая версия была в 1984 году
выпущена американским учёным в области теории
вычислительных систем Лесли Лэмпортом. Разработчик
LaTeX — популярного набора макрорасширений
системы компьютерной вёрстки TeX. Текущая версия,
LaTeX2ε, после создания в 1994 году испытывала
некоторый период нестабильности, окончившийся к
концу 90-х годов, а в настоящее время
стабилизировалась (хотя раз в год выходит новая версия).

4. MathJax
• MathJax является кросс-браузерной JavaScript библиотекой, которая
отображает математические уравнения в веб-браузерах, используя LaTeX-
математику и MathML разметки. MathJax выпущен с открытым исходным
кодом под лицензией Apache.
• Проект MathJax начался в 2009 году в качестве преемника ранее
JavaScript библиотеки форматирования математических формул, jsMath, и
управляется Design Science. Он проводится при финансовой поддержке
Американского математического общества, Design Science, и Общество по
индустриальной и прикладной математике и при поддержке
Американского физического общества, Elsevier, и проект Евклида.
• Американское математическое общество — ассоциация
профессиональных математиков США. Общество способствует развитию
математической науки и преподавания математики. Издает научные
журналы, организует конференции, ежегодно присуждает денежные
гранты и призы математикам, оплачивает обучение одаренной
молодежи.

5. Характеристики MathJax
• MathJax загружается вместе с веб-контентом страницы. Сканируя её
содержимое, система считывает команды на языке TeX и если они
написаны правильно, воспроизводит на сайте математическую
формулу. Таким образом, MathJax не требует установки программного
обеспечения или дополнительных шрифтов в системе читателя. Это
позволяет MathJax работать в любой браузере с поддержкой
JavaScript, в том числе мобильных устройствах.
• MathJax отображает математические формулы с помощью
комбинаций HTML и CSS или собственного формата MathML, если
таковой поддерживается браузером.
• Точность набранных формул определяется возможностями
используемого браузера пользователя, шрифтами, доступными в
системе пользователя и параметрами конфигураций (TeX-команд).

6. Совместимость MathJax с
браузерами
MathJax отображает математические и другие формулы в самых популярных
браузерах, включая:
Internet Explorer
Firefox
Google Chrome
Safari
Opera
iPhone / IPad Safari
Android

7. Совместимость MathJax с
браузерами
• Всесторонняя поддержка браузера - важная цель для MathJax. В то же время,
MathJax действительно требует определенного минимального уровня
функциональных возможностей браузера. Список содержит браузеры, которые
были проверены с MathJax.

8. Совместимость MathJax с
серверами
• MathJax может быть установлен на различные веб-
серверные платформы, такие как:
MediaWiki
Drupal
WordPress
Joomla
и др.

9. • В контексте любого динамического сайта можно использовать
математические формулы. Для этого необходимо подключить систему
Mathjax. Она используется для более корректного отображения
математических и других формул в текстах публикаций в веб-среде.
• ТеХ-формулы можно вставлять в контекст, написав предварительно знак
начала формулы ( и не забыв его закрыть ).
• Диалог пользователя и системы LaTeX осуществляется только посредством
команд. Это обстоятельство является принципиальным отличием LaTeX от
других издательских систем. Именно это обстоятельство даёт свободу
пользователю при подготовке документов любого уровня сложности, начиная
от элементарных заметок, заканчивая крупными проектами типа
энциклопедических словарей. Гибкость LaTeX позволяет удовлетворить
потребности даже самого придирчивого пользователя, который в своих
документах использует «изощрения» на любой лад. Единственное, что
требует LaTeX – это чёткой инструкции его действий. Естественно, от Вас
требуется чёткое понимание того, что Вы делаете и что хотите сделать.
• LaTeX «понимает» более 900 команд, и это не предел. Новичок вполне может
обойтись 20-ю командами.
• Для того, чтобы видеть на сайте формулы, а не набор команд LaTeX, Ваш
браузер должен поддерживать JavaScript, CSS2, Ajax.

10. • JavaScript — прототипно-ориентированный скриптовый язык программирования. обычно
используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее
широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-
страницам. JavaScript используется в AJAX, популярном подходе к построению интерактивных
пользовательских интерфейсов веб-приложений, заключающемся в «фоновом» асинхронном
обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не
перезагружается полностью и интерфейс веб-приложения становится быстрее, чем это происходит
при традиционном подходе (без применения AJAX).
• CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания
внешнего вида документа, написанного с использованием языка разметки. Преимущественно
используется как средство описания, оформления внешнего вида веб-страниц, написанных с
помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам,
например, к SVG или XUL. Уровень 2 (CSS2) принята 12 мая 1998 года. Основана на CSS1 с
сохранением обратной совместимости за несколькими исключениями. В своей функциональности
CSS2 имеет генерируемое содержимое, что позволяет добавлять содержимое, которого нет в
исходном документе, до или после нужного элемента.
• Ajax - (eɪdʒæks, от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») —
подход к построению интерактивных пользовательских интерфейсов веб-приложений,
заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при
обновлении данных, веб-страница не перезагружается полностью, и веб-приложения становятся
более быстрыми и удобными. По-английски AJAX произносится как «э́йджэкс», по-русски довольно
распространено «ая́кс». AJAX — не самостоятельная технология, а концепция использования
нескольких смежных технологий. AJAX базируется на двух основных принципах:
– использование технологии динамического обращения к серверу «на лету», без перезагрузки
всей страницы полностью;
– использование DHTML для динамического изменения содержания страницы;
В качестве формата передачи данных могут использоваться фрагменты простого текста, HTML-кода.

11. Установка MathJax на веб-сайт
• Прежде, чем начать работу с
браузерным макропакетом
MathJax и непосредственно с
формулами, необходимо
установить этот пакет на веб-
сайт или блог.
• Для того, чтобы это сделать,
необходимо в браузере
открыть html-код сайта с
помощью стандартной
программы «Блокнот»
(Notepad++), которая есть во
всех операционных системах.

12. Установка MathJax на веб-сайт
• В коде динамического сайта в главном блоке <head> прописывается
строка:
PHP
1.
2.
3.
<?php
<script tipe=’text/javascript
?>

13. Установка MathJax на веб-сайт
<head>
<title>Название сайта - Раздел сайта: Подраздел сайта</title>
<script type=‘text/javascript’
src=‘mathjax/MathJax.js?
config=Tex-AMS-MML_HTMLorMML’></script>
</head>
Существует несколько конфигураций скрипта для работы системы MathJax на
веб-сайте. Например такая (взята с официального сайта MathJaX
http://www.mathjax.org/ :
<head>
<title>Название сайта - Раздел сайта: Подраздел сайта</title>
<script type="text/javascript" src="/MathJax/MathJax.js">
MathJax.Hub.Config({
extensions: ["tex2jax.js","TeX/noErrors.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: {inlineMath: [['$','$'],["(",")"]]},
"HTML-CSS": {availableFonts:["TeX"]}
});
</script>
</head>
На тестируемом нами веб-сайте была установлена следующая конфигурация:

14. Установка MathJax на веб-сайт
• Вот таким образом выглядит код сайта, открытый в программе
«Блокнот»:

15. Установка MathJax на веб-сайт
• Для того убедиться в правильности настроек можно просмотреть
(проинспектировать) введенные команды. Для этого необходимо:
1. Открыть браузер (на скриншотах представлен пример с браузером
Mozilla Firefox 13.0);
2. На панели задач вашего веб-обозревателя выбрать пункт
«Инструменты»;
3. В появившемся меню выбрать пункт «Веб-разработка», а нём
установить галочку на пункте «Инспектор».
4. Внизу экрана откроется html-страница вашего сайта. Открыть
окружение <head> (главное поле) и подмножество <script type=…>
</ script> и проинспектировать его.

16. Установка MathJax на веб-сайт
• Процесс инспектирования введённых объектов

17. Стандартные способы
создания формул для веб-
сайта (без использования
языка TeX):
1. Часто для вставки
математической формулы в
контекст сайта веб-
разработчики используют
стандартные числовые формы
текстового редактора Microsoft
Word либо встроенный список
формул.

18. 2. Формулу набирают (вручную или
используют встроенные формулы) всё в
том же текстовом редакторе Microsoft
Word, а затем копируют её в редактор
графики, например в Paint. После этого
сохраняют в формате GIF и загружают
изображение на сайт. Как только
изображение попало в базу сайта, его
вставляют в определённый текст.
Формула дроби,
введённая вручную
Формула в
виде
изображения
GIF

19. Итак, приступим к
вёрстке формул
• Для работы с математическими
формулами мы загрузили в базу
динамического сайта статью из
истории математики, взятую с сайта
http://crow.academy.ru
• В программный код данного сайта
установлена система MathJax и наш
браузер Mozilla Firefox 13.0
соответствует выше перечисленным
требованиям.

20. Набор математических формул в LaTeX
• При составлении
математических формул
очень поможет
методическое пособие
Владимира Сюткина
«Набор математических
формул в LaTeX». В нём
описаны все
необходимые команды и
элементы системы
MathJax (ознакомиться с
тестом пособия можно,
кликнув по нему левой
кнопкой мыши).

21. Правила написания математических формул
на языке TeX в системе MathJax
1. Формулы внутри текста надо размещать между командами ( и ) или в
окружении math (между begin{math} и end{math}), или выделять с
обеих сторон знаками доллара $.
2. Любая буква считается именем переменной и печатается шрифтом
«математический курсив». Символы ^ и _ являются служебными: они
используются для набора верхних и нижних индексов, соответственно.
3. Математические символы, а также греческие буквы, которых нет на
клавиатуре, печатаются специальными командами. Имена команд
обычно совпадают с названиями символов.
4. В математической моде TEX игнорирует все пробелы между символами в
исходном тексте и расставляет промежутки сам. Формулы не
должны содержать пустых строк. Кроме латинских букв a..z, A..Z и
цифр 0..9, распознаются и печатаются следующие символы:
+- =*/<>() [] |. ,;?!:‘’ "@

22. Основные команды в системе MathJax
( - начало формулы
frac {числитель}{знаменатель} – обыкновенная дробь
^{показатель степени} – возведение в степень с заданным показателем
sqrt{число} – корень квадратный
pi – число Пи прописью
) – окончание формулы
• Эти команды используются чаще всего, а некоторые из них
постоянны в любой формуле. Остальные команды и комбинации
подробно описаны в методическом пособии.

23. Примеры составления простейших
формул
( frac{256}{81} )
( 2^{28} )
( sqrt{10} )
( pi )

24. Пример неверно записанной
формулы
• При ошибке в записи формулы на сайте будет
отображаться не сама формула, а её неверная TeX-
команда в обрамлении (пример показан на рисунке ниже)
( frac{256_81} )

25. ( 3{,}1415927... )
( 3{,}1415922653... )
( pi =3,1419... )
( 3*frac{10}{71} ) и ( 3*frac{1}{7} ),( 3frac{10}{71} ).
( 3frac{1}{7} )( 11 : 14 )
( pi )
( 3{,}162... )
( sqrt {10} )
( pi )
( d-(frac{d}{9})^{2} )
( pi )
( pi = 3,160... ).
( d )
( frac{256}{81} )
( (frac{16}{9})^2 )
( pi )

26. ( frac { pi}{6} = 1 sqrt {3} [1 - frac {1}{3}* frac {1}{3} + frac {1}{5} * ( frac {1}{3})^2 - frac {1}{7} * ( frac {1}{3})^3 + ...] ), т.е.
( pi =2 sqrt {3} [1 - frac {1}{9} + frac {1}{5} * (frac {1}{3})^2 - frac {1}{7} * (frac {1}{3})^3 + ...] )
( 1-frac{1}{3}+frac{1}{5}-frac{1}{7}+frac{1}{9}-
frac{1}{11}+... =frac{pi}{4} ),
( arctan frac {1}{ sqrt{3}} = frac {pi}{6} )
chi = frac {1}{ sqrt{3}} ),( arctan chi )
( pi ).
( pi ).
( 3*2^{28} )
( pi ).( 1' ).

27. ( pi =sqrt{2}+sqrt{3} )
( mathrm {S_2n} <pi < mathrm {S_2n_{+1}} )
( epsilon^{2 pi i} =1 ) , где ( i=sqrt{-1} ) .
( mathrm {S_n+1} = mathrm {S_n} + frac {(2 sqrt
{3})}{(2n+1)} * ( frac {-1}{3})^n ),
( arctan chi )
( pi ).
( pi )
( pi ).
( pi ).
( epsilon )
( pi )

28. Вот так выглядят математические формулы,
написанные на языке TeX

31. Примеры записи сложных математических формул
на языке TeX в системе MathJax
Команда формулы на языке TeX Результат
( left( sum_{k=1}^n a_k b_k right)^2
leq left( sum_{k=1}^n a_k^2 right)
left( sum_{k=1}^n b_k^2 right) ) или
( (sqrt{frac{2}{5+6}})^{4x} )
( frac{1}{sigmasqrt{2pi}}
expleft(-frac{(x-
mu)^2}{2sigma^2}right) )
( begin{eqnarray}
E &=& mc^2
m &=& frac{m_0}{sqrt{1-
frac{v^2}{c^2}}}
end{eqnarray} )

32. Литература к практикуму
1. Балдин, Е.М. LaTeX в России / Е.М. Балдин .- Новосибирск: ИВМиМГ СОРАН, 2005 .- 16 с.
2. Берри, К. Руководство пользователя TEX Live TEX Live 2011 / К. Бери .- Новосибирск: Изд. ИВМиМГ СОРАН, 2011 .- 41 с.
3. Воронцов, К.В. LATEX2ε в примерах∗/ К.В. Воронцов .- Ярославль: ЯрГУ им. П.Г. Демидова, 2005 .- 59 с.
4. Гиленсон, П.Г. Справочник художественного и технического редакторов / П.Г. Гиленсон .- Москва: Книга, 1988.- 35 с.
5. Грицаенко, И.А. LaTEX. Руководство для пользователей. Часть I. / И.А. Грицаенко , С.В.Клименко .- 114 с.
6. Грицаенко, И.А. LaTEX. Руководство для пользователей. Часть II. / И.А. Грицаенко , С.В.Клименко .- 35 с.
7. Жидков, А.А. Интерактивные презентации в системе LаTеX: Учеб. метод. пособие / А.А. Жидков .- Нижний Новгород: Нижегородский
государственный университет им. Н.И. Лобачевского, 2010 .- 41 с.
8. Кнут, Д. Всё про TEX / Д. Кнут .- Москва: Издательский дом «Вильямс», 2003.- 336 с.
9. Колодин, Русский стиль, или Новейшие рекомендации для современных российских электронных типографий / М.Ю. Колодин .- 1999 .-
28 с.
10. Котельников, И.А. LATEX по-русски.— 3-е издание, перераб. и доп / И.А. Котельников, П.З. Чеботаев.— Новосибирск: Сибирский
хронограф, 2004. — 496 с.
11. Львовский, С. М. Набор и вёрстка в пакете LATEX. / С.М. Львовский.- 3-е изд. - М.: МЦНМО, 2003.-448 с.
12. Миньковский, Е.М. Набор химических формул в системе LATEX2ε: точка зрения практика / Е.М. Миньковский .- Ярославль: ЯрГУ им. П.Г.
Демидова, 2001 .- 20 с.
13. Миньковский, Е.М. Окружение для набора химических уравнений chemeq / Е.М. Миньковский .- Ярославль: ЯрГУ им. П.Г. Демидова,
2011 .- 12 с.
14. Миньковский, Е.М. Проблема вставки графики из приложений Windows в документы LATEX; химия в LATEX; замена шрифтов в рисунках /
Е.М. Миньковский .- Ярославль: ЯрГУ им. П.Г. Демидова, 2011 .- 12 с.
15. Морозов, Д. К. Подготовка документов в издательской системе Латех / Д. К. Морозов, А.Я. Пархоменко .- Ярославль: ЯрГУ им. П.Г.
Демидова, 2011 .- 96 с.
16. Роженко А.И. Искусство вёрстки в LATEX’е. - Новосибирск: Изд. ИВМиМГ СОРАН, 2005. 398 с.
17. Сюткин, В., Включение рисунков в LATEX2ε∗/ В. Сюткин.- Ярославль: ЯрГУ им. П.Г. Демидова, 2001 .- 12 с.
18. Сюткин, В., Гипертекст в PDF документах, созданных средствами LATEX2ε∗/ В. Сюткин.- Ярославль: ЯрГУ им. П.Г. Демидова, 2002 .- 9 с.
19. Сюткин, В., Набор математических формул в LATEX2ε∗/ В. Сюткин.- Ярославль: ЯрГУ им. П.Г. Демидова, 2002 .- 46 с.
20. Сюткин, В., Опции пакета hyperref для настройки PDF выхода/ В. Сюткин.- Ярославль: ЯрГУ им. П.Г. Демидова, 2002 .- 12 с.
21. Сюткин, В. Русский язык в LATEX2ε / В. Сюткин .- Ярославль: ЯрГУ им. П.Г. Демидова, 2002 .- 7 с.
22. Сюткин, В. Справочник по командам LATEX2ε / В. Сюткин .- Ярославль: ЯрГУ им. П.Г. Демидова, 2002 .- 49 с.
23. Сюткин, В., Цвет в LATEX2ε∗/ В. Сюткин.- Ярославль: ЯрГУ им. П.Г. Демидова, 2001 .- 8 с.
24. Тоботрас, Б. Не очень краткое введение в LATEX2ε∗: или LATEX2ε∗ за 94 минуты / Б. Тоботрас .- 1999 .- 108 с.
25. Чассел, Роберт Дж. Texinfo / Роберт Дж. Чассел, Ричард М. Столмен .- 1998 .- 248 с.
26. Шипунов, А.Б. Rusnat.bst и natbib, русский стиль для библиографии / А.Б. Шипунов .- Ярославль: ЯрГУ им. П.Г. Демидова, 2011 .- 3 с.