Attention

Version 3 is now the current version of MathJax. This document is for version 2.

The MathJax.OutputJax Class

Output jax are the components of MathJax that translate mathematics from the MathJax internal format (an element jax) to whatever output is required to represent the mathematics (e.g., MathML elements, or HTML-with-CSS that formats the mathematics on screen).

An output jax is stored as a pair of files in a subdirectory of the the jax/output directory, with the subdirectory name being the name of the output jax. For example, the NativeMML output jax is stored in jax/output/NativeMML. The first file, config.js, is loaded when MathJax is being loaded and configured, and is indicated by listing the input jax directory in the jax array of the MathJax configuration. The config.js file creates a subclass of the MathJax.OutputJax object for the new output jax and registers it with MathJax, along with the MIME-type of the element jax that it can process.

The main body of the output jax is stored in the second file, jax.js, which is loaded when the output jax is first called on to translate some mathematics. This file augments the original output jax subclass with the additional methods needed to produce the output. MathJax calls the input jax’s Translate() method when it needs the output jax to translate an element jax to produce output.

The MathJax.OutputJax class is a subclass of the MathJax Jax class, and inherits the properties and methods of that class. Those listed below are the additional or overridden ones from that class.

Properties

id

The name of the jax.

version

The version number of the jax.

directory

The directory where the jax files are stored (e.g., "[MathJax]/jax/output/HTML-CSS");

fontDir

The directory where the fonts are stored (e.g., "[MathJax]/fonts")

imageDir

The directory where MathJax images are found (e.g. "[MathJax]/images")

Methods

preProcess(state)

This is called by MathJax.Hub to ask the output processor to prepare to process math scripts. Its default action is to start loading the jax’s jax.js file, and redefine itself to simply return the callback for the load operation (so that further calls to it will cause the processing to wait for the callback).

Once the jax.js file has loaded, this method is replaced by the jax’s preTranslate() method, so that subsequent calls to preProcess() will perform the appropriate translation.

Parameters:

  • state — a structure containing information about the current proccessing state of the mathematics

Returns:

null

preTranslate(state)

This routine replaces preProcess() above when the jax’s jax.js file is loaded. It is called by MathJax.Hub to ask the output processor to prepare to process math scripts. (For example, the HTML-CSS output jax uses this to determine em-sizes for all the mathematics at once, to minimize page reflows that slow down Internet Explorer.)

The routine can use state.jax[this.id] to obtain the array of element jax that are to be processed. The output jax can use the state variable to maintain its own state information, but any properties that it adds to the variable should have a prefix that is the output jax’s ID. For example, the HTML-CSS output jax might use state.HTMLCSSlast to keep track of the last equation it processed, or could add state.HTMLCSS = {...} to create an object of its own within the state variable.

Parameters:

  • state — a structure containing information about the current proccessing state of the mathematics

Returns:

null

Translate(script, state)

This is the main routine called by MathJax when an element jax is to be converted to output. The default Translate() method throws an error indicating that Translate() hasn’t been defined, so when the jax.js file loads, it should override the default Translate() with its own version that does the actual translation.

You should use MathJax.Hub.getJaxFor(script) to obtain the element jax for the given script. The translation process may modify the element jax (e.g., if it has data that needs to be stored with the jax), and may insert DOM elements into the document near the jax’s <script> tag. The output jax can use the state variable to maintain information about its processing state, but see preTranslate() above for naming conventions for properties that are added.

Parameters:

  • script — the <script> element to be translated

  • state — a structure containing information about the current proccessing state of the mathematics

Returns:

the element jax resulting from the translation

postTranslate(state)

This routines is called by MathJax.Hub when the translation of math elements is complete, and can be used by the output processor to finalize any actions that it needs to complete. (For example, making the mathematics visible, or forcing a reflow of the page.)

The routine can use state.jax[this.id] to obtain the array of element jax that were processed, or can use the state variable to store its own state information (see preProcess() above for caveats about naming properties).

Parameters:

  • state — a structure containing information about the current proccessing state of the mathematics

Returns:

null

Register(mimetype)

This registers the MIME-type for the element jax associated with this output jax so that MathJax knows to call this jax when it wants to display an element jax of that type. Several output jax may register for the same input jax, in which case the first one to register will be the default one for that type.

Parameters:

  • mimetype — the MIME-type of the input this jax processes

Returns:

null

Remove(jax)

Removes the output associated with the given element jax. The routine can use jax.SourceElement() to locate the <script> tag associated with the element jax.

Parameters:

  • jax — the element jax whose display should be removed

Returns:

null

If an output jax wants its output to handle the contextual menu item and zooming, then it needs to tie into the event-handling code (MathEvents) and the zoom-handling code (MathZoom). That requires the following methods.

getJaxFromMath(math)

This is called by the event-handling code (MathEvents) to get the element jax associated with the DOM element that caused an event to occur. The output jax will have attached event handlers to some DOM element that is part of its output, and the MathEvents code uses this routine to map back to the jax associated with that output.

Parameters:

  • math — a DOM element that triggered a DOM event (e.g., a mouse click)

Returns:

the ElementJax structure associated with the DOM element

Zoom(jax, span, math, Mw, Mh)

This routine is called by the zoom-handling code (MathZoom) when an expression has received its zoom trigger event (e.g., a double-click). The jax is the math that needs to be zoomed, span is a <span> element in which the zoomed version of the math should be placed, math is the DOM element that received the zoom trigger event, and Mw and Mh are the maximum width and height allowed for the zoom box (the span).

The return value is an object with the following properties:

  • Y — the vertical offset from the top of the span to the baseline of the mathematics

  • mW — the width of the original mathematics element

  • mH — the height of the original mathematics element

  • zW — the width of the zoomed math

  • zH — the height of the zoomed math

All of these values are in pixels.

Parameters:

  • jax — the jax to be zoomed

  • span — the <span> in which to place the zoomed math

  • math — the DOM element generating the zoom event

  • Mw — the maximum width of the zoom box

  • Mh — the maximum height of the zoom box

Returns:

a structure as described above