322 lines
16 KiB
HTML
322 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 HTML-CSS output processor — MathJax v2.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: '2.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>
|
|
<!--<script type="text/javascript" src="../../../MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>-->
|
|
<link rel="top" title="MathJax v2.0 documentation" href="../index.html" />
|
|
<link rel="up" title="Configuration Objects" href="index.html" />
|
|
<link rel="next" title="The NativeMML output processor" href="NativeMML.html" />
|
|
<link rel="prev" title="The AsciiMath input processor" href="AsciiMath.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="NativeMML.html" title="The NativeMML output processor"
|
|
accesskey="N">next</a> |</li>
|
|
<li class="right" >
|
|
<a href="AsciiMath.html" title="The AsciiMath input processor"
|
|
accesskey="P">previous</a> |</li>
|
|
<li><a href="../index.html">MathJax v2.0 documentation</a> »</li>
|
|
<li><a href="index.html" accesskey="U">Configuration Objects</a> »</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="document">
|
|
<div class="documentwrapper">
|
|
<div class="bodywrapper">
|
|
<div class="body">
|
|
|
|
<div class="section" id="the-html-css-output-processor">
|
|
<span id="configure-html-css"></span><h1>The HTML-CSS output processor<a class="headerlink" href="#the-html-css-output-processor" title="Permalink to this headline">¶</a></h1>
|
|
<p>The options below control the operation of the HTML-CSS output
|
|
processor that is run when you include <tt class="docutils literal"><span class="pre">"output/HTML-CSS"</span></tt> in the
|
|
<cite>jax</cite> array of your configuration or load a combined configuration
|
|
file that includes the HTML-CSS output jax. They are listed with
|
|
their default values. To set any of these options, include a
|
|
<tt class="docutils literal"><span class="pre">"HTML-CSS"</span></tt> section in your <tt class="xref py py-meth docutils literal"><span class="pre">MathJax.Hub.Config()</span></tt> call.
|
|
Note that, because of the dash, you need to enclose the name in
|
|
quotes. For example</p>
|
|
<div class="highlight-javascript"><div class="highlight"><pre><span class="nx">MathJax</span><span class="p">.</span><span class="nx">Hub</span><span class="p">.</span><span class="nx">Config</span><span class="p">({</span>
|
|
<span class="s2">"HTML-CSS"</span><span class="o">:</span> <span class="p">{</span>
|
|
<span class="nx">preferredFont</span><span class="o">:</span> <span class="s2">"STIX"</span>
|
|
<span class="p">}</span>
|
|
<span class="p">});</span>
|
|
</pre></div>
|
|
</div>
|
|
<p>would set the <tt class="docutils literal"><span class="pre">preferredFont</span></tt> option to the <a class="reference internal" href="../glossary.html#term-stix"><em class="xref std std-term">STIX</em></a> fonts.</p>
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">scale: 100</tt></dt>
|
|
<dd><p>The scaling factor (as a percentage) of math with respect to the
|
|
surrounding text. The <cite>HTML-CSS</cite> output processor tries to match
|
|
the ex-size of the mathematics with that of the text where it is
|
|
placed, but you may want to adjust the results using this scaling
|
|
factor. The user can also adjust this value using the contextual
|
|
menu item associated with the typeset mathematics.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">minScaleAdjust: 50</tt></dt>
|
|
<dd><p>This gives a minimum scale (as a percent) for the scaling used by
|
|
MathJax to match the equation to the surrounding text. This will
|
|
prevent MathJax from making the mathematics too small.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">availableFonts: ["STIX","TeX"]</tt></dt>
|
|
<dd><p>This is a list of the fonts to look for on a user’s computer in
|
|
preference to using MathJax’s web-based fonts. These must
|
|
correspond to directories available in the
|
|
<tt class="docutils literal"><span class="pre">jax/output/HTML-CSS/fonts</span></tt> directory, where MathJax stores data
|
|
about the characters available in the fonts. Set this to
|
|
<tt class="docutils literal"><span class="pre">["TeX"]</span></tt>, for example, to prevent the use of the <a class="reference internal" href="../glossary.html#term-stix"><em class="xref std std-term">STIX</em></a>
|
|
fonts, or set it to an empty list, <cite>[]</cite>, if you want to force
|
|
MathJax to use web-based or image fonts.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">preferredFont: "TeX"</tt></dt>
|
|
<dd><p>Which font to prefer out of the <tt class="docutils literal"><span class="pre">availableFonts</span></tt> list, when more
|
|
than one is available on the user’s computer.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">webFont: "TeX"</tt></dt>
|
|
<dd><p>This is the web-based font to use when none of the fonts listed
|
|
above are available on the user’s computer. Note that currently
|
|
only the <cite>TeX</cite> font is available in a web-based form (they are
|
|
stored in the <tt class="docutils literal"><span class="pre">fonts/HTML-CSS</span></tt> folder in the MathJax directory).
|
|
Set this to <tt class="docutils literal"><span class="pre">null</span></tt> to disable web fonts.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">imageFont: "TeX"</tt></dt>
|
|
<dd><p>This is the font to use for image fallback mode (when none of the
|
|
fonts listed above are available and the browser doesn’t support
|
|
web-fonts via the <tt class="docutils literal"><span class="pre">@font-face</span></tt> CSS directive). Note that currently
|
|
only the TeX font is available as an image font (they are stored
|
|
in the <tt class="docutils literal"><span class="pre">fonts/HTML-CSS</span></tt> directory).</p>
|
|
<p>Set this to <tt class="docutils literal"><span class="pre">null</span></tt> if you want to prevent the use of image fonts
|
|
(e.g., you have deleted or not installed the image fonts on your
|
|
server). In this case, only browsers that support web-based fonts
|
|
will be able to view your pages without having the fonts installed
|
|
on the client computer. The browsers that support web-based fonts
|
|
include: IE6 and later, Chrome, Safari3.1 and above, Firefox3.5
|
|
and later, and Opera10 and later. Note that Firefox3.0 is <strong>not</strong>
|
|
on this list.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">undefinedFamily: "STIXGeneral, 'Arial Unicode MS', serif"</tt></dt>
|
|
<dd><p>This is the font-family CSS value used for characters that are not
|
|
in the selected font (e.g., for web-based fonts, this is where to
|
|
look for characters not included in the MathJax web fonts). IE
|
|
will stop looking after the first font that exists on the system
|
|
(even if it doesn’t contain the needed character), so order these
|
|
carefully.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">mtextFontInherit: false</tt></dt>
|
|
<dd><p>This setting controls whether <tt class="docutils literal"><span class="pre"><mtext></span></tt> elements will be typeset
|
|
using the math fonts or the font of the surrounding text. When
|
|
<tt class="docutils literal"><span class="pre">false</span></tt>, the font for <tt class="docutils literal"><span class="pre">mathvariant="normal"</span></tt> will be used;
|
|
when <tt class="docutils literal"><span class="pre">true</span></tt>, the font will be inherited from the surrounding
|
|
paragraph.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">EqnChunk: 50</tt></dt>
|
|
<dt>
|
|
<tt class="descname">EqnChunkFactor: 1.5</tt></dt>
|
|
<dt>
|
|
<tt class="descname">EqnChunkDelay: 100</tt></dt>
|
|
<dd><p>These values control how “chunky” the display of mathematical
|
|
expressions will be; that is, how often the equations will be
|
|
updated as they are processed.</p>
|
|
<p><tt class="docutils literal"><span class="pre">EqnChunk</span></tt> is the number of equations that will be typeset before
|
|
they appear on screen. Larger values make for less visual flicker
|
|
as the equations are drawn, but also mean longer delays before the
|
|
reader sees anything.</p>
|
|
<p><tt class="docutils literal"><span class="pre">EqChunkFactor</span></tt> is the factor by which the <tt class="docutils literal"><span class="pre">EqnChunk</span></tt> will
|
|
grow after each chunk is displayed.</p>
|
|
<p><tt class="docutils literal"><span class="pre">EqChunkDelay</span></tt> is the time (in milliseconds) to delay between
|
|
chunks (to allow the browser to respond to other user
|
|
interaction).</p>
|
|
<p>Set <tt class="docutils literal"><span class="pre">EqnChunk</span></tt> to 1, <tt class="docutils literal"><span class="pre">EqnChunkFactor</span></tt> to 1, and
|
|
<tt class="docutils literal"><span class="pre">EqnChunkDelay</span></tt> to 10 to get the behavior from MathJax v1.1 and
|
|
below.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">linebreaks: {}</tt></dt>
|
|
<dd><p>This is an object that configures automatic linebreaking in the
|
|
HTML-CSS output. In order to be backward compatible with earlier
|
|
versions of MathJax, only explicit line breaks are performed by
|
|
default, so you must enable line breaks if you want automatic
|
|
ones. The object contains the following values:</p>
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">automatic: false</tt></dt>
|
|
<dd><p>This controls the automatic breaking of expressions: when
|
|
<tt class="docutils literal"><span class="pre">false</span></tt>, only <tt class="docutils literal"><span class="pre">linebreak="newline"</span></tt> is processed; when
|
|
<tt class="docutils literal"><span class="pre">true</span></tt>, line breaks are inserted automatically in long
|
|
expressions.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">width: "container"</tt></dt>
|
|
<dd><p>This controls how wide the lines of mathematics can be.</p>
|
|
<p>Use an explicit width like <tt class="docutils literal"><span class="pre">"30em"</span></tt> for a fixed width.
|
|
Use <tt class="docutils literal"><span class="pre">"container"</span></tt> to compute the size from the containing
|
|
element.
|
|
Use <tt class="docutils literal"><span class="pre">"nn%</span> <span class="pre">container"</span></tt> for a portion of the container.
|
|
Use <tt class="docutils literal"><span class="pre">"nn%"</span></tt> for a portion of the window size.</p>
|
|
<p>The container-based widths may be slower, and may not produce
|
|
the expected results if the layout width changes due to the
|
|
removal of previews or inclusion of mathematics during
|
|
typesetting.</p>
|
|
</dd></dl>
|
|
|
|
</dd></dl>
|
|
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">styles: {}</tt></dt>
|
|
<dd><p>This is a list of CSS declarations for styling the HTML-CSS
|
|
output. See the definitions in <tt class="docutils literal"><span class="pre">jax/output/HTML-CSS/config.js</span></tt>
|
|
for some examples of what are defined by default. See <a class="reference internal" href="../CSS-styles.html#css-style-objects"><em>CSS
|
|
Style Objects</em></a> for details on how to specify
|
|
CSS style in a JavaScript object.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">showMathMenu: true</tt></dt>
|
|
<dd><p>This value has been moved to the core configuration block, since
|
|
it applies to all output jax, but it will still be honored (for
|
|
now) if it is set here. See the <a class="reference internal" href="hub.html#configure-hub"><em>Core configuration options</em></a> for more details.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">tooltip: { ... }</tt></dt>
|
|
<dd><p>This sets the configuration options for <tt class="docutils literal"><span class="pre"><maction></span></tt> elements
|
|
with <tt class="docutils literal"><span class="pre">actiontype="tooltip"</span></tt>. (See also the <tt class="docutils literal"><span class="pre">#MathJax_Tooltip</span></tt>
|
|
style setting in <tt class="docutils literal"><span class="pre">jax/output/HTML-CSS/config.js</span></tt>, which can be
|
|
overridden using the <tt class="docutils literal"><span class="pre">styles</span></tt> option above.)</p>
|
|
<p>The <tt class="docutils literal"><span class="pre">tooltip</span></tt> section can contain the following options:</p>
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">delayPost: 600</tt></dt>
|
|
<dd><p>The delay (in milliseconds) before the tooltip is posted after
|
|
the mouse is moved over the <tt class="docutils literal"><span class="pre">maction</span></tt> element.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">delayClear: 600</tt></dt>
|
|
<dd><p>The delay (in milliseconds) before the tooltop is cleared
|
|
after the mouse moves out of the <tt class="docutils literal"><span class="pre">maction</span></tt> element.</p>
|
|
</dd></dl>
|
|
|
|
<dl class="describe">
|
|
<dt>
|
|
<tt class="descname">offsetX: 10</tt></dt>
|
|
<dt>
|
|
<tt class="descname">offsetY: 5</tt></dt>
|
|
<dd><p>These are the offset from the mouse position (in pixels)
|
|
where the tooltip will be placed.</p>
|
|
</dd></dl>
|
|
|
|
</dd></dl>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sphinxsidebar">
|
|
<div class="sphinxsidebarwrapper">
|
|
<h4>Previous topic</h4>
|
|
<p class="topless"><a href="AsciiMath.html"
|
|
title="previous chapter">The AsciiMath input processor</a></p>
|
|
<h4>Next topic</h4>
|
|
<p class="topless"><a href="NativeMML.html"
|
|
title="next chapter">The NativeMML output processor</a></p>
|
|
<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="NativeMML.html" title="The NativeMML output processor"
|
|
>next</a> |</li>
|
|
<li class="right" >
|
|
<a href="AsciiMath.html" title="The AsciiMath input processor"
|
|
>previous</a> |</li>
|
|
<li><a href="../index.html">MathJax v2.0 documentation</a> »</li>
|
|
<li><a href="index.html" >Configuration Objects</a> »</li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer">
|
|
© Copyright 2012 Design Science.
|
|
Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.0.7.
|
|
</div>
|
|
|
|
</body>
|
|
</html> |