305 lines
16 KiB
HTML
305 lines
16 KiB
HTML
|
|
|||
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|||
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|||
|
|
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head>
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|||
|
|
|
|||
|
|
<title>The MathJax Processing Model — MathJax v1.0 documentation</title>
|
|||
|
|
<link rel="stylesheet" href="_static/mj.css" type="text/css" />
|
|||
|
|
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var DOCUMENTATION_OPTIONS = {
|
|||
|
|
URL_ROOT: '',
|
|||
|
|
VERSION: '1.0',
|
|||
|
|
COLLAPSE_INDEX: false,
|
|||
|
|
FILE_SUFFIX: '.html',
|
|||
|
|
HAS_SOURCE: true
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript" src="_static/jquery.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/underscore.js"></script>
|
|||
|
|
<script type="text/javascript" src="_static/doctools.js"></script>
|
|||
|
|
<link rel="top" title="MathJax v1.0 documentation" href="index.html" />
|
|||
|
|
<link rel="next" title="The MathJax Startup Sequence" href="startup.html" />
|
|||
|
|
<link rel="prev" title="The MathJax Community" href="community.html" />
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="related">
|
|||
|
|
<h3>Navigation</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li class="right" style="margin-right: 10px">
|
|||
|
|
<a href="genindex.html" title="General Index"
|
|||
|
|
accesskey="I">index</a></li>
|
|||
|
|
<li class="right" >
|
|||
|
|
<a href="startup.html" title="The MathJax Startup Sequence"
|
|||
|
|
accesskey="N">next</a> |</li>
|
|||
|
|
<li class="right" >
|
|||
|
|
<a href="community.html" title="The MathJax Community"
|
|||
|
|
accesskey="P">previous</a> |</li>
|
|||
|
|
<li><a href="index.html">MathJax v1.0 documentation</a> »</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="document">
|
|||
|
|
<div class="documentwrapper">
|
|||
|
|
<div class="bodywrapper">
|
|||
|
|
<div class="body">
|
|||
|
|
|
|||
|
|
<div class="section" id="the-mathjax-processing-model">
|
|||
|
|
<h1>The MathJax Processing Model<a class="headerlink" href="#the-mathjax-processing-model" title="Permalink to this headline">¶</a></h1>
|
|||
|
|
<p>The purpose of MathJax is to bring the ability to include mathematics
|
|||
|
|
easily in web pages to as wide a range of browsers as possible.
|
|||
|
|
Authors can specify mathematics in a variety of formats (e.g.,
|
|||
|
|
<a class="reference internal" href="glossary.html#term-mathml"><em class="xref std std-term">MathML</em></a> or <a class="reference internal" href="glossary.html#term-latex"><em class="xref std std-term">LaTeX</em></a>), and MathJax provides high-quality
|
|||
|
|
mathematical typesetting even in those browsers that do not have
|
|||
|
|
native MathML support. This all happens without the need for special
|
|||
|
|
downloads or plugins, but rendering will be enhanced if high-quality
|
|||
|
|
math fonts (e.g., <a class="reference internal" href="glossary.html#term-stix"><em class="xref std std-term">STIX</em></a>) are available to the browser.</p>
|
|||
|
|
<p>MathJax is broken into several different kinds of components: page
|
|||
|
|
preprocessors, input processors, output processors, and the MathJax
|
|||
|
|
Hub that organizes and connects the others. The input and output
|
|||
|
|
processors are called <a class="reference internal" href="glossary.html#term-jax"><em class="xref std std-term">jax</em></a>, and are described in more detail
|
|||
|
|
below.</p>
|
|||
|
|
<p>When MathJax runs, it looks through the page for special tags that
|
|||
|
|
hold mathematics; for each such tag, it locates an appropriate input
|
|||
|
|
jax which it uses to convert the mathematics into an internal form
|
|||
|
|
(called an element jax), and then calls an output jax to transform the
|
|||
|
|
internal format into HTML content that displays the mathematics within
|
|||
|
|
the page. The page author configures MathJax by indicating which
|
|||
|
|
input and output jax are to be used.</p>
|
|||
|
|
<p>Often, and especially with pages that are authored by hand, the
|
|||
|
|
mathematics is not stored (initially) within the special tags needed
|
|||
|
|
by MathJax, as that would require more notation than the average page
|
|||
|
|
author is willing to type. Instead, it is entered in a form that is
|
|||
|
|
more natural to the page author, for example, using the standard TeX
|
|||
|
|
math delimiters <tt class="docutils literal"><span class="pre">$...$</span></tt> and <tt class="docutils literal"><span class="pre">$$...$$</span></tt> to indicate what part of the
|
|||
|
|
document is to be typeset as mathematics. In this case, MathJax can
|
|||
|
|
run a preprocessor to locate the math delimiters and replace them by
|
|||
|
|
the special tags that it uses to mark the formulas. There are
|
|||
|
|
preprocessors for <a class="reference internal" href="tex.html#tex-support"><em>TeX notation</em></a>, <a class="reference internal" href="mathml.html#mathml-support"><em>MathML
|
|||
|
|
notation</em></a>, and the <a class="reference internal" href="jsMath.html#jsmath-support"><em>jsMath notation</em></a> that uses <cite>span</cite> and <cite>div</cite> tags.</p>
|
|||
|
|
<p>For pages that are constructed programatically, such as HTML
|
|||
|
|
pages that result from running a processor on text in some other
|
|||
|
|
format (e.g., pages produced from Markdown documents, or via programs
|
|||
|
|
like <cite>tex4ht</cite>), it would be best to use MathJax’s special tags
|
|||
|
|
directly, as described below, rather than having MathJax run
|
|||
|
|
another preprocessor. This will speed up the final display of the
|
|||
|
|
mathematics, since the extra preprocessing step would not be needed,
|
|||
|
|
and it also avoids the conflict between the use of the less-than sign,
|
|||
|
|
<tt class="docutils literal"><span class="pre"><</span></tt>, in mathematics and asn an HTML special character (that starts
|
|||
|
|
an HTML tag).</p>
|
|||
|
|
<div class="section" id="how-mathematics-is-stored-in-the-page">
|
|||
|
|
<h2>How mathematics is stored in the page<a class="headerlink" href="#how-mathematics-is-stored-in-the-page" title="Permalink to this headline">¶</a></h2>
|
|||
|
|
<p>In order to identify mathematics in the page, MathJax uses special
|
|||
|
|
<tt class="docutils literal"><span class="pre"><script></span></tt> tags to enclose the mathematics. This is done because
|
|||
|
|
such tags can be located easily, and because their content is not
|
|||
|
|
further processed by the browser; for example, less-than signs can be
|
|||
|
|
used as they are in mathematics, without worrying about them being
|
|||
|
|
mistaken for the beginnings of HTML tags. One may also consider the
|
|||
|
|
math notation as a form of “script” for the mathematics, so a
|
|||
|
|
<tt class="docutils literal"><span class="pre"><script></span></tt> tag makes at least some sense for storing the math.</p>
|
|||
|
|
<p>Each <tt class="docutils literal"><span class="pre"><script></span></tt> tag has a <tt class="docutils literal"><span class="pre">type</span></tt> attribute that identifies the
|
|||
|
|
kind of script that the tag contains. The usual (and default) value
|
|||
|
|
is <tt class="docutils literal"><span class="pre">type="text/javascript"</span></tt>, and when a script has this type, the
|
|||
|
|
browser executes the script as a javascript program. MathJax,
|
|||
|
|
however, uses the type <cite>math/tex</cite> to identify mathematics in the TeX
|
|||
|
|
and LaTeX notation, and <cite>math/mml</cite> for mathematics in MathML
|
|||
|
|
notation. When the <cite>tex2jax</cite> or <cite>mml2jax</cite> preprocessors run, they
|
|||
|
|
create <tt class="docutils literal"><span class="pre"><script></span></tt> tags with these types so that MathJax can process
|
|||
|
|
them when it runs its main typesetting pass.</p>
|
|||
|
|
<p>For example,</p>
|
|||
|
|
<div class="highlight-html"><pre><script type="math/tex">x+\sqrt{1-x^2}</script></pre>
|
|||
|
|
</div>
|
|||
|
|
<p>represents an in-line equation in TeX notation, and</p>
|
|||
|
|
<div class="highlight-html"><pre><script type="math/tex; mode=display">
|
|||
|
|
\sum_{n=1}^\infty {1\over n^2} = {\pi^2\over 6}
|
|||
|
|
</script></pre>
|
|||
|
|
</div>
|
|||
|
|
<p>is a displayed TeX equation.</p>
|
|||
|
|
<p>Alternatively, using MathML notation, you could use</p>
|
|||
|
|
<div class="highlight-html"><pre><script type="math/mml">
|
|||
|
|
<math>
|
|||
|
|
<mi>x</mi>
|
|||
|
|
<mo>+</mo>
|
|||
|
|
<msqrt>
|
|||
|
|
<mn>1</mn>
|
|||
|
|
<mo>&#x2212;<!-- − --></mo>
|
|||
|
|
<msup>
|
|||
|
|
<mi>x</mi>
|
|||
|
|
<mn>2</mn>
|
|||
|
|
</msup>
|
|||
|
|
</msqrt>
|
|||
|
|
</math>
|
|||
|
|
</script></pre>
|
|||
|
|
</div>
|
|||
|
|
<p>for in-line math, or</p>
|
|||
|
|
<div class="highlight-html"><pre><script type="math/mml">
|
|||
|
|
<math display="block">
|
|||
|
|
<mrow>
|
|||
|
|
<munderover>
|
|||
|
|
<mo>&#x2211;<!-- ∑ --></mo>
|
|||
|
|
<mrow>
|
|||
|
|
<mi>n</mi>
|
|||
|
|
<mo>=</mo>
|
|||
|
|
<mn>1</mn>
|
|||
|
|
</mrow>
|
|||
|
|
<mi mathvariant="normal">&#x221E;<!-- ∞ --></mi>
|
|||
|
|
</munderover>
|
|||
|
|
</mrow>
|
|||
|
|
<mrow>
|
|||
|
|
<mfrac>
|
|||
|
|
<mn>1</mn>
|
|||
|
|
<msup>
|
|||
|
|
<mi>n</mi>
|
|||
|
|
<mn>2</mn>
|
|||
|
|
</msup>
|
|||
|
|
</mfrac>
|
|||
|
|
</mrow>
|
|||
|
|
<mo>=</mo>
|
|||
|
|
<mrow>
|
|||
|
|
<mfrac>
|
|||
|
|
<msup>
|
|||
|
|
<mi>&#x03C0;<!-- π --></mi>
|
|||
|
|
<mn>2</mn>
|
|||
|
|
</msup>
|
|||
|
|
<mn>6</mn>
|
|||
|
|
</mfrac>
|
|||
|
|
</mrow>
|
|||
|
|
</math>
|
|||
|
|
</script></pre>
|
|||
|
|
</div>
|
|||
|
|
<p>for displayed equations in MathML notation.
|
|||
|
|
As other input jax are created, they will use other types to identify
|
|||
|
|
the mathematics they can process.</p>
|
|||
|
|
<p>Page authors can use one of MathJax’s preprocessors to convert from
|
|||
|
|
math delimiters that are more natural for the author to type (e.g.,
|
|||
|
|
TeX math delimiters like <tt class="docutils literal"><span class="pre">$$...$$</span></tt>) to MathJax’s <tt class="docutils literal"><span class="pre"><script></span></tt>
|
|||
|
|
format. Blog and wiki software could extend from their own markup
|
|||
|
|
languages to include math delimiters, which they could convert to
|
|||
|
|
MathJax’s <tt class="docutils literal"><span class="pre"><script></span></tt> format automatically.</p>
|
|||
|
|
<p>Note, however, that Internet Explorer has a bug that causes it to
|
|||
|
|
remove the space before a <tt class="docutils literal"><span class="pre"><script></span></tt> tag if there is also a space
|
|||
|
|
after it, which can cause serious spacing problems with in-line math
|
|||
|
|
in Internet Explorer. There are three possible solutions to this in
|
|||
|
|
MathJax. The recommended way is to use a math preview (an element
|
|||
|
|
with class <tt class="docutils literal"><span class="pre">MathJax_Preview</span></tt>) that is non-empty and comes right
|
|||
|
|
before the <tt class="docutils literal"><span class="pre"><script></span></tt> tag. Its contents can be just the word
|
|||
|
|
<tt class="docutils literal"><span class="pre">[math]</span></tt>, so it does not have to be specific to the mathematics
|
|||
|
|
script that follows; it just has to be non-empty (though it could have
|
|||
|
|
its style set to <tt class="docutils literal"><span class="pre">display:none</span></tt>). See also the <tt class="docutils literal"><span class="pre">preJax</span></tt> and
|
|||
|
|
<tt class="docutils literal"><span class="pre">postJax</span></tt> options in the <a class="reference internal" href="options/hub.html#configure-hub"><em>Core Configuration Options</em></a> document for another approach.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="section" id="the-components-of-mathjax">
|
|||
|
|
<h2>The components of MathJax<a class="headerlink" href="#the-components-of-mathjax" title="Permalink to this headline">¶</a></h2>
|
|||
|
|
<p>The main components of MathJax are its preprocessors, its input and
|
|||
|
|
output jax, and the MathJax Hub, which coordinates the actions of the
|
|||
|
|
other components.</p>
|
|||
|
|
<p><strong>Input jax</strong> are associated with the different script types (like
|
|||
|
|
<em class="mimetype">math/tex</em> or <em class="mimetype">math/mml</em>) and the mapping of a
|
|||
|
|
particular type to a particular jax is made when the various jax
|
|||
|
|
register their abilities with the MathJax Hub at configuration time.
|
|||
|
|
For example, the MathML input jax registers the <em class="mimetype">math/mml</em>
|
|||
|
|
type, so MathJax will know to call the MathML input jax when it sees
|
|||
|
|
math elements of that type. The role of the input jax is to convert
|
|||
|
|
the math notation entered by the author into the internal format used
|
|||
|
|
by MathJax (called an <cite>element jax</cite>). This internal format is
|
|||
|
|
essentially MathML (represented as JavaScript objects), so an input
|
|||
|
|
jax acts as a translator into MathML.</p>
|
|||
|
|
<p><strong>Output jax</strong> convert that internal element jax format into a specific
|
|||
|
|
output format. For example, the NativeMML output jax inserts MathML
|
|||
|
|
tags into the page to represent the mathematics, while the HTML-CSS
|
|||
|
|
output jax uses HTML with CSS styling to lay out the mathematics so
|
|||
|
|
that it can be displayed even in browsers that dont understand
|
|||
|
|
MathML. Output jax could be produced that render the mathematics
|
|||
|
|
using SVG, for example, or that speak an equation for the blind
|
|||
|
|
users. The MathJax contextual menu can be used to switch between the
|
|||
|
|
output jax that are available.</p>
|
|||
|
|
<p>Each input and output jax has a small configuration file that is
|
|||
|
|
loaded when that input jax is included in the <cite>jax</cite> array in the
|
|||
|
|
MathJax configuration, and a larger file that implements the core
|
|||
|
|
functionality of that particular jax. The latter file is loaded
|
|||
|
|
when the first time the jax is needed by MathJax to process some
|
|||
|
|
mathematics.</p>
|
|||
|
|
<p>The <strong>MathJax Hub</strong> keeps track of the internal representations of the
|
|||
|
|
various mathematical equations on the page, and can be queried to
|
|||
|
|
obtain information about those equations. For example, one can obtain
|
|||
|
|
a list of all the math elements on the page, or look up a particular
|
|||
|
|
one, or find all the elements with a given input format, and so on.
|
|||
|
|
In a dynamically generated web page, an equation where the source
|
|||
|
|
mathematics has changed can be asked to re-render itself, or if a new
|
|||
|
|
paragraph is generated that might include mathematics, MathJax can be
|
|||
|
|
asked to process the equations it contains.</p>
|
|||
|
|
<p>The Hub also manages issues concerning mouse events and other user
|
|||
|
|
interaction with the equation itself. Parts of equations can be made
|
|||
|
|
active so that mouse clicks cause event handlers to run, or activate
|
|||
|
|
hyperlinks to other pages, and so on, making the mathematics as
|
|||
|
|
dynamic as the rest of the page.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="sphinxsidebar">
|
|||
|
|
<div class="sphinxsidebarwrapper">
|
|||
|
|
<h3><a href="index.html">Table Of Contents</a></h3>
|
|||
|
|
<ul>
|
|||
|
|
<li><a class="reference internal" href="#">The MathJax Processing Model</a><ul>
|
|||
|
|
<li><a class="reference internal" href="#how-mathematics-is-stored-in-the-page">How mathematics is stored in the page</a></li>
|
|||
|
|
<li><a class="reference internal" href="#the-components-of-mathjax">The components of MathJax</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h4>Previous topic</h4>
|
|||
|
|
<p class="topless"><a href="community.html"
|
|||
|
|
title="previous chapter">The MathJax Community</a></p>
|
|||
|
|
<h4>Next topic</h4>
|
|||
|
|
<p class="topless"><a href="startup.html"
|
|||
|
|
title="next chapter">The MathJax Startup Sequence</a></p>
|
|||
|
|
<h3>This Page</h3>
|
|||
|
|
<ul class="this-page-menu">
|
|||
|
|
<li><a href="_sources/model.txt"
|
|||
|
|
rel="nofollow">Show Source</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<div id="searchbox" style="display: none">
|
|||
|
|
<h3>Quick search</h3>
|
|||
|
|
<form class="search" action="search.html" method="get">
|
|||
|
|
<input type="text" name="q" size="18" />
|
|||
|
|
<input type="submit" value="Go" />
|
|||
|
|
<input type="hidden" name="check_keywords" value="yes" />
|
|||
|
|
<input type="hidden" name="area" value="default" />
|
|||
|
|
</form>
|
|||
|
|
<p class="searchtip" style="font-size: 90%">
|
|||
|
|
Enter search terms or a module, class or function name.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<script type="text/javascript">$('#searchbox').show(0);</script>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="clearer"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="related">
|
|||
|
|
<h3>Navigation</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li class="right" style="margin-right: 10px">
|
|||
|
|
<a href="genindex.html" title="General Index"
|
|||
|
|
>index</a></li>
|
|||
|
|
<li class="right" >
|
|||
|
|
<a href="startup.html" title="The MathJax Startup Sequence"
|
|||
|
|
>next</a> |</li>
|
|||
|
|
<li class="right" >
|
|||
|
|
<a href="community.html" title="The MathJax Community"
|
|||
|
|
>previous</a> |</li>
|
|||
|
|
<li><a href="index.html">MathJax v1.0 documentation</a> »</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer">
|
|||
|
|
© Copyright 2010 Design Science.
|
|||
|
|
Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.0b2.
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|