jsMath (Authors/2.x)

Changing or Removing the Font Warnings

When someone reads one of your pages that contains mathematics, jsMath looks to see if they have the TeX fonts installed, and if not, issues a warning message pointing them to the jsMath web site where the fonts can be downloaded. The jsMath experience is much better when these are installed than without them, so it is important to let the user know about that and to provide information about how to get the fonts.

The message can be distracting, however, so jsMath does several things to make the message less so. First, it includes a "hide message" button so that the user can remove the message from the page once he has read it. (The message is initially part of the page rather than issued using an alert box, since alerts require user interaction and are even more annoying.) Second, jsMath will only show the message the first time a page at your site tries to use jsMath. On subsequent pages (or reloading the current page), the message will not be repeated. This stays in effect for the browser session, unless the user explicitly saves the settings for a longer time, so the message will be reissued the next time the user restarts his browser.

As a page author, you can also prevent the message from showing up. While you may think you are helping your readers out by not displaying this message, be aware that without the TeX fonts, your readers will use the image fallback display method, and that is slower for them, will require them to do more work to get a good printed copy, will prevent you from using the \color extension to highlight text within your mathematics, and will prevent hyperlinks within your mathematics from being colored like standard links, making it far les apparent that they are links. The best way for your readers to avoid the font warning message is to download the TeX fonts, not to have you remove the message.

Removing the Font Warning Message

That being said, there are times when you may wish not to show the warning message (for example, in cases where there is very little mathematics on the page, and it really doesn't matter of it is shown via images or not). In this case, there are several ways to avoid the font warning message.

The easiest is to set a CSS style that causes the message not to be displayed even when it is created by jsMath. The code

    <STYLE> .jsM_Warning {display: none} </STYLE>

will work if you include it in your web page before loading the jsMath.js file.

Another approach is to override the method that creates the message by including

    <SCRIPT> jsMath = {Font: {Message: function () {}}} </SCRIPT>

sometime before you load jsMath.js. This will prevent the message from ever being inserted in the first place.

Alternatively, you could let the message be created, but then turn it off by including

    <SCRIPT> jsMath.Font.HideMessage() </SCRIPT>

sometime after you load jsMath.js. (This acts just like clicking the "hide message" button.) It is OK to call this even if the message is not displayed, as the function checks for that. Unfortunately, the message will flash on for a moment before it is hidden in some browsers if you use this method.

Changing the Font Warning Message

You can change the wording of the missing-font warning message as follows. Put the line

    <SCRIPT> jsMath = {Font: {message: 'your-message-here'}} </SCRIPT>

somewhere before loading jsMath.js. The message can contain HTML code, for example links to the jsMath font download page, or some other site where you have given instructions for how to get the fonts.

The style used to render the warning box is controlled by the .jsM_noFont CSS style. You can set this to change the way the message appears. The default setting is equivalent to:

    <STYLE>
      .jsM_noFont  {
         text-align: center; padding: 10px 20px; border: 3px solid #DD0000;
         background-color: #FFF8F8; color: #AA0000; font-size:small; width:auto;
      }
    </STYLE>

You can also control the style of the "buttons" within the message area, which are not rendered as actual button elements (since the rendering of those is not able to be controlled by CSS in some browsers). This uses the .jsM_noFontLink style, whose default is:

    <STYLE>
      .jsM_fontLink {
        padding: 0px 5px 2px 5px; text-decoration:none; color:black;
        border: 2px outset; background-color:#E8E8E8; font-size:80%; width:auto;
      }
    </STYLE>

You can set these styles by using a command of the form

    <SCRIPT>
      jsMath = {styles: {
        '.jsM_noFont':   'style-settings',
        '.jsM_fontLink': 'style-settings'
      }};
    </SCRIPT>

sometime before loading jsMath.js, or by issuing the appropriate <STYLE> commands sometime after loading jsMath.js. Note that jsMath may override your style commands if you set the style before loading jsMath by using <STYLE>.

Putting the Font Warning at Another Location

By default, the font warning comes at the top of the page. If you want to put the message somewhere else, you can do that in several ways as well.

First, you could override the jsMath function that inserts the message and have it do something else. Note, however, that this function will be run when jsMath.js is loaded (usually the top of the page), so you might want it simply to save the message and later on insert that saved message into the page at another location. For example, use

    <SCRIPT>
      var myFontMessage = "";
      jsMath = {Font: {Message: function (message) {myFontMessage = message}}}
    </SCRIPT>

before jsMath.js is loaded, and then

    <SCRIPT>
      if (myFontMessage != "") {
        document.write('<DIV CLASS="jsM_noFont">'+myFontMessage+'</DIV>');
      }
    <SCRIPT>

at the location where you want the message to appear. You can, of course, use some other text in place of myFontMessage, but note that if you have used alternative fonts (like the ones available on the extra-fonts download page), jsMath.Font.Message can be called to produce font warnings about those specific fonts, rather than the standard TeX fonts in general.

The method above only saves the message string itself, not the buttons that go with it, so if you want to move the complete message box to another area, you might want to try another approach. That would be to let jsMath produce the message, but hide it (using the .jsM_Warning style as described above). Then at the place where you want the message, use:

    <SCRIPT>
      var message = jsMath.Element("Warning");
      if (message) {document.write('<DIV>'+message.innerHTML+'</DIV>')}
    </SCRIPT>

This will copy the contents of the (hidden) message to the new location, if it exists. If the message was not issued, nothing will be inserted.

Finally, jsMath sets the variable jsMath.nofontMessage to a non-zero value when the warning message would be displayed, so you can use the CSS style to disable the warning message, and then insert your own message somewhere else when this value is set. For example, at the place where the message should go, use:

    <SCRIPT>
      if (jsMath.nofontMessage) {
        document.write('your-message-here');
      }
    </SCRIPT>

jsMath web pages Created: 10 Jul 2005 Last modified: 02 Dec 2005 13:02:15 Comments to: dpvc@union.edu

Changing Font Sizes or Other Attributes Information for jsMath v2.x Authors The autoload plugin