Математические формулы в HTML
Уважаемые участники форума, на днях начал писать скрипт для верстки математических формул как в ТеХ.
На данный момент реализовано 2 вида формул, строчные и блочные:
Скрипт умеет:
пример работы скрипта <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 надо ставить плагин. |
Круто!
На корень похож символ √, а верхнюю полосу уже можно дописать;) Думаю, скобки можно выводить и обычные, но с бОльшим кеглем... Поиграть шрифтами, чтоб не такие круглые были. |
АБАЛДЕТЬ!
Rimch, вы молодец, и мне радостно, что хоть кто-то интересными серьезными вещами занимается по поводу скобки мне кажется не удастся добится чтобы она была высокая и узкая относительно поэтому советую для скобок, по высоте как два, и более обычных символа, держать соответсвующую картинку, и растягивать ее по высоте по поводу же корня идея примерно такая: не использовать символ(будет трудно черту верхнюю склеить с концом радикала) я бы обернул подкореное выражение в таблицу 2х2 как-то так ------------------------------------- | /--| ------------------------- | ------------------------------------- | / | | |_ / | подкореное выражение| | \/ | | -------------------------------------- вот небольшой багрепорт по поводу верстки вашей(скриншотом) |
Gvozd, спасибо за небольшой багрепорт у меня огнилис 3.0.10, в более ранних версиях я не проверял. Сами понимаете кросбраузерность дело мудренное. Будем думать.
Насчет радикалов я так подумал, можно попробовать через canvas. Но это HTML 5. Должно получиться прикольно. Вопрос, кто знает, как в ранних версиях огнилиса и хрома единица измерения em и ex определяется (в этом кроится косяк с дробями)? |
Цитата:
|
Так как скопировать и нормально вставить выделенный текст всё равно не получается, то, как предложил Kolyaj, лучше использовать VML и SVG. Создаете набор необходимых символов в векторном виде, как, например, в Cufón или typeface.js, и отрисовываете их с нужным увеличением средствами SVG или Canvas и VML в IE.
|
Спасибо за совет так и сделал. Посмотрите что получилось
http://sspa.bashtel.ru/Math/ |
хм... а где корень?! да и скобки вроде стандартные...
|
Во! Появилось!
Похоже кэш подвёл... |
в опере(9.27) левая часть корня не сходится с верхней
есть небольшой зазор в пару пикселей |
Вместо <nobr>…</nobr> лучше использовать:
<span style="white-space: nowrap;">…</span> |
У меня в таблице стилей для span, td, th уже стоит свойство "white-space: nowrap;" , тег nobr добавлен из-за небольших косяков в опере.
|
Где-то видел уже готовое решение на Сях, в src рисунка передается тех-формула, серверный скрипт рендерит и выдает. Вроде бы называется mimetex
|
Chrome 2.0.172.30
Форум не хочет рисунок добавлять. Говорит, что я что-то превысил. В общем, там немного поехало. |
:help: Уважаемые участники форума, кто может кинуть ссылки по особенностям реализации единиц em и ex в различных браузерах (Chrome 2.xx, Firefox 2.xx)
Цитата:
Цитата:
Не охота было писать для каждого браузера отбельную функцию, но видима придется :blink: Даже не для браузера, а для версии. |
Уважаемые участники форума, попытался исправить баги указанные 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 действует для самого объекта. |
Вложений: 1
Во втором примере малость съехало:
|
Уважаемые участники форума, прошу указывать название браузеров в которых есть баги.
|
Привет,
Я тоже подобный конвертор когда-то писал, он уже несколько лет на форуме работает на http://forum.algolist.ru Подсветка [math]..[/math]. Фактически, он просто прогоняет формулу через ТеХ и выводит рисунок. |
Цитата:
|
Цитата:
|
Riim, скриншот в студию. В слепую править баги не могу
Gvozd, у меня в опере все нормально, можно версию узнать |
Цитата:
|
Цитата:
|
Riim, а сейчас как?
|
Riim и Rimch, а вы не братья?:D
Чёт йа вас в постах путаю постоянно :) |
Цитата:
|
Вложений: 6
только я ж скриншоты не все сразу сделал, а с паузами (может там чего менялось в это время). Названия браузеров в имени файла
p.s. автору респект и уважуха за скрипт :thanks: |
:wacko: ыыыы это сафари.....:
а опера глючит со своим nowrap :wacko: Кто нить знает как с ёперой (9.2x-9.3x) бороться, чтобы она построчно текст не переносила в ячейках таблицы? В качестве орудия можно использовать только css. Долго бился над исправлением ОПЕРНОГО БАГА, но не к чему так и не пришел. Понятия не имею как исправить этот баг. Пока так и будет с зазором корни отображаться. |
когда я прогнал ту формулу через http://infohound.net/tidy/ она отобразилась нормально
|
Попробуй вместо пробелов, которые есть у тебя в ячейках, ставить .
имхо: а лучше вапсче без таблиц... |
x-yuri, огромное вам спасибо. Я и забыл про доктайпы. Указал доктайп
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> и усё заработала....:p JavaScripёры протестите пожалуйста на баги еще раз, кто его знает вдруг остались или появились. Насчёт вертикального выравнивания баг известен, думаю придётся пока каждый раз указывать ручками на сколько необходимо поднять или спустить дробь. Скрип есть который определяет смещение но он долгий, грузит браузер. Как придумаю оптимальный обход дробей внедрю. |
Совсем все плохо стало (Chrome 2.0.172.31):
|
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 |
:dance: Найдено новое применение скрипта. Скрипт работает в мобильном телефоне Опера мини =>
При помощи скрипта можно верстать шпоры :rolleyes: по Математическому анализу, дифференциальным уравнения, геометрии, алгебре, функциональному анализу и т.д. и т.п. |
Rimch,
не выдумывай лишнее, ты хорошо начал, но теперь совсем все плохо стало: см. рисунок , хотя бы верни как было. |
Riim, все вернул на свои места.
Я правки делаю прямо на серваке, поэтому иногда выскакивают такие баги. В следующий раз буду по аккуратнее. :p , чтобы таких абр кадабр кроме меня никто не видил. |
Цитата:
Chrome можно скачать здесь: http://www.google.com/chrome/index.h...tm_campaign=ru Rimch, ты зря спешишь, тебя никто не торопит. |
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 |
Rimch,
А для обычного пользователя который например на сайте вводит какие то темы есть WYSIWYG с этим вашим скриптиком? Буду благодарен если поделитесь. Заранее спасибо! |
Часовой пояс GMT +3, время: 04:29. |