Newcomposers.ru

IT Мир
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как записывать формулы в 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. Сам адрес в общем виде записывается так.

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

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

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

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

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

MathJax

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

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

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

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

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

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

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

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

MathJax — библиотека для отображения математических формул (краткий справочник)

MathJax позволяет включать математические формулы на web-страницы, используя разметку LaTeX, MathML или AsciiMath, после чего формулы будут обработаны javascript-библиотекой и преобразованы в HTML, SVG или MathML для отображения в любом современном браузере.

В настоящее время MathJax позволяет использовать как копию данной библиотеки на собственном сервере, так и версию библиотеки из CDN cdn.mathjax.org :

Конфигурация TeX-AMS-MML_HTMLorMML является одним из самых общих (и, следовательно, самых больших) файлов конфигурации. Хотя использование данной конфигурации возможно и не эффективно, но здесь она приведена для возможности быстрого старта использования MathJax.

Краткий справочник

Так как разметка LaTeX показалась мне более лаконичной, далее описываются только вопросы по её использованию при работе с MathJax:

  1. чтобы увидеть, как написана любая из формул, кликните правой кнопкой мыши на выражении и выберите «Show Math As > TeX Commands» (символы разделителей не показываются);
  2. для отображения формулы в отдельном блоке заключите её в разделители $$. $$ или [. ] [sum_^n i^2 = frac<(n^2+n)(2n+1)><6>]
  3. для отображения формулы внутри строки заключите её в разделители (. ) . Например, (sum_^n i^2 = frac<(n^2+n)(2n+1)><6>) . Обратите внимание, что разделители $. $ по умолчанию не поддерживаются, так как одиночные знаки доллара могут появляться в тексте и вызывать ошибочное преобразование текста в формулу;
  4. для отображения букв греческого алфавита, используйте alpha , beta , …, omega : (alpha) , (beta) , …, (omega) . Для верхнего регистра используйте Gamma , Delta , …, Omega : (Gamma) , (Delta) , …, (Omega) ;
  5. для верхних и нижних индексов используйте ^ и _ . Например, x_i^2 : (x_i^2) ;
  6. группы. Верхний и нижний индексы, а также другие операции применяются только к следующей «группе». «Группой» является либо один символ, либо любая формула, заключенная в фигурные скобки <. >. Если вы выполните 10^10 , то неожиданно получите (10^10) . Но 10^ <10>даст вам возможно то, что вы хотели: (10^<10>) . Используйте фигурные скобки, чтобы выделить формулу, к которой применяется верхний или нижний регистр: x^5^6 вызовет ошибку; ^z соответствует (^z) , и x^ соответствует (x^) . Заметьте отличие между x^i^2 (x_i^2) и x_ (x_) ;
  7. скобки. Одиночные символы ()[] создают круглые и квадратные скобки ((2+3)[4+4]) . Используйте < и >для отображения фигурных скобок (<>) .
    Описанные выше скобки не масштабируются вместе с формулой. То есть, если вы напечатаете (frac) , круглые скобки будут слишком маленькими: ((frac)) . Использование left( и right) выполнит автоматическую подстройку размера скобок к размеру формулы, которую они окружают: left(fracright) соответствует (left(fracright)) . left и right применяются ко всем следующим типам скобок: ( и ) (left(xright)) , [ и ] (left[xright]) , < и >(left) , | (left|xright|) , langle и rangle (leftlangle xrightrangle) , lceil и rceil (leftlceil xrightrceil) , и lfloor и rfloor (leftlfloor xrightrfloor) .
    Есть также невидимые скобки, обозначенные . : left.frac12rightrbrace соответствует (left.frac12rightrbrace) ;
  8. суммы и интегралы sum и int ; нижний индекс соответствует нижнему пределу, а верхний индекс — верхнему пределу. Например, sum_1^n (sum_1^n) . Не забудьте <. >, если пределы состоят из более чем одного символа. Например, sum_^infty i^2 соответствует (sum_^infty i^2) . Аналогично prod (prod) , int (int) , bigcup (bigcup) , bigcap (bigcap) , iint (iint) ;
  9. дроби. Существует два способа создать дробь. frac ab применятся к следующим двум группам и генерирует следующее (frac ab) ; для более сложных числителей и знаменателей используйте <. >: fracсоответствует (frac) . Если числитель и знаменатель слишком сложны, можно использовать over , который разделяет группу, в которой находится: соответствует () ;
  10. шрифты
    • используйте mathbb или Bbb для полужирного шрифта для «черной доски»: (mathbb) ;
    • используйте mathbf для полужирного шрифта: (mathbf) (mathbf) ;
    • используйте mathtt для шрифта «печатной машинки»: (mathtt) (mathtt) ;
    • используйте mathrm для «римского» шрифта: (mathrm) (mathrm) ;
    • используйте mathsf для шрифта без засечек: (mathsf) (mathsf) ;
    • используйте mathcal для «каллиграфического» написания: (mathcal< ABCDEFGHIJKLMNOPQRSTUVWXYZ>) ;
    • используйте mathscr для «скриптового» шрифта (как бы написанного от руки): (mathscr) ;
    • используйте mathfrak для шрифта «Fraktur» (старый немецкий стиль): (mathfrak mathfrak) ;
  11. знаки корня. Используйте sqrt , который подстраивается к размеру аргумента: sqrt (sqrt) ; sqrt[3] (sqrt[3]) . Для сложных выражений предпочтительнее использование <. >^ <1/2>;
  12. некоторые функции, такие как «lim», «sin», «max», «ln» и т.д., обычно используют «римский» (прямой) шрифт вместо «итальянского» (курсив). Используйте lim , sin и т.д., чтобы получить подобное: sin x (sin x) , а не sin x (sin x) . Используйте нижние индексы, чтобы прикрепить дополнительные надписи к lim : lim_ [lim_]
  13. существует слишком большое количество специальных символов и обозначений, чтобы перечислить здесь из все. Вот некоторые из наиболее часто используемых:
    • lt gt le ge neq (lt, gt, le, ge, neq) . Вы можете использовать not , чтобы поместить косую черту почти на всё: notlt (notlt) , но часто это выглядит некрасиво;
    • 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) ;
    • или binom<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 , например, aequiv bpmod n (aequiv bpmod 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) .

Создание математических формул на страницах HTML средствами MathML

Цель: обучить созданию web-страниц, содержащих математические формулы.

Время выполнения: два академических часа.

Форма занятия: лабораторная работа.

Задание № 1.

Запустите программу Блокнот и осуществите ввод следующего MathML кода в теле HTML:

sin 2 α + cos 2 α = 1

Теперь сохраните код под любым именем, не забыв присвоить файлу расширение html или htm. Откройте файл в браузере и ознакомьтесь с результатом.

▲ Греческую букву α получаем с помощью кода x03B1.

Задание № 2.

Запустите программу Блокнот и осуществите ввод следующего MathML кода в теле HTML:

a 2 + a b + b 2 a + b

Теперь сохраните код под любым именем, не забыв присвоить файлу расширение html или htm. Откройте файл в браузере и ознакомьтесь с результатом.

Задание № 3.

Запустите программу Блокнот и осуществите ввод следующего MathML кода в теле HTML:

1 + sin 2 x + y 2 + x — 2 x 1 + x 2 y 2 + x

Теперь сохраните код под любым именем, не забыв присвоить файлу расширение html или htm. Откройте файл в браузере и ознакомьтесь с результатом.

Задание № 4.

Запустите программу Блокнот и осуществите ввод следующего MathML кода в теле HTML:

1 1 1 1 1 1 0 0 0 1 1 0 0 0 1 1 0 0 0 1 1 1 1 1 1 Теперь сохраните код под любым именем, не забыв присвоить файлу расширение html или htm. Откройте файл в браузере и ознакомьтесь с результатом.

Задание № 5.

Запустите программу Блокнот и осуществите ввод следующего MathML кода в теле HTML:

a x + b y = c a 1 x + b 1 y = c 1 Теперь сохраните код под любым именем, не забыв присвоить файлу расширение html или htm. Откройте файл в браузере и ознакомьтесь с результатом.

Задание № 6. .

S = 1 — 1 2 + 1 4 — 1 8 + … + -1 n 1 2 n = Σ i = 0 n -1 i 1 2 i

Теперь сохраните код под любым именем, не забыв присвоить файлу расширение html или htm. Откройте файл в браузере и ознакомьтесь с результатом.

▲ Различные математические символы, при необходимости, нужно отыскивать в кодировочной таблице Unicode.

On-line приложения.

графические on-lin приложения

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

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

$$H_i = int limits_<–infty>^ mu left( (1 – cosvarphi) + frac <2>(1 – cos2varphi) right) delta(x) dx.$$

получим после интерпретации математическую формулу:

ТеХе является свободно распространяемым продуктом и может быть выкачан из Internet с десятка сайтов. Также легко найти утилиты, руководства и примеры, шаблоны документов по которым можно верстать собственные статьи, брошюры, книги.
К недостаткам, а скорее к сложностям, можно отнести необходимость владения специальным языком программирования.

Литература

1. Избранные задачи по математике из журнала «American Mathematical Monthly»: Сборник / Под ред. В.М. Алексеева. – М.: Едиториал УРСС, 2004.
2. Кнут Д.Э. Все про ТеХ. – М.: Издательский дом «Вильямс», 2003.

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

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

Необходимость разметки 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-технологии и для задания фрагментов формул используются свои теги.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мне очень не нравится 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. Сам адрес в общем виде записывается так.

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

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

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

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

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

MathJax

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

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

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

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

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

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

Читать еще:  Html иероглифы вместо букв
Ссылка на основную публикацию
Adblock
detector