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) левая часть корня не сходится с верхней
есть небольшой зазор в пару пикселей

Octane 11.06.2009 14:24

Вместо <nobr>…</nobr> лучше использовать:
<span style="white-space: nowrap;">…</span>

Rimch 11.06.2009 14:32

У меня в таблице стилей для span, td, th уже стоит свойство "white-space: nowrap;" , тег nobr добавлен из-за небольших косяков в опере.

e1f 11.06.2009 14:56

Где-то видел уже готовое решение на Сях, в src рисунка передается тех-формула, серверный скрипт рендерит и выдает. Вроде бы называется mimetex

Riim 11.06.2009 20:47

Chrome 2.0.172.30

Форум не хочет рисунок добавлять. Говорит, что я что-то превысил. В общем, там немного поехало.

Rimch 15.06.2009 07:56

:help: Уважаемые участники форума, кто может кинуть ссылки по особенностям реализации единиц em и ex в различных браузерах (Chrome 2.xx, Firefox 2.xx)

Цитата:

Сообщение от e1f (Сообщение 21617)
Где-то видел уже готовое решение на Сях, в src рисунка передается тех-формула, серверный скрипт рендерит и выдает. Вроде бы называется mimetex

e1f, идея скрипта в том чтобы даже при отключении рисунков в браузере отображались формулы.
Цитата:

Сообщение от Riim (Сообщение 21684)
Chrome 2.0.172.30

Riim, эта проблема мне известна, под nix системами есть небольшие косяки при отображении формул, смещение дробей вверх на 1ex относительно базовой линии.

Не охота было писать для каждого браузера отбельную функцию, но видима придется :blink: Даже не для браузера, а для версии.

Rimch 16.06.2009 08:50

Уважаемые участники форума, попытался исправить баги указанные Gvozd и Riim.
Прошу протеcтить скрипт в ваших браузерах, может быть что то осталось.

Маленький лекбез о единицах ex, em и vertical-align.
Единицы em и ex являются относительными.

ex - высота буквы x
em - ширина буквы m, обычно принимается равной 2ex.

Что касается свойства vertical-align.
Оказывается для блочных элементов таких как div или table, свойство display которых объявлено как inline(а не block) базовая линия определяется по разному. Для table в более ранних версиях базовой линией считалась самая нижняя грань table, а сейчас к примеру для Opera и Firefox базовой принята нижняя граница первой строки таблицы.

Еще маленький секрет, для блочных элементов например table свойство vertical-align действует для содержимого, а для для таблицы со свойством display:inline это свойство vertical-align действует для самого объекта.

Riim 16.06.2009 09:37

Вложений: 1
Во втором примере малость съехало:

Rimch 16.06.2009 09:47

Уважаемые участники форума, прошу указывать название браузеров в которых есть баги.

Илья Кантор 16.06.2009 10:02

Привет,

Я тоже подобный конвертор когда-то писал, он уже несколько лет на форуме работает на http://forum.algolist.ru

Подсветка [math]..[/math].
Фактически, он просто прогоняет формулу через ТеХ и выводит рисунок.

Gvozd 16.06.2009 10:09

Цитата:

Сообщение от Rimch
Прошу протеcтить скрипт в ваших браузерах, может быть что то осталось.

баг с нестыковкой корня в опере - остался

Riim 16.06.2009 10:11

Цитата:

Сообщение от Rimch
Уважаемые участники форума, прошу указывать название браузеров в которых есть баги.

Все тот же Chrome 2.0.172.30

Rimch 16.06.2009 10:22

Riim, скриншот в студию. В слепую править баги не могу
Gvozd, у меня в опере все нормально, можно версию узнать

Riim 16.06.2009 10:24

Цитата:

Сообщение от Rimch
скриншот в студию

Так я же прикрепил к 17-ому посту.

x-yuri 16.06.2009 10:28

Цитата:

Gvozd, у меня в опере все нормально, можно версию узнать
http://javascript.ru/forum/project/3...html#post21613

Rimch 16.06.2009 10:29

Riim, а сейчас как?

B~Vladi 16.06.2009 10:32

Riim и Rimch, а вы не братья?:D
Чёт йа вас в постах путаю постоянно :)

Riim 16.06.2009 10:37

Цитата:

Сообщение от Rimch
Riim, а сейчас как?

Можно еще на 1 пиксель вверх поднять. Что бы симметрично с остальными примерами было.

x-yuri 16.06.2009 11:12

Вложений: 6
только я ж скриншоты не все сразу сделал, а с паузами (может там чего менялось в это время). Названия браузеров в имени файла
p.s. автору респект и уважуха за скрипт :thanks:

Rimch 16.06.2009 11:23

:wacko: ыыыы это сафари.....:
а опера глючит со своим nowrap :wacko:
Кто нить знает как с ёперой (9.2x-9.3x) бороться, чтобы она построчно текст не переносила в ячейках таблицы? В качестве орудия можно использовать только css.

Долго бился над исправлением ОПЕРНОГО БАГА, но не к чему так и не пришел. Понятия не имею как исправить этот баг. Пока так и будет с зазором корни отображаться.

x-yuri 16.06.2009 13:15

когда я прогнал ту формулу через http://infohound.net/tidy/ она отобразилась нормально

B~Vladi 16.06.2009 13:16

Попробуй вместо пробелов, которые есть у тебя в ячейках, ставить &nbsp;.
имхо: а лучше вапсче без таблиц...

Rimch 16.06.2009 19:39

x-yuri, огромное вам спасибо. Я и забыл про доктайпы. Указал доктайп
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

и усё заработала....:p
JavaScripёры протестите пожалуйста на баги еще раз, кто его знает вдруг остались или появились.
Насчёт вертикального выравнивания баг известен, думаю придётся пока каждый раз указывать ручками на сколько необходимо поднять или спустить дробь. Скрип есть который определяет смещение но он долгий, грузит браузер. Как придумаю оптимальный обход дробей внедрю.

Riim 17.06.2009 03:07

Совсем все плохо стало (Chrome 2.0.172.31):

Rimch 17.06.2009 05:59

Riim, Ничего страшного. Просто с таким доктайпом Chrome не воспринимает для таблиц свойство display:inline.
Поменял доктайп на
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

В Opera 9.2x, Firefox 3.x, ie 6.x и выше формулы отображаются нормально, может быть сейчас заработает в Chrome 2.0.172.31

Rimch 17.06.2009 09:36

:dance: Найдено новое применение скрипта. Скрипт работает в мобильном телефоне Опера мини =>
При помощи скрипта можно верстать шпоры :rolleyes: по Математическому анализу, дифференциальным уравнения, геометрии, алгебре, функциональному анализу и т.д. и т.п.

Riim 17.06.2009 14:36

Rimch,
не выдумывай лишнее, ты хорошо начал, но теперь совсем все плохо стало: см. рисунок
, хотя бы верни как было.

Rimch 17.06.2009 14:55

Riim, все вернул на свои места.
Я правки делаю прямо на серваке, поэтому иногда выскакивают такие баги.
В следующий раз буду по аккуратнее. :p , чтобы таких абр кадабр кроме меня никто не видил.

Riim 17.06.2009 15:09

Цитата:

Сообщение от Rimch
В следующий раз буду по аккуратнее. , чтобы таких абр кадабр кроме меня никто не видил.

Хорошо бы, что бы так и было. На данный момент вижу следующее: см. рисунок
Chrome можно скачать здесь: http://www.google.com/chrome/index.h...tm_campaign=ru

Rimch,
ты зря спешишь, тебя никто не торопит.

Rimch 17.06.2009 15:16

Riim, спасибо за ссылку. Скачал, потестил.

Скрип протестировал на сайте http://browsershots.org в различных браузерах:
Windows
Chrome 0.2.149.30/0.3.154.9/0.4.154.33/1.0.154.65/2.0.172.31
Firefox 1.5/2.0.0.20/3.0/3.1/3.5
Flock 1.0/1.1/1.2.6/2.0/2.5
K-Meleon 1.1.4/1.5.0
Minefield 3.2/3.6
MSIE 6.0/7.0/8.0
Navigator 8.1/9.0
Opera 9.50/9.51/9.52/9.60/9.61/9.62/9.63/9.64/10.0
Safari 3.0/3.2/4.0
SeaMonkey 1.1/2.0
Opera 7.0/7.11/7.54/8.0/8.53/8.54/9.25/9.26/9.27 - есть пара багов
Firefox 0.8/0.9/1.0.8 - нет canvas
Linux
Epiphany 2.22
Firefox 1.5.0.13/2.0.0.19/3.0/3.1/3.5
Flock 1.2.6/2.0/2.5
Galeon 2.0.4
Iceape 1.0.9/1.1.13
Iceweasel 2.0/3.0.4
Kazehakase 0.5.2
Konqueror 3.5 - нет canvas
Konqueror 4.2
Minefield 3.2/3.6
Opera 10.0/9.63/9.64
SeaMonkey 1.1.12/2.0
Shiretoko 3.1/3.5

Для правильной работы скрипта в opera 9.27 и ниже нужно дописывать DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


В таблице стилей изменен шрифт переменных, теперь начертание формул чем то напоминает TeXовскую верстку.
В некоторых браузерах наблюдается проблема при печати. Единственный браузер, который корректно выводит на печать формулы в которых есть рисованные элементы, как ({[]}) корень - это Firefox. Opera не печатает содержимое тега canvas

xpress 14.01.2011 14:37

Rimch,
А для обычного пользователя который например на сайте вводит какие то темы есть WYSIWYG с этим вашим скриптиком?
Буду благодарен если поделитесь. Заранее спасибо!


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