Tutorial Categories:

HTML/CSS JavaScript/AJAX Server-Side Marketing General Comp-Sci

Embedding LaTex Markup Into HTML Using jsMath

By Justin Poirier

TeX is a system for specifying visual details of a document. This is called a typesetting system. TeX is known for its ability to produce mathematical syntax. It includes both the language used to encode the desired output into a serial string of characters, and the processing system which interprets the encoding and renders the output. Graphical renderings beyond plain text, like square root symbols, are represented by codes which, when following a common pattern, can be combined into constructs called macros which can in turn be combined into greater macros, and so on recursively. The definitions of macros available for use is left to 3rd party developers, to be included in format files which form part of the TeX installation. LaTeX is a package containing TeX and a format.

Once LaTeX has been learned, it can be embedded into HTML using the system jsMath which this article will discuss. jsMath can still be downloaded and used, although it should be noted that development has been superseded by development of MathJax.

The jsMath installation process just involves placing all included files in a /jsMath/ folder somewhere on a server or hard drive. We will call script files within our HTML using the appropriate path. This path must be updated within HTML files when moving them (e.g. uploading to a server) unless the relative path to jsMath remains the same.

Having a single installation on one computer, or on a server to be accessed remotely, implies that the HTML files containing the LaTeX are incomplete in themselves. HTML is a legitimate document format which is not just for use on the web, so ideally the jsMath system would stay with each file using it. Besides this, installation on a local hard drive without a web server requires that in every HTML file using jsMath, the calls to the scripts use paths that at all times reflect the route from the HTML file to the script (since using absolute paths causes an error as the system sees the scripts as being in a different domain). With all this in mind, the installation can be copied to the parent folder of each document that uses it, and a habit made of calling it from those documents using relative paths. The system would then be distributed along with the HTML file. This is less than ideal since it requires anyone sharing the document to share all files involved, but that situation already occurs with HTML since content like images is always in separate files. To lessen the number of files, those related to jsMath's image-based fonts can be excluded, and the system set up to always fall back on available system fonts. We will discuss later how to set this up. The jsMath download involves 2 archives, one of which is named jsMath-fonts followed by a version number; it is this archive's contents that should be excluded.

Conversion of LaTeX to HTML involves a jsMath script identifying LaTeX within your document at all locations marked-up in one of the ways we will specify. The jsMath scripts get scheduled to run in your document by including a SCRIPT element within the HEAD element, linking to the appropriate initializing code. In the most basic setup the SCRIPT element calls jsmath.js in the root of the /jsMath/ folder. In this setup a second step is required: another SCRIPT tag with the code jsMath.Process(document); as the last line of the BODY element. A more convenient setup involves calling /easy/load.js in the SCRIPT element within the HEAD. This allows control over jsMath's behaviour by editing load.js.

With the first setup, LaTeX code is to be enclosed in a DIV or SPAN element, depending on whether you want it to appear inline or block, respectively. The element should be of class "math".

With the second setup, a plug-in called text2Math can be utilized whereby LaTeX code is instead enclosed in one of 2 built-in delimiter pairs for block format, \[LaTeX code\] or $$LaTeX code$$; one of two built-in delimiter pairs for inline format, \(LaTeX code\) or $LaTeX code$ (the latter is turned off by default and must be activated); or the custom block or inline delimiter pair, if it has been set. Built-in delimiters can be activated and deactivated, and custom delimiters created, by editing load.js. Its contents are largely JSON data where the property-value pairs define system settings. The "processSlashParens", "processSlashBrackets", "processSingleDollars" and "processDoubleDollars" properties activate and deactivate the default delimiters. The "customDelimeter" property contains an array of, in order, the opening inline delimiter, closing inline delimeter, opening block delimeter, and closing block delimeter.

Image fonts can be turned off, if jsMath was set up by calling jsMath.js, by first calling /plugins/noImageFonts.js. If jsMath was set up using load.js, a bug must first be removed from the file jsMath-easy-load.js in the root of the /jsMath/ directory. The string "jsMath.Fonts.extra_message" should be located using a search, and changed to "jsMath.Font.extra_message". Then, image fonts can be turned off by setting the "noImageFonts" flag in load.js.

By default jsMath inserts a warning message onto the page any time the user does not have TeX fonts installed on their system. If using load.js, this can be turned off by setting the "showFontWarnings" property to 0. Otherwise, the JavaScript code jsMath = {Font:{Message:function() {}}} prior to loading jsMath will turn it off. A JavaScript file can be created containing this code followed by an invokation of jsMath.js. The simplest JavaScript method of invoking one script from another involves calling the target script with an AJAX request and then passing the response to the eval() function, but note that this can involve security threats. The script containing the above-mentioned code and the invokation can then be used to load the jsMath environment instead of the usual direct call to jsMath.js.

It should be noted that if you try to edit loads.js in Windows Notepad it will not display correctly. For Newlines, native Windows code looks for a 2 character sequence regardless of the encoding being used to represent characters. But being encoded in UTF-8 the jsMath files are Unicode and upon downloading are in a form that conforms strictly to it, including the assumption that Newline format be a 1 character sequence. Hence line breaks will not appear in Notepad, unless a tool is used to convert them to Windows-style. Notepad++ is one free editor that has such a tool.