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

The spriteImageFonts plugin

This is an experimental plugin designed to address some of the important drawbacks to the traditional implementation of the image-font fallback method in jsMath. Currently, each character in each size in each font is a separate image, so there are tens of thousands of tiny images. That means that there is a lot of overhead both in terms of network traffic when the image fonts are used and in storage space on the server to make image fonts available. For those who must use FTP to move individual files to the server, it can be quite painful to install the image fonts.

The spriteImageFonts plugin uses an alternative approach in which one larger file stores the images of all the characters in a given font, and only a small portion of that file is displayed when one of its characters is needed. This has the advantage of reducing the number of needed files by a factor of 128 (the number of characters in each font), so they take up far less space on the server, and there is less network activity needed when a user requests image fonts.

To use this plugin, you need to download the sprite font images (available on the jsMath download page) and put them in the jsMath directory on your server. They are stored in a directory called fonts-sprite, and can be used without replacing the existing fonts directory, if desired. If you always use the spriteImageFonts, you can remove (or not download in the first place) the fonts directory and just use the fonts-sprite directory. If you are using any of the extra fonts, you should download sprite-based versions of those fonts as well and place them in the fonts-sprite directory.

Then, on those pages where you want to use the sprite-based image fonts, add the command:

    <SCRIPT SRC="path-to-jsMath/plugins/spriteImageFonts.js"></SCRIPT>
before loading jsMath.js or the autoload plugin, but after setting the jsMath variable (if you are customizing jsMath in other ways). This will cause jsMath's image mode to use the new sprite-based image fonts rather than the traditional image fonts.

Note that this is considered an experimental plugin, and so you should use it with caution. The image-fonts are the main fallback method for when the TeX fonts are not available, so you need to be sure the benefits are worth the costs that are outlined in the next section. Also, there is no guarantee that this plugin will be maintained in later versions of jsMath. (If it turns out to be too problematic, it may be dropped.)

Known Problems with the spriteImageFonts plugin

The main reason to use sprite-based images is that they should transfer to the user's browser faster (they should generate less network traffic), and because they take up less room and fewer files on the server.

Unfortunately, these benefits come at a cost. One problem is that the clipping required to obtain the small images from within the larger file is very delicate, and even a one-pixel error can be disastrous, especially for fonts at smaller point sizes. While the on-screen rendering works reasonably well, some browsers introduce slight spacing errors in the printed versions of their pages, most likely due to the changes in font metrics between the screen and printer versions of the fonts. These errors can lead to slight clipping of characters in the printed output.

A more serious problem is that some browsers render the clipped images slower than they do the individual images (presumably they are rendering the whole image even though most of it is not shown). This is particularly noticable in MSIE on the PC, which is already the slowest browser that handles jsMath, making it even slower. Indeed, the images that use alpha-channel transparency are so slow in MSIE on the PC (due to the rediculous apppraoch used to handle alpha-channel transparency in MSIE) that the non-alpha images are used by default (in MSIE only) unless the user specifically requests alpha transparency.

Speed also seems to be an issue with Firefox on the PC when the high-resolution images for printing are used. This causes Firefox to run unexpectedly slowly, though it does not seem to affect the normal screen resolution images. In addition, Firefox's print preview on the PC will show the images located in the wrong positions, but they will print properly anyway.

Opera versions prior to 9.50 on both the PC and the Machas significant problems with the sprite-based image fonts. Due to a serious alignment bug in Opera, the sprite images can't be handled as standard images, so are implemented using background images instead. This means they can't be scaled by jsMath, and so the scaling and hi-res printing options are disabled in Opera. Since Opera automatically scales images when you zoom the page, this is not really much of a problem, though it does mean you can't get high-resolution printing. Since background images are not printed by default, however, in order for Opera users to print pages containing mathematics, they need to turn on printing of background images in the print dialog box. This works fine on the Mac, but on the PC, the images don't print properly, even though they show up correctly in the print preview. (It looks like the positioning of the background image is not being adjusted correctly for the resolution of the printer, and so the font image is positioned incorrectly and the wrong characters are printed.)

Finally, some older browsers do not implement the clipping that is required to make the sprite-based fonts work, and so the image modes are disabled for these. That means that if the user does not have the TeX fonts installed, the only option will be unicode fonts. These are not as effective as the traditional image fonts, so changing to sprite-based fonts will cause a reduciton in quality for users of these older browsers.

All of these problems make the sprite-based image fonts less reliable than the individual-image fonts, and so the sprite images have not been incorporated into jsMath.js directly. You may choose to use the sprite fonts if the reduction in storage space or number of files is critical enough to compensate for the problems that using them introduces, but it is a decision that should not be taken lightly, as it will inconvenience some of your users, perhaps significantly.

Get jsMath at SourceForge.net. Fast, secure and Free Open Source software downloads [HOME] jsMath web pages
Created: 03 Apr 2006
Last modified: 23 Sep 2008 21:20:18
Comments to: dpvc@union.edu
[Next] The AMSmath Extension
[Skip] Browser Support for jsMath
[Up] Information for jsMath Authors
[Prev] The CHMmode plugin