Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Наши скрипты > Математика в HTML

Автор: Rimch 9.6.2009, 13:57

Уважаемые участники форума, на днях начал писать скрипт для верстки математических формул как в ТеХ.

На данный момент реализовано 2 вида формул, строчные и блочные:

Строчные формулы отображаются как привычные формулы в LaTeXе через $формула$
Блочные \[ формула\] - автоматически нумеруются (можно продумать ссылки).

Также реализована возможность возведения в степень ^, и нижний индекс _.
Еще имеется возможность написания дробей \frac{числитель}{знаменатель}

С работой скрипта можно ознакомиться http://sspa.bashtel.ru/Math/

Хочу посоветоваться с вами, как реализовать большие скобки и квадратные корни?

Да конечно можно не мучиться и пользоваться MathML, но он не работает в Opera, а для IE надо ставить плагин.

Автор: ksnk 9.6.2009, 18:09

Возможно, если переделать верстку в div'ную, можно будет копировать полученные формулы прямо в Ворд. Пока такое не получается.

Еще, в Хроме куски формул с широким делением выше основного текста. А так - достаточно прилично выглядит уже сейчас!

Цитата(Rimch @ 9.6.2009, 13:57

)

Хочу посоветоваться с вами, как реализовать большие скобки и квадратные корни?

В каком смысле? Как их нарисовать? или каким образом закодировать в html? Для html'я - обычные способы для рисования рамок - комплект объемлющих div'ов, формирующий корень или скобки , а внутри уже собственно формула.

Автор: solenko 9.6.2009, 18:57

Ссылка в тему http://www.vanav.com.ua/soft/unimath/

Автор: Rimch 9.6.2009, 19:18

ksnk,

Цитата(ksnk @ 9.6.2009, 18:09

)

Еще, в Хроме куски формул с широким делением выше основного текста.

Эта проблема мне известна, тут дело в реализации Хромом свойства vertical-align у строчных элементов. Пока решения данной проблемы не нашел.

solenko, спасибо за ссылку

Автор: Rimch 9.6.2009, 20:06

Немного переписал скрипт. http://sspa.bashtel.ru/Math/
Возможности:

Возведение в степень a^b или a^{b+c}
Нижний индекс a_b или a_{b+c}
Дробь \frac{числитель}{знаменатель} или \frac[em]{числитель}{знаменатель}, em - вертикальное относительное смещение
Квадратный корень \sqrt{a} или \sqrt[em]{a}
Большие скобки
\lbig  == (
\rbig  == }
\lvbig == {
\rvbig == }
\l. == пусто
\r. == пусто
Знаки \(sum|prod|int|cap|cup)\from{нижний предел}\to{верхний предел}
Пределы \(lim|max|min)\from{нижний предел}\to{верхний предел}

При печати опера и ослик ведут себя не очень хорошо по отношению к скобкам и рабикалам

Автор: Rimch 18.6.2010, 09:45

В течении учебного года со студентами написали учебник по ЧМ с использование tex.js.
Вот ссылка на небольшую часть учебника http://sspa.bashtel.ru/Math/

Автор: ksnk 18.6.2010, 18:24

Сейчас все это выглядит уже вполне разумно и кроссбраузерно.
imho, сейчас это, за исключением пары опечаток в комментариях программы ;), неплохой инструмент для генерации математических текстов "с нуля". Кстати. Символ суммы не рисуется, а сделан символом. А что будет , если нужно "просуммировать" сложную многоэтажную формулу? Размер шрифта меняется?
И вообще, как-то слишком просто выглядит скрипт, надо будет повнимательнее поковырять его ;)

Насколько я понимаю, с родным тех'ом не особенно совместимы формулы? Только на уровне некоторых общих слов и принципов построения. Так что просто перегнать статью, написаную в техе (хотя бы формулы) запросто не удастся? Хотя это был бы очевидный следующий шаг в развитии проекта. Так как массово привлечь народ такой математикой (и скриптом), можно напечатав массу статей. А масса статей использует Тех для формул... если реализация всего многообразия теховских конструкций слишком тяжела для скрипта, то можно было бы сделать несложный конвертер в имеющийся формат - текст конвертируем с html, формулы - в формулы...

Автор: bars80080 18.6.2010, 19:18

Цитата(Rimch @ 18.6.2010, 09:45

)

написали учебник по ЧМ

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

Автор: Rimch 18.1.2011, 13:30

Возвращаясь к теме математические формулы в HTML.
Вот пример работы немного подправленного мною WYSIWYGа - NicEdit.js http://raspisanieedu.ru/nicTexEdit/, в котором можно набирать формулы в формате TeX и приводить к привычному виду кликая user posted image

.

Остальные WYSIWYG тоже можно легко научить заменять выделенный текст на формулы, для этого в скрипте tex.js есть функция replaceSelectionFragment(), которая и делает преобразования независимо от WYSIWYG.

Автор: ksnk 18.1.2011, 17:00

Некоторые замечания по программированию на JS:

Зачем нужны функции $ и $$? $$ используется один раз, а $ - ни разу (если не считать функции big, которая всегда по тексту вызывается без параметров). Если их вообще ликвидировать - интегрируемость с jQuery станет значительно прозрачнее.

Если выполнить вот такую функцию

Код


function doTexTable(str,st)
{a=st.replace(/(#|\&amp;)/ig,'</td><td class="eq">');
...
}

то у объекта window появится новое свойство .a с достаточно специфическим значением, а если выполнить вот такую

Код


function doTexTable(str,st)
{var a=st.replace(/(#|\&amp;)/ig,'</td><td class="eq">');
...

то такого свойства не появится.

Раз уж все равно юзера обязывают подключить css, то использовать в тексте такие конструкции

Код


... style="margin-right:-0.25ex;display:inline;font-family:arial;font-weight:normal;font-size:150%;vertical-align:-50%;" ...

не очень красиво.

Автор: Rimch 18.1.2011, 17:15

ksnk, спасибо за замечания.
Учтем и исправим. smile

, завтра выложу обновлённую версию.

Автор: NormIridium 3.3.2011, 08:26

Rimch, жаль цитирование формул нет хорошего... я бы тогда это дело в движок форума встроил бы.

А еще я не люблю когда привязывают к JQ скрипты.

Автор: NormIridium 3.3.2011, 09:01

Тема: http://sovety.blogspot.com/2009/03/latex-formulas-in-blogs-and-on-web.html

Вот себе забрал скриптик: http://www.math.union.edu/~dpvc/jsMath/download/jsMath-fonts.html