jsMath Quick-Start Guide

Overview:

The jsMath package provides a method of including mathematics in wiki pages and various other tools within SmartSite. It overcomes a number of the shortcomings of the traditional method of using images to represent mathematics; jsMath uses native fonts, so they resize when you change the size of the text in your browser, they print at the full resolution of your printer, and you don't have to wait for dozens of images to be downloaded in order to see the mathematics in a Web page. There are also advantages for Web page authors: there is no need to pre-process your Web pages to generate any images, and since the mathematics is entered in TeX (pronounced tech) form, it is easy to create and maintain your Web page or wiki content.

Getting Started:

A NOTE ABOUT FONTS

Although it works best with the TeX fonts installed, jsMath will fall back on a collection of image-based fonts (which can still be scaled or printed at high resolution) or Unicode fonts when the TeX fonts are not available. There is a control panel connected to a small floating button that lets the user select which fallback method to use or change some other settings like a scaling factor to use for the mathematics compared to the other text on the page.

While you will be able to view the math just fine, installing the TeX fonts will both improve font-rendering speed, as well as improve the quality of printed content. Free TeX fonts, as well as detailed installation instructions for various platforms, can be viewed at this location:

Click Here

AVAILABILITY AND PREFERENCES

In SmartSite, jsMath is available primarily in the Wiki tool, but can also be used in any other tool in SmartSite that uses the FCK editor (the WYSIWYW formatted text editing window). You can also create HTML pages to be placed in the Resources tool that contain jsMath. These HTML pages can be viewed directly within SmartSite or can be linked or attached to various other tools within SmartSite.

Typically, in documents and text areas where jsMath is available, you will notice a jsMath icon in the lower-right portion of the page—this is the jsMath control panel. Through the control panel, you can adjust various aspects of jsMath as well as hide the jsMath icon if you wish. Hiding the icon will stay in effect until your browser's cookies are cleared. You can go back to the control panel by using alt-click (Windows) or Apple-click (Mac) over a rendered equation. The icon and control panel look similar to this:

Control Panel

For the purposes of SmartSite, you can safely disregard the Go Global option in the jsMath control panel.

ADDING MATH TO THE WIKI TOOL

To add equations or math to the Wiki tool in SmartSite, you will use the Wiki's math macro (shortcut). The syntax for the macro looks like this:

{math}
  <your TeX math markup goes here>
{math}

The above will place the math as being left justified. If you would prefer to have it displayed in the center of the page, use this syntax:

{math:display}
  <your TeX math markup goes here>
{math}

An example of this using the standard quadratic equation would be:

{math:display}
  \Large \text{For }\: ax^2 + bx + c = 0
  \text{, the value of }\:x\; \text{is given by:}
  \qquad x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
{math}
ADDING MATH TO OTHER SMARTSITE TOOLS

To add equations or math to other areas of SmartSite, you will need to apply some HTML markup. The beginning of each document, text area, or Web page, should begin with this style and script definitions:

<STYLE TYPE="text/css">
   .math     {visibility: hidden}
</STYLE>
<SCRIPT>
   jsMath = {Controls: {cookie: {scale: 133}}}
</SCRIPT>
<SCRIPT SRC="/library/jsMath/jsMath.js"></SCRIPT>

Next, although it is optional, it is recommended to include a small piece of markup that will notify viewers if they do not have JavaScript installed or enabled:

<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>

Now, any math that you want to place on the page needs to be placed within DIV tags that look like this:

<DIV CLASS="math">
  TeX Markup Goes Here
</DIV>

An example of this—using the quadratic equation again—would look like this:

<DIV CLASS="math">
  \Large \text{For }\: ax^2 + bx + c = 0
  \text{, the value of }\: x\; \text{is given by:}
  \qquad x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
</DIV>

The markup should end with this processing script, which will cause the entire math that you have included to be rendered:

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

Finally, putting it altogether in one place yields this:

<STYLE TYPE="text/css">
   .math     {visibility: hidden}
</STYLE>
<SCRIPT>
   jsMath = {Controls: {cookie: {scale: 133}}}
</SCRIPT>
<SCRIPT SRC="/library/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>

<DIV CLASS="math">
  \Large \text{For }\: ax^2 + bx + c = 0
  \text{, the value of }\: x\; \text{is given by:}
  \qquad x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
</DIV>

<SCRIPT>
  jsMath.Process(document);
</SCRIPT>
FURTHER INFORMATION

An excellent resource that provides a basic TeX math tutorial and syntax reference can be found at the following Web location:

http://www.forkosh.com/mimetextutorial.html

More information about the jsMath project can be found at the Union College Department of Mathematics:

http://www.math.union.edu/~dpvc/jsMath/welcome.html