Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Математические формулы в HTML (https://javascript.ru/forum/project/3988-matematicheskie-formuly-v-html.html)

Rimch 11.06.2009 08:28

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

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

Скрипт умеет:
  • возводить в степень ^,
  • писать индексы _.
  • отображать дроби \frac{числитель}{знаменатель}
  • реализовал возможность использовать суммирование, приведение, интегрирование, пределы
С работой скрипта можно ознакомиться http://sspa.bashtel.ru/Math/

пример работы скрипта
<html>
<script>$=function(id){return document.getElementById(id);}</script>
<LINK rel="stylesheet" href="tex.css" type="text/css">
<script src='tex.js'></script>
<body>
<div id='memo1' style="font-size:14pt;font-family:arial;">
\[\sigma + \frac{ e^{ \frac{1}{2} +\sin^2(x)+\cos^2(x)\frac{\sin(x)^{\tg(x)}}{\cos(x)} } + \sin(x)}{\cos(2x)+ \sin(x/2)}\]
</div>
<script>$('memo1').innerHTML=DoTex($('memo1').innerHTML);</script>
</body>
</html>

на экране будет

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

Прошу оценить скрипт. Конструктивная критика - приветствуется.


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

B~Vladi 11.06.2009 10:21

Круто!

На корень похож символ &radic;, а верхнюю полосу уже можно дописать;)

Думаю, скобки можно выводить и обычные, но с бОльшим кеглем... Поиграть шрифтами, чтоб не такие круглые были.

Gvozd 11.06.2009 12:33

АБАЛДЕТЬ!
Rimch, вы молодец, и мне радостно, что хоть кто-то интересными серьезными вещами занимается
по поводу скобки мне кажется не удастся добится чтобы она была высокая и узкая относительно
поэтому советую для скобок, по высоте как два, и более обычных символа, держать соответсвующую картинку, и растягивать ее по высоте
по поводу же корня идея примерно такая:
не использовать символ(будет трудно черту верхнюю склеить с концом радикала)
я бы обернул подкореное выражение в таблицу 2х2
как-то так
-------------------------------------
| /--| ------------------------- |
-------------------------------------
| / | |
|_ / | подкореное выражение|
| \/ | |
--------------------------------------

вот небольшой багрепорт по поводу верстки вашей(скриншотом)

Rimch 11.06.2009 12:50

Gvozd, спасибо за небольшой багрепорт у меня огнилис 3.0.10, в более ранних версиях я не проверял. Сами понимаете кросбраузерность дело мудренное. Будем думать.

Насчет радикалов я так подумал, можно попробовать через canvas. Но это HTML 5. Должно получиться прикольно.

Вопрос, кто знает, как в ранних версиях огнилиса и хрома единица измерения em и ex определяется (в этом кроится косяк с дробями)?

Kolyaj 11.06.2009 12:56

Цитата:

Сообщение от Rimch
можно попробовать через canvas

Тогда уж VML+SVG.

Octane 11.06.2009 13:11

Так как скопировать и нормально вставить выделенный текст всё равно не получается, то, как предложил Kolyaj, лучше использовать VML и SVG. Создаете набор необходимых символов в векторном виде, как, например, в Cufón или typeface.js, и отрисовываете их с нужным увеличением средствами SVG или Canvas и VML в IE.

Rimch 11.06.2009 13:50

Спасибо за совет так и сделал. Посмотрите что получилось
http://sspa.bashtel.ru/Math/

B~Vladi 11.06.2009 14:03

хм... а где корень?! да и скобки вроде стандартные...

B~Vladi 11.06.2009 14:04

Во! Появилось!
Похоже кэш подвёл...

Gvozd 11.06.2009 14:04

в опере(9.27) левая часть корня не сходится с верхней
есть небольшой зазор в пару пикселей


Часовой пояс GMT +3, время: 17:25.