topical media & game development

talk show tell print

sample-js-mathml.htm / htm



  <html><head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  
  <title>ASCIIMathML.js demo</title>
  <script type="text/javascript" src="sample-js-mathml.js"></script>
  <script type="text/javascript">
  translateOnLoad=false;
  function display() {
    var str = document.getElementById("inputText").value;
    var outnode = document.getElementById("outputNode");
    var n = outnode.childNodes.length;
    for (var i=0; i<n; i++)
      outnode.removeChild(outnode.firstChild);
    outnode.appendChild(document.createTextNode(str));
    AMprocessNode(outnode);
  }
  </script>
  <style type="text/css">
  #menu, #title, #subtitle, #author {text-align: center}
  body {font-family: Arial; background-color:beige;}
  </style>
  </head><body onload="display()">
  
  <div id="menu">
  | <a href="http://www1.chapman.edu/%7Ejipsen/mathml/asciimath.html">Home Page</a> |
  <a href="http://www1.chapman.edu/%7Ejipsen/mathml/asciimathsyntax.html">Syntax</a> |
  <a href="http://www1.chapman.edu/%7Ejipsen/mathml/asciimathdemo.html">Try it</a> |
  <a href="http://www1.chapman.edu/%7Ejipsen/mathml/asciimathcalculator.html">Calculator</a> |
  <a href="http://www1.chapman.edu/%7Ejipsen/mathml/asciimatheditor/">Editor</a> |
  <a href="http://mathcs.chapman.edu/%7Ejipsen/mathml/asciimathdownload.html">Download</a> |
  <a href="http://mathcs.chapman.edu/%7Ejipsen/math/index.php/ASCIIMathML/ASCIIMathGraphs.html">Graphs</a> |
  <a href="http://mathcs.chapman.edu/%7Ejipsen/math/index.php/ASCIIMathML/ASCIIMathFAQ.html">ASCIIMath FAQ</a> |
  <a href="http://mathcs.chapman.edu/%7Ejipsen/math/index.php/ASCIIMathML/ASCIIMathMLSandbox.html">Sandbox</a> |
  <a href="http://groups.google.com/group/asciimath">Comments</a> |
  </div>
  
  
<h2 id="title"> ASCIIMathML.js: Try it yourself (HTML version) </h2> <center> <b> This page requires Internet Explorer 6+<a href="http://www.dessci.com/en/products/mathplayer">MathPlayer</a> or Mozilla/Firefox/Netscape 7+. </b> <p> Edit the formulas below (the display updates dynamically). If you know (La)TeX formula syntax, you can try some of that as well (LaTeX formulas work best when enclosed in -signs). The "amath" token switches on the new auto-math-recognize mode.</p> <form> <textarea id="inputText" rows="10" cols="80" onkeyup="display()">amath Let's try some interesting formulas: E=m c^2 and e^(i pi)=-1 and AA x in CC (sin^2x+cos^2x=1) and one more: sum_(i=1)^n i^3=((n(n+1))/2)^2 (add your own -- note that text-tokens are only recognized if separated by spaces) </textarea> </form> <p> </p><div id="outputNode"> <!-- Let's try some interesting formulas: <span style="font-size: 1em; font-family: serif;"><math title="E=m c^2"><mstyle displaystyle="true" fontfamily="serif" mathcolor="blue"><mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup></mstyle></math></span> and <span style="font-size: 1em; font-family: serif;"><math title="e^(i pi)=-1"><mstyle displaystyle="true" fontfamily="serif" mathcolor="blue"><msup><mi>e</mi><mrow><mi>i</mi><mi>&#960;</mi></mrow></msup><mo>=</mo><mo>-</mo><mn>1</mn></mstyle></math></span> and <span style="font-size: 1em; font-family: serif;"><math title="AA x in CC (sin^2x+cos^2x=1"><mstyle displaystyle="true" fontfamily="serif" mathcolor="blue"><mo>&#8704;</mo><mi>x</mi><mo>&#8712;</mo><mo>&#8450;</mo><mrow><mo>(</mo><msup><mo>sin</mo><mn>2</mn></msup><mi>x</mi><mo>+</mo><msup><mo>cos</mo><mn>2</mn></msup><mi>x</mi><mo>=</mo><mn>1</mn></mrow></mstyle></math></span>) and one more: <span style="font-size: 1em; font-family: serif;"><math title="sum_(i=1)^n i^3=((n(n+1))/2)^2 "><mstyle displaystyle="true" fontfamily="serif" mathcolor="blue"><mrow><munderover><mo>&#8721;</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover></mrow><msup><mi>i</mi><mn>3</mn></msup><mo>=</mo><msup><mrow><mo>(</mo><mfrac><mrow><mi>n</mi><mrow><mo>(</mo><mi>n</mi><mo>+</mo><mn>1</mn><mo>)</mo></mrow></mrow><mn>2</mn></mfrac><mo>)</mo></mrow><mn>2</mn></msup></mstyle></math></span> (add your own <span style="font-size: 1em; font-family: serif;"><math title="--"><mstyle displaystyle="true" fontfamily="serif" mathcolor="blue"><mo>-</mo><mo>-</mo></mstyle></math></span> note that text-tokens are only recognized if separated by spaces) --> </div> <p></p>
<p> <b>Note that this is dynamic XHTML running locally on your machine!</b> <br> Right-click on an output formula to copy or view the MathML code. </p> </center> (Copy and paste the following lines to see what symbols they produce)<br> <b>You can use the following ASCIIMathML constructs:</b> <tt> `(x+1)/(x-1) x^(i+j) x_(ij) sqrt(x) root(n)(x) stackrel(+)(-&gt;) text(any) "any"`</tt><br> <b>Operation symbols</b> <tt> `+ - * ** // \\ xx -: @ o+ ox sum prod ^^ ^^^ vv vvv nn nnn uu uuu`</tt><br> <b>Relation symbols</b> <tt> `= != &lt; &lt;= &gt; &gt;= -&lt; &gt;- in !in sub sup sube supe -= ~= ~~ prop`</tt><br> <b>Logical symbols</b><tt> `\and \or \not =&gt; if iff AA EE _|_ TT |-- |==`</tt><br> <b>Miscellaneous symbols</b> <tt> `int oint del grad +- O/ oo aleph ... cdots \ quad qquad diamond square |__ __| |~ ~| CC NN QQ RR ZZ`</tt><br> <b>Standard functions</b> <tt> `sin cos tan csc sec cot sinh cosh tanh log ln det dim lim mod gcd lcm`</tt><br> <b>Grouping brackets</b><tt> `( ) [ ] { } (: :) {: :}` </tt> <b>Arrows</b><tt> `uarr darr rarr -&gt; larr harr rArr lArr hArr` </tt><br> <b>Accents</b><tt> `hatx barx ulx vecx dotx ddotx` </tt> <b>Font commands</b><tt> `bbA bbbA ccA ttA frA sfA` </tt> <b>Matrices</b><tt> `[[a,b],[c,d]] ((1,0),(0,1))` </tt><br> <b>Greek letters</b><tt> `alpha beta chi delta Delta epsi eta gamma Gamma iota kappa lambda Lambda mu nu omega Omega phi Phi pi Pi psi rho sigma Sigma tau theta Theta upsilon xi Xi zeta`</tt> <p> This demo page shows that ASCIIMathML.js can be used easily to dynamically preview mathematical formulas (client-side). E.g. here is a (beta) webpage that can be used to <b><a href="http://math.chapman.edu/email/">write and read mathematical emails and discussion group articles</a></b>. Since most email communication is still done with ASCII text (or at least not yet with XHTML), this is a reasonable (and inexpensive) solution for communicating with students in online math courses. </p>
<div id="author"> <a href="http://www.chapman.edu/%7Ejipsen/">Peter Jipsen</a>, <a href="http://www.chapman.edu/">Chapman University</a>, September 2007 </div> </body></html>


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.