jsMath (Authors/2.x)

Adding jsMath to a BLOG or Bulletin-Board System

One of the challenges for programs that produce dynamic web content (that includes mathematics) is typesetting mathematics that is entered by users of the system. JsMath has found a home in a number of bulletin-board and blog systems because its input format is TeX code, which is compact, reasonably straight-forward, and well known in the mathematics and scientific communities, and because it produces high-quality output without the need for plugins or other downloads.

JsMath has been updated to make it even easier to incorporate it into blog and bulletin-board software (referred to in the future as BBS software). It is most convenient if you can insert text at the top an bottom of the web page generated by the BBS, but it is possible to do it if you can only modify the document's HEAD section, and even if all you can do is insert text at the location of the mathematics within the page.

The three key steps that need to be performed are: loading the jsMath.js file, inserting the SPAN and DIV tags for the mathematics, and calling the jsMath.Process() or jsMath.ProcessBeforeShowing() command.

When you can modify the BODY

If you can insert text at the top and bottom of the BODY of the document, things should be pretty easy. Insert the command

    <SCRIPT SRC="path-to-jsMath/jsMath.js"></SCRIPT>

at the top of the BODY and

    <SCRIPT> jsMath.Process() </SCRIPT>

at the bottom. Then insert <SPAN CLASS="math"> and </SPAN> around in-line mathematics, and <DIV CLASS="math"> and </DIV> around displayed equations.

When you can modify the HEAD but not the BODY

If you can not insert arbitrary text at the top and bottom of the BODY, but can insert text in the HEAD, insert

    <SCRIPT SRC="path-to-jsMath/jsMath.js"></SCRIPT>

in the HEAD. You will need to call jsMath.Setup.Body() in the body of the document, but you can call it more than once, so it is OK to have it done for each math item. So you can insert

    <SCRIPT> jsMath.Setup.Body() </SCRIPT>
    <SPAN CLASS="math">

before in-line mathematics and </SPAN> afterward, and similarly for the DIV needed for displayed equations.

The only thing left is to include the jsMath.Process() call. Some BBS programs allow you to specify an onLoad handler; if yours is one of these, add the jsMath.Process() call to that. If not, there are several options. One would be to end the mathemaics with

    </SPAN>
    <SCRIPT> window.onload=jsMath.Process </SCRIPT>

Another would be to use

    </SPAN>
    <SCRIPT> jsMath.ProcessBeforeShowing() </SCRIPT>

which would process each math element as it is inserted; but this will mean that all the mathematics will be processed before the page is displayed, and that can take a long time, especially for large pages (and even longer than usual, since jsMath will search through the entire page for call to jsMath.ProcessBeforeShowing()). Note that you can not use jsMath.Process() in this way, since it works asynchronously, and multiple calls to jsMath.Process() will interfere with each other.

If you are able to maintain a count of the number of math items processed, you could improve the performance by using

    <SCRIPT> jsMath.Setup.Body() </SCRIPT>
    <SPAN ID="math_count">
    <SPAN CLASS="math">

before the math (where count is the counter that you increment for each math item processed), and end it with

    </SPAN></SPAN>
    <SCRIPT> jsMath.ProcessBeforeShowing("math_count") </SCRIPT>

so that only that jsMath will only look at one item for each call to jsMath.ProcessBeforeShowing().

When you can only modify the text for the mathematics itself

If you can only insert text at the location of the mathematics itself, it is still possible to use jsMath. The issue here is that you don't want to load jsMath.js more than once. One way to do this would be to use

    <SCRIPT>
      if (!jsMath) {
        document.write('<SCRIPT SRC="path-to-jsMath/jsMath.js"></SCRIPT>');
      }
    </SCRIPT>
    <SPAN CLASS="math">

before the in-line mathematics and

    </SPAN>
    <SCRIPT> window.onload=jsMath.Process </SCRIPT>

(or one of the other apparoches listed in the previous section) afterward. (Similary for the DIV blocks for displayed equations.) This cases jsMath.js to be loaded and processed only once.

You can include additional commands in the if-then statement that set defaults for jsMath, load plugins, and so on, if you wish. If this gets to be a lot of code, it might be more efficient to put it all into a separate .js file that you load instead of jsMath.js (and that itself loads jsMath.js).

Loading jsMath only when it is needed

Note that the method described above will only cause jsMath.js to be loaded when it is actually needed by the page. This is not the case when jsMath is loaded in the HEAD or at the top of the BODY of the document. Since jsMath.js is a large file (on the order to 200K), it is non-trivial to download it, and you might not want to have it sent to the user for every page when many might not include mathematics. Most likely, the jsMath.js file will be cached by the browser and sent only once, but that need not be the case, so this may be a concern for your BBS. The approach given in the previous section is one solution to that problem.

Alternatively, you may be able to take advantage of the autoload plugin. See the autoload plugin page for more details on how this works.

Having jsMath detect the mathematics automatically

The mechanisms above assume that your BBS allows you to define special markup that the user will use to delimit in-line and displayed mathematics, and that you are able to specify the replacement text for these markup commands. If not, you may have to define such markup yourself and process it by hand. There is a plugin for jsMath that should make this easier: the tex2math plugin. This searches through the document for mathematics enclosed by \(...\) and \[...\] and inserts the proper SPAN or DIV tags automatically.

One way to use this would be to include

    <SCRIPT SRC="path-to-jsMath/jsMath.js"></SCRIPT>
    <SCRIPT> jsMath.Setup.Script("plugins/tex2math.js") </SCRIPT>
    <SCRIPT>
      window.onload = function () {
        jsMath.ConvertLaTeX();
        jsMath.Process();
      }
    </SCRIPT>

at the top of the BODY of the document. (You should be able to modify the other methods listed above to get a similary effect.) It is probably best to use jsMath.ConvertLaTeX() rather than jsMath.ConvertTeX(), as in this example, since the latter would look for dollar signs as math delimiters, and that is too likely to cause problems (see the tex2math plugin page for more details).

jsMath web pages Created: 02 Aug 2005 Last modified: 02 Dec 2005 12:58:38 Comments to: dpvc@union.edu

Overriding jsMath Functions with Your Own Versions Information for jsMath v2.x Authors Loading jsMath in the Document HEAD