asciimath.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title>ASCIIMathML: Math on the web for everyone</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <script type="text/javascript" src="ASCIIMathML.js"></script>
  8. <style type="text/css">
  9. #menu, #title, #subtitle, #author, .display {text-align: center}
  10. body {font-family: Arial; background-color:beige}
  11. p,table {font-family: Times}
  12. </style>
  13. </head>
  14. <body>
  15. <div id="menu">
  16. | <a href="asciimath.html">Home Page</a> |
  17. <a href="asciimathsyntax.html">Syntax</a> |
  18. <a href="asciimathdemo.html">Try it</a> |
  19. <a href="asciimathcalculator.html">Calculator</a> |
  20. <a href="http://mathcs.chapman.edu/~jipsen/mathml/asciimathdownload.html">Download</a> |
  21. <a href="http://mathcs.chapman.edu/~jipsen/math/index.php/ASCIIMathML/ASCIIMathGraphs.html">Graphs</a> |
  22. <a href="http://mathcs.chapman.edu/~jipsen/math/index.php/ASCIIMathML/ASCIIMathFAQ.html">ASCIIMath FAQ</a> |
  23. <a href="http://mathcs.chapman.edu/~jipsen/math/index.php/ASCIIMathML/ASCIIMathMLSandbox.html">Sandbox</a> |
  24. <a href="http://mathcs.chapman.edu/~jipsen/math/index.php/ASCIIMathML/ASCIIMathCommentsAndSuggestions.html">Comments</a> |
  25. </div>
  26. <hr/>
  27. <h2 id="title">
  28. ASCIIMathML.js (ver 2.0): Translating ASCII math notation to MathML
  29. and graphics</h2>
  30. <h4 align="center">
  31. Would you or your students like to <i>easily</i> produce
  32. <i>good-looking</i> math formulas on webpages<br/>
  33. using a <i>simple</i> calculator-style syntax and your
  34. own ASCII or HTML editor?
  35. <br/>
  36. Here is a free multi-platform solution (and if you prefer it,
  37. LaTeX-style formulas also work).
  38. </h4>
  39. <center>
  40. <b><font color="red">Now even easier to use:</font>
  41. <font color="green"> just add one line to your
  42. HTML file to load ASCIIMathML.js
  43. </font></b><p>
  44. ASCIIMathML.js is mentioned on the <a
  45. href="http://www.w3.org/Math/">MathML</a> page of the <a
  46. href="http://www.w3.org/">World Wide Web Consortium</a>, also on <a
  47. href="http://mathforge.net/index.jsp">mathforge.net</a> and <a
  48. href="http://mathforum.org/library/resource_types/typesetting/">The
  49. Math Forum.</a>
  50. </p>
  51. <font color="red"><b>New:</b></font> Now with <b>automatic math recognition</b>
  52. mode, better LaTeX support and graphics integration<br/>
  53. A <a href="http://mathcs.chapman.edu/~jipsen/math/index.php/ASCIIMathML/ASCIIMathMLMoodleFilter.html">Moodle filter</a> and a <a href="http://mathcs.chapman.edu/~jipsen/math/index.php/ASCIIMathML/ASCIIMathMLPmWikiCookbook.html">PmWiki cookbook</a> are also available<br/>
  54. <a href="http://www.pierce.ctc.edu/dlippman/asciimathtex/AMT.html">ASCIIMath Image Fallback Scripts</a> by David Lippman (including a Moodle filter)<br/>
  55. and a <a href="http://www.maths.nottingham.ac.uk/personal/drw/lm.html">LaTeXMathML</a> version of ASCIIMathML by <a href="http://www.maths.nottingham.ac.uk/personal/drw/">Dr Douglas R. Woodall</a>
  56. (<a href="http://www.maths.nott.ac.uk/personal/drw/lmtest.html">examples</a>)
  57. <br />
  58. <a href="http://math.chapman.edu/~jipsen/asciencepad/asciencepad.html">ASciencePad</a> is a WYSIWYG editor that integrates
  59. <a href="http://www.tiddlywiki.com/">TiddlyWiki</a>, ASCIIMathML and ASCIIsvg graphs.<br />
  60. It's free and works locally (no installation or server required).<br />
  61. Useful information about <a
  62. href="http://www.maths.ed.ac.uk/~james/ASCIIMathMLinfo.html">ASCIIMathML</a>
  63. by <a href="http://www.maths.ed.ac.uk/~james/">James Gray</a>, including
  64. a nice <a href="http://www.maths.ed.ac.uk/~james/ASCIIMathTutorial.html">tutorial</a>.<br />
  65. ASCIIMathML also works with <a href="http://www.meyerweb.com/eric/tools/s5/">S5</a> (CSS
  66. Presentation slide show; <a href="http://math.chapman.edu/~jipsen/talks/MathFest2005/JipsenMathFestSlides2005.html">S5 ASCIIMath example</a>)<br/>
  67. and in valid
  68. <a href="http://math.chapman.edu/~jipsen/mathml/asciimathandmathmlsvg.xhtml">
  69. XHTML pages with standard MathML and SVG</a> in several browsers.
  70. <br/>
  71. ASCIIMathML is being used with Movable Type, WordPress, phpBB, and many wikis.
  72. <br/>
  73. Also available: A PHP port of ASCIIMathML.js to <a
  74. href="http://www.jcphysics.com/ASCIIMath/">ASCIIMathPHP</a> by <a
  75. href="mailto:kc56@cornell.edu">Steven Chan</a>.
  76. </center>
  77. <p>
  78. This is the main page (HTML version) for the ASCIIMathML.js script which allows
  79. incorporating mathematical formulas on webpages with a minimum of
  80. fuss (just add one line to a webpage to load the script).
  81. If you like what you see, choose <b>Save As...</b> in your browser
  82. and this page should work equally well locally on your machine.
  83. </p>
  84. <p class="display">
  85. <b>
  86. This page requires Internet Explorer 6 + <a href=
  87. "http://www.dessci.com/en/products/mathplayer/welcome.asp">MathPlayer</a>
  88. or Netscape7.1/Mozilla/Firefox.
  89. </b>
  90. </p>
  91. <p>
  92. ASCIIMathML.js is freely available under the <a
  93. href="http://www.gnu.org/licenses/lgpl.html">GNU Lesser General Public
  94. License</a>. You can get your own copy from the <a href=
  95. "http://www.chapman.edu/~jipsen/mathml/asciimathdownload/">ASCIIMathML.js
  96. download page</a>. The script works with both HTML and XHTML webpages.
  97. (The homepage for an XML
  98. version is at <a href="asciimath.xml">asciimath.xml</a> but is no
  99. longer maintained).
  100. </p>
  101. <p>
  102. If you use it on a webpage, please send me an email at <a
  103. href="mailto:jipsen@chapman.edu">jipsen@chapman.edu</a> with the URL
  104. so that I can add a link to it on the <a
  105. href="http://math.chapman.edu/cgi-bin/mathxml.pl?Webpages_that_use_ASCIIMathML.js">users page</a>.
  106. (Also send me an
  107. email if you have problems or would like to provide some feedback.)
  108. I'm currently using ASCIIMathML on a Wikiserver for lecture notes and
  109. <!--a href="http://math.chapman.edu/cgi-bin/mathxml.pl?Calculus_Text_Puzzles">Text
  110. Puzzles</a>. M-->my students are also using it in Moodle
  111. for writing and reading homework in their calculus class and
  112. discrete mathematics class.
  113. <font color="red">
  114. If you just want to display MathML on HTML pages using
  115. Netscape/Mozilla/Firefox or IE+MathPlayer, have a look at <a
  116. href="http://www1.chapman.edu/~jipsen/mathml/mathhtml">mathhtmltest</a>
  117. (the page includes a 50 line JavaScript program that does the trick).
  118. </font>
  119. </p>
  120. <hr/>
  121. <p>
  122. <b>Let's test the ASCIIMathML.js translator on a simple example.</b>
  123. </p>
  124. <p>amath
  125. <b>Example:</b> Solving the quadratic equation.
  126. Suppose a x^2+b x+c=0 and a!=0. We first
  127. divide by \a to get x^2+b/a x+c/a=0.
  128. Then we complete the square and obtain x^2+b/a x+(b/(2a))^2-(b/(2a))^2+c/a=0.
  129. The first three terms factor to give (x+b/(2a))^2=(b^2)/(4a^2)-c/a.
  130. Now we take square roots on both sides and get
  131. x+b/(2a)=+-sqrt((b^2)/(4a^2)-c/a).
  132. Finally we subtract b/(2a) from both sides and simplify to get
  133. the two solutions: x_(1,2)=(-b+-sqrt(b^2 - 4a c))/(2a)
  134. </p>
  135. endamath
  136. <p>
  137. <b>Here is the text that was typed in (<font color="red">using the new
  138. auto-math-recognize mode</font> started by "a``math"):</b>
  139. </p>
  140. <pre>amath
  141. <b>Example:</b> Solving the quadratic equation.
  142. Suppose a x^2+b x+c=0 and a!=0. We first divide by \a to get x^2+b/a x+c/a=0.
  143. Then we complete the square and obtain x^2+b/a x+(b/(2a))^2-(b/(2a))^2+c/a=0.
  144. The first three terms factor to give (x+b/(2a))^2=(b^2)/(4a^2)-c/a.
  145. Now we take square roots on both sides and get x+b/(2a)=+-sqrt((b^2)/(4a^2)-c/a).
  146. Finally we move the b/(2a) to the right and simplify to get
  147. the two solutions: x_(1,2)=(-b+-sqrt(b^2-4a c))/(2a)
  148. </pre>
  149. <hr/>
  150. <center>
  151. <b>
  152. If you don't believe this, copy the text and paste it on the
  153. <a href="asciimathdemo.html">ASCIIMathML.js: Try it yourself</a> demo page.
  154. </b>
  155. </center>
  156. <hr/>
  157. <h4>
  158. Here are a few more examples:
  159. </h4>
  160. <table id="examples" border="5" cellpadding="10">
  161. <tr>
  162. <th>Type this</th>
  163. <th>See that</th>
  164. <th>Comment</th>
  165. </tr>
  166. <tr>
  167. <td>\`x^2+y_1+z_12^34\`</td>
  168. <td>`x^2+y_1+z_12^34`</td>
  169. <td>subscripts as in TeX, but numbers are treated as a unit</td>
  170. </tr>
  171. <tr>
  172. <td>\`sin^-1(x)\`</td>
  173. <td>`sin^-1(x)`</td>
  174. <td>function names are treated as constants</td>
  175. </tr>
  176. <tr>
  177. <td>\`d/dxf(x)=lim_(h->0)(f(x+h)-f(x))/h\`</td>
  178. <td>`d/dxf(x)=lim_(h->0)(f(x+h)-f(x))/h`</td>
  179. <td>complex subscripts are bracketed, displayed under lim</td>
  180. </tr>
  181. <tr>
  182. <td>\$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}\$</td>
  183. <td>$\frac{d}{dx}f(x)=\lim_{h\to 0}\frac{f(x+h)-f(x)}{h}$</td>
  184. <td>standard LaTeX notation is an alternative</td>
  185. </tr>
  186. <tr>
  187. <td>\`f(x)=sum_(n=0)^oo(f^((n))(a))/(n!)(x-a)^n\`</td>
  188. <td>`f(x)=sum_(n=0)^oo(f^((n))(a))/(n!)(x-a)^n`</td>
  189. <td>f^((n))(a) must be bracketed, else the numerator is only `a`</td>
  190. </tr>
  191. <tr>
  192. <td>\$f(x)=\sum_{n=0}^\infty\frac{f^{(n)}(a)}{n!}(x-a)^n\$</td>
  193. <td>$f(x)=\sum_{n=0}^\infty\frac{f^{(n)}(a)}{n!}(x-a)^n$</td>
  194. <td>standard LaTeX produces the same result</td>
  195. </tr>
  196. <tr>
  197. <td>\`int_0^1f(x)dx\`</td>
  198. <td>`int_0^1f(x)dx`</td>
  199. <td>subscripts must come before superscripts</td>
  200. </tr>
  201. <tr>
  202. <td>\`[[a,b],[c,d]]((n),(k))\`</td>
  203. <td>`[[a,b],[c,d]]((n),(k))`</td>
  204. <td>matrices and column vectors are simple to type</td>
  205. </tr>
  206. <tr>
  207. <td>\`x/x={(1,if x!=0),(text{undefined},if x=0):}\`</td>
  208. <td>`x/x={(1,if x!=0),(text{undefined},if x=0):}`</td>
  209. <td>piecewise defined function are based on matrix notation</td>
  210. </tr>
  211. <tr>
  212. <td>\`a//b\`</td>
  213. <td>`a//b`</td>
  214. <td>use // for inline fractions</td>
  215. </tr>
  216. <tr>
  217. <td>\`(a/b)/(c/d)\`</td>
  218. <td>`(a/b)/(c/d)`</td>
  219. <td>with brackets, multiple fraction work as expected</td>
  220. </tr>
  221. <tr>
  222. <td>\`a/b/c/d\`</td>
  223. <td>`a/b/c/d`</td>
  224. <td>without brackets the parser chooses this particular expression</td>
  225. </tr>
  226. <tr>
  227. <td>\`((a*b))/c\`</td>
  228. <td>`((a*b))/c`</td>
  229. <td>only one level of brackets is removed; * gives standard product</td>
  230. </tr>
  231. <tr>
  232. <td>\`sqrt sqrt root3x\`</td>
  233. <td>`sqrt sqrt root3x`</td>
  234. <td>spaces are optional, only serve to split strings that should not match</td>
  235. </tr>
  236. <tr>
  237. <td>\`<< a,b >> and {:(x,y),(u,v):}\`</td>
  238. <td>`<< a,b >> and {:(x,y),(u,v):}`</td>
  239. <td>angle brackets and invisible brackets</td>
  240. </tr>
  241. <tr>
  242. <td>\`(a,b]={x in RR | a < x <= b}\`</td>
  243. <td>`(a,b]={x in RR | a < x <= b}`</td>
  244. <td>grouping brackets don't have to match</td>
  245. </tr>
  246. <tr>
  247. <td>\`abc-123.45^-1.1\`</td>
  248. <td>`abc-123.45^-1.1`</td>
  249. <td>non-tokens are split into single characters,<br/>
  250. but decimal numbers are parsed with possible sign</td>
  251. </tr>
  252. <tr>
  253. <td>\`hat(ab) bar(xy) ulA vec v dotx ddot y\`</td>
  254. <td>`hat(ab) bar(xy) ulA vec v dotx ddot y`</td>
  255. <td>accents can be used on any expression (work well in IE)</td>
  256. </tr>
  257. <tr>
  258. <td>\`bb{AB3}.bbb(AB].cc(AB).fr{AB}.tt[AB].sf(AB)\`</td>
  259. <td>`bb{AB3}.bbb(AB].cc(AB).fr{AB}.tt[AB].sf(AB)`</td>
  260. <td>font commands; can use any brackets around argument</td>
  261. </tr>
  262. <tr>
  263. <td>\`stackrel"def"= or \stackrel{\Delta}{=}" "("or ":=)\`</td>
  264. <td>`stackrel"def"= or \stackrel{\Delta}{=}" "("or ":=)`</td>
  265. <td>symbols can be stacked</td>
  266. </tr>
  267. <tr>
  268. <td>\`{::}_(\ 92)^238U\`</td>
  269. <td>`{::}_(\ 92)^238U`</td>
  270. <td>prescripts simulated by subsuperscripts</td>
  271. </tr>
  272. </table>
  273. <p>
  274. If you are familiar with MathML, you can appreciate that this ASCII
  275. input form is less verbose and more readable. If you are familiar with
  276. TeX, this is still somewhat less cluttered. The aim is to have input
  277. notation that is close to graphing calculator notation, so that
  278. students are able to use it on webpages and in emails without having
  279. to learn another specialized syntax.
  280. </p>
  281. <p>
  282. For an explicit description of the input syntax see <a
  283. href="asciimathsyntax.html">ASCIIMathML.js Syntax and List of
  284. Constants</a>.
  285. </p>
  286. <p>
  287. <b>Acknowledgements:</b> Many thanks to the numerous people who have
  288. contributed to the fantastic MathML standard. Without such a
  289. well designed standard, a project like this would be impossible.<br/>
  290. Thanks to the many volunteers who implemented MathML in the
  291. Gecko layout engine for Netscape7/Mozilla/Firefox.<br/>
  292. Thanks to the people at Design Science for producing the excellent
  293. MathPlayer plugin and making it freely available.<br/>
  294. Finally, thanks to the designers and implementors of JavaScript. All
  295. these tools work together fairly seemlessly to allow us to put
  296. mathematical formulas on webpages in a convenient and inexpensive way.<br/>
  297. And thanks to Andrew White for making a logo for ASCIIMathML (see below).
  298. </p>
  299. <hr/>
  300. <div id="author">
  301. <a href="http://www.chapman.edu/~jipsen/">Peter Jipsen</a>,
  302. <a href="http://www.chapman.edu/">Chapman University</a>, September 2007
  303. <a href="http://validator.w3.org/check/referer"><img border="0"
  304. src="http://www.w3.org/Icons/valid-html401"
  305. alt="Valid HTML 4.01!" height="31" width="88"></a>
  306. </div>
  307. <p><div class="display">
  308. <a style="color:white" href="../asciimath.html">
  309. <img src="asciimathml.jpeg" alt="ASCIIMathML"></a>
  310. </div>
  311. </body>
  312. </html>