[HOME] jsMath (Authors) [Prev][Up][Skip][Next]

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 made part of the page rather than issuing 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, so the message will be reissued the next time the user restarts his browser, unless the user explicitly saves the settings for a longer time.

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 not scale properly if they change the font size while viewing your page (unless they reload the page as well), 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 less 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.

If you are using the easy/load.js file, you can turn off font warning messages by setting the showFontWarnings value to 0. Otherwise, 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> #jsMath_Warning {display: none} </STYLE>
will work if you include it in your web page before loading jsMath.

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

    <SCRIPT> jsMath = {Font: {Message: function () {}}} </SCRIPT>
sometime before you load jsMath. 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.Synchronize("jsMath.Font.HideMessage()") </SCRIPT>
sometime after you load jsMath. (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. 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 '#jsMath_noFont .message' CSS style. You can set this to change the way the message appears. The default setting is equivalent to:

    <STYLE>
      #jsMath_noFont .message  {
         text-align: center; padding: .8em 1.6em; 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 '#jsMath_noFont .link' style, whose default is:
    <STYLE>
      #jsM_noFont .link {
        padding: 0px 5px 2px 5px; border: 2px outset; background-color:#E8E8E8;
        color:black; font-size:80%; width:auto; cursor:pointer; cursor:hand;
      }
    </STYLE>
You can set these styles by using a command of the form
    <SCRIPT>
      jsMath = {styles: {
        '#jsM_noFont .message':  {style-settings},
        '#jsM_noFont .link':     {style-settings}
      }};
    </SCRIPT>
where style-settings are key-value pairs for the style items you want to override. For example,
    <SCRIPT>
      jsMath = {styles: {
        '#jsM_noFont .message':  {
          'background-color': "yellow",
           color: "blue"
        },
      }};
    </SCRIPT>
would override the background and foreground colors for the message. You must place this script sometime before loading jsMath, or you could use the command
    <SCRIPT>
      jsMath.Setup.Styles({
        '#jsM_noFont .message': {style-settings},
        '#jsM_noFont .link':    {style-settings}
      });
    </SCRIPT>
sometime after loading jsMath.


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 or easy/load.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 or easy/load.js is loaded, and then
    <DIV ID="jsMath_noFont" STYLE="display:none"></DIV>
    <SCRIPT>
      jsMath.Synchronize(function () {
        if (myFontMessage != "") {
          var noFont = jsMath.Element("noFont");
          noFont.innerHTML = '<DIV CLASS="message">' + myFontMessage + '</DIV>';
          noFont.style.display = '';
        }
      });
    <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 #jsMath_Warning style as described above). Then at the place where you want the message, use:

    <DIV ID="jsMath_myMessage"></DIV>
    <SCRIPT>
      jsMath.Synchronize(function () {
        var message = jsMath.Element("Warning");
        if (message) {
          jsMath.Element("myMessage").innerHTML = message.innerHTML;
        }
      });
    </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:

    <DIV ID="jsMath_myMessage"></DIV>
    <SCRIPT>
      jsMath.Synchronize(function () {
        if (jsMath.nofontMessage) {
          jsMath.Element("myMessage").innerHTML = 'your-message-here';
        }
      });
    </SCRIPT>

Disabling the Image-font Print Warning

When a page is printed and image fonts are being used, a message may appear at the top of the page indicating that the low-resolutions fonts are in use, or that some characters may show up as black boxes (in MSIE and FireFox on the PC). This message tells the user how to overcome these problems using the jsMath control panel settings. It is also possible for the user to disable this message by unchecking the "Print image-font help" item in the jsMath options panel. Since those settings are under the user's control and can be saved for extended periods of time, there should be no need to remove the printed warning messages.

Although these messages only appear when image fonts are used at screen resolutions (or with alpha channel transparency for MSIE and FireFox on the PC), some page authors (mistakenly) think it will be helpful to their users to not show these messages. If you feel you must remove these messages, you can do so by including

    <SCRIPT>
      jsMath = {Controls: {cookie: {printwarn: 0}}}
    </SCRIPT>
before loading jsMath. This will turn off print warnings by default, but will allow the user to turn them on again. You can also use
    <STYLE>
      @media print {#jsMath_PrintWarning {display: none}}
    </STYLE>
to disable the message entirely, or you can replace the jsMath.Controls.PrintMessage() function to insert your own message the way you would like it to be. The default is equivalent to
    <SCRIPT>
      jsMath = {Controls: {
        PrintMessage: function (message) {
          if (jsMath.Element("PrintWarning")) return;
          var div = jsMath.Setup.DIV("PrintWarning",{});
          div.innerHTML = 
            '<center><table><tr><td>'
            + '<div class="message">' + message + '</div>'
            + '<div style="width:22em; height:1px"></div>'
            + '</td></tr></table></center><hr/>';
        }
      }};
    </SCRIPT>
If you simply want to change the CSS style settings for the message, you can set the style for #jsMath_PrintWarning or #jsMath_PrintWarning .message. The default for the latter is:
    <STYLE>
      #jsMath_PrintWarning .message {
         text-align: center; padding: .8em 1.6em; border: 3px solid #DD0000;
         background-color: #FFF8F8; color: #AA0000; font-size:x-small; width:auto;
      }
    </STYLE>


Get jsMath at SourceForge.net. Fast, secure and Free Open Source software downloads [HOME] jsMath web pages
Created: 10 Jul 2005
Last modified: 13 Sep 2008 08:53:21
Comments to: dpvc@union.edu
[Next] Changing Font Sizes or Other Attributes
[Skip] Browser Support for jsMath
[Up] Information for jsMath Authors
[Prev] The verb Extension