Posts Tagged ‘JavaScript’

Pretty equations in HTML

Thursday, November 27th, 2008

You may have seen the nice looking equations in my last post. As part of the process of writing that post I researched MathML as a way of embedding the equations in the post. it turned out to be a complex markup language which renders very nicely but has a few big drawbacks. The first is that only Firefox supports MathML in its core so far. There is a plugin for Internet Explorer which supports it but I doubt it’s widely installed. The second problem is that you can’t just put MathML in your web page and have Firefox interpret it. It turns out you need a bit of Javascript to make it pick up and render the MathML. This is great and makes equations render very well in Firefox but writing the MathML is a pain.

Enter ASCIIMathML, a JavaScript library which converts a simple ASCII format to MathML for rendering in MathML compliant browsers. The syntax is pretty much what you would expect with a few tricks up its sleeve. A simple equation, such as `y=x^2` is written as y=x^2. A more complicated example from my last post such as:
`arc=2*cos^-1(1-r_2^2/(2*r_1^2))*r_1`
is written as:

arc=2*cos^-1(1-r_2^2/(2*r_1^2))*r_1

Another example with a square root:
`y=(+-r_2*sqrt(4*r_1^2-r_2^2))/(2*r_1)`

y=(+-r_2*sqrt(4*r_1^2-r_2^2))/(2*r_1)

Now, those if you viewing these posts in a non-Firefox browser are probably wondering why you are also seeing pretty equations here. The short answer is that you’re seeing images imstead of MathML rendered by your browser. The long answer involves a four part toolchain. The first piece is ASCIIMathML, slightly altered to insert an image tag instead of MathML. The images are generated by a PHP script which first runs the ASCII through ASCHIIMathPHP, a version of ASCIIMathML.js to PHP. The resulting MathML has the times symbol replace by one which the later tools understand (replace ⋅ with ·). The resulting MathML is then passed to svgmath, a python script which converts MathML to SVG. SVG would be great but Internet Explorer still doesn’t support it without a plugin. Because of this the SVG is then passed through inkscape via command-line to render out a png which is what you see in your browser.
Here’s some sample PHP to run these commands:

$ascii = 'y=(+-r_2*sqrt(4*r_1^2-r_2^2))/(2*r_1)';
 
$pngFile = md5($ascii).'.png';
if (!file_exists($pngFile)) {
    require 'ASCIIMathPHP-2.0.cfg.php';
    require 'ASCIIMathPHP-2.0.class.php';
 
    $ascii_math = new ASCIIMathPHP($symbol_arr);
    $ascii_math->setExpr($ascii);
    $ascii_math->genMathML();
 
    $mathml = $ascii_math->getMathML();
 
    $mathml = str_replace('⋅', '·', $mathml);
 
    $mathmlFile = tempnam(sys_get_temp_dir(), 'mathml');
    $td = fopen($mathmlFile, 'w');
    fwrite($td, $mathml);
 
    $svgFile = tempnam(sys_get_temp_dir(), 'svg');
    system("/usr/bin/env python math2svg.py -s $mathmlFile > $svgFile");
 
    system("inkscape -f $svgFile -e $pngFile");
 }
 
header('Content-Type: image/png');
die(file_get_contents($pngFile));

All of this is also wrapped up in a Wordpress plugin which includes the JS file in the header. Unfortunately, I don’t have an easy way to package this up as it requires python and inkscape but if you would like to get more info just let me know and I’ll send you more information.

Tags: , , , , ,
Posted in JavaScript, math | 2 Comments »

Running JavaScript when the page finishes loading

Friday, May 23rd, 2008

I know what you’re thinking. window.onload and <body onload> already let you run javascript when the page loads. Why do I need something more? The answer is that the standard onload only runs when the entire page and its dependencies are finished loading. This means that if you have multiple images (such as tracking tags) or scripts or a large swf, the onloaded code will only run once all of those pieces load. The point of the following is to run some JavaScript once the page itself has loaded and been parsed. This allows you to do things like set the background color, add additional elements, or start loading other dependencies while the rest of the page’s depdencies are loading. This is particularly useful if you need to do something on a page while a large swf is loading.

The following is a combination of several posts on Dean Edwards’ blog as well as an onload handler for those browsers that don’t support this kind of solution that I found elsewhere. This may not work in Opera, I am not sure. According to the second post Opera supports DOMContentLoaded but I don’t know if this code will catch Opera properly.

function init() {
  // quit if this function has already been called
  if (arguments.callee.done) return;
  // flag this function so we don't do the same thing twice
  arguments.callee.done = true;
 
  //CODE TO RUN GOES HERE
}
 
// for Mozilla browsers
if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init, false);
} else
// for Safari
if (/WebKit/i.test(navigator.userAgent)) { // sniff
  var _timer = setInterval(function() {
    if (/loaded|complete/.test(document.readyState)) {
      clearInterval(_timer);
      init(); // call the onload handler
    }
  }, 10);
} else
//for those other poor souls
{
  function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
      window.onload = func;
    } else {
      window.onload = function() {
        oldonload();
        func();
      }
    }
  }
  addLoadEvent(init);
}
// for Internet Explorer (using conditional comments)
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id='__ie_onload' src='javascript:void(0)'></script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
  if (this.readyState == "complete") {
    init(); // call the onload handler
  }
};
/*@end @*/

UPDATE: fixed the code above. Wordpress was screwing up the last bit due to its insistence on changing the preformatted HTML in the code.

Tags: ,
Posted in JavaScript | No Comments »