[HOME] jsMath (Authors/2.x) [Top][Up][Next]

jsMath Basics

Using jsMath to present mathematics in your own web pages is not hard. You need to do three things:

  1. Load the jsMath.js JavaScript file.
  2. Enter your mathematics using TeX commands surrounded by an appropriate <SPAN> or <DIV> (see below).
  3. Make a call to jsMath.Process() or jsMath.ProcessBeforeShowing() at the bottom of your web page.

These steps are explained more fully bellow.


Load the jsMath.js file

You should include commands something like 
    <SCRIPT SRC="path-to-jsMath/jsMath.js"></SCRIPT>

    <NOSCRIPT>
    <DIV STYLE="color:#CC0000; text-align:center">
      <B>Warning: <A HREF="http://www.math.union.edu/locate/jsMath">jsMath</A>
      requires JavaScript to process the mathematics on this page.<BR>
      If your browser supports JavaScript, be sure it is enabled.</B>
    </DIV>
    <HR>
    </NOSCRIPT>

at the top of your HTML file. It should be within the body of your document, not the header, as jsMath may insert a warning message for the user when the TeX fonts are not available, and the loading of the fallback methods also may cause text to be written to the document body. (See the documentation on loading jsMath in the document HEAD if you can't load jsMath in the <BODY>). These commands should follow any <STYLE> commands that affect jsMath (see the information on customizing jsMath for details).

The path-to-jsMath should point to the location where you have placed the jsMath package. You can make jsMath be available site-wide by putting it in a place that is easy for many web pages to access (say http://your-host/jsMath/jsMath.js), or you could make jsMath be local to your particular web page by putting it in the same directory as your .html file (in which case jsMath/jsMath.js would be sufficient to locate the jsMath code).

You should not load jsMath from a server in a different domain from the one that servers the page that is using jsMath. If you do, jsMath may not be able to load some of its optional components (like the fallback code or the control panel code). This is a restriction placed on jsMath by the JavaScript security model, and is not something that jsMath will be able to overcome. You can, however, load jsMath from another server in the same domain as your main page. For example, if the main page is coming from www.math.union.edu and jsMath is taken from union.edu, then jsMath will still be able to access its optional components. To do this, it sets that document.domain for the main page to be the largest common domain between the two addresses.

The <NOSCRIPT> section, while not strictly necessary, is highly recommended, as it will point out to your readers who do not have JavaScript enabled (or don't have a JavaScript-capable browser) that they need to enable JavaScript in order to view the mathematics on your web page.


Enter your mathematics in TeX form

Within your HTML page, you enter mathematics using standard TeX commands (only the mathematical commands are included; the other formatting within your document should be handled using standard HTML). You enter in-lined mathematics by surrounding it with <SPAN CLASS="math"> and </SPAN>. For example: 
    If <SPAN CLASS="math"> f(x) = x+2 </SPAN> then <SPAN CLASS="math"> f(4) = 6 </SPAN>.

To make a displayed equation, you use <DIV CLASS="math"> and </DIV>, as in 

    <DIV CLASS="math"> \sum_{i=1}^{n} i = {n(n+1)\over 2} </DIV>

See the examples pages for more samples of how to enter mathematics. (Use your browsers "view source" function.)

It is possible to use dollar signs or \(...\) and \[...\] to indicate mathematics, just as in real TeX files; see the documentation for the tex2math plugin for more information.


Call jsMath to process the mathematics

Once you have included mathematics in your web page, you must tell jsMath to process that mathematics when the page is loaded. To do this, you add one of the following commands at the bottom of your HTML file: 
    <SCRIPT> jsMath.Process() </SCRIPT>
or 
    <SCRIPT> jsMath.ProcessBeforeShowing() </SCRIPT>
The first will cause jsMath to process the mathematics in such a way that the user can read the page as the mathematics is being processed. This is best when you have a lot of mathematics on the page, as jsMath is not particularly fast, and it could take a long time to handle all the mathematics.

The second will prevent the page from being displayed until all the mathematics has been processed. One reason to use this is when the "flickering" involved in processing the mathematics would be a distraction, but it will take longer for the page to show up, and if there is a lot of mathematics, your reader my decide it is not worth waiting for your page to show up.

The examples files use jsMath.Process() command (see in particular Struick's lectures), while the symbol tables mostly use jsMath.ProcessBeforeShowing(), so you can use these to see the difference.

You may put these calls in the onLoad handler for the document, but note that it really only makes sense to use jsMath.Process() this way, as the page may be displayed before the handler runs by some browsers, so jsMath.ProcessBeforeShowing() would not actually run until after the page was already displayed. On the other hand, using jsMath.ProcessBeforeShowing() in this way would still make all the mathematics be converted at once rather than each element showing up individually (which would reduce the distracting flicker of mathematics as it is being processed), and would allow the user to start reading the page without having to wait for all the math to be converted. In this case, you might wish to use 

    setTimeout('jsMath.ProcessBeforeShowing()',10);
to be sure that the page has had a chance to be displayed by all browsers before the mathematics is processed.


Get jsMath at SourceForge.net. Fast, secure and Free Open Source software downloads [HOME] jsMath web pages
Created: 10 Jul 2005
Last modified: 02 Dec 2005 12:57:51
Comments to: dpvc@union.edu
[Next] The tex2math plugin
[Up] Information for jsMath v2.x Authors