/usr/share/doc/libjs-mathjax-doc/html/output.html is in libjs-mathjax-doc 2.7+20171212-1.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 | <!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MathJax Output Formats — MathJax 2.7 documentation</title>
<link rel="stylesheet" href="_static/css/theme.css" type="text/css" />
<link rel="index" title="Index"
href="genindex.html"/>
<link rel="search" title="Search" href="search.html"/>
<link rel="top" title="MathJax 2.7 documentation" href="index.html"/>
<link rel="next" title="MathJax Font Support" href="font-support.html"/>
<link rel="prev" title="MathJax AsciiMath Support" href="asciimath.html"/>
<script src="_static/js/modernizr.min.js"></script>
</head>
<body class="wy-body-for-nav" role="document">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-scroll">
<div class="wy-side-nav-search">
<a href="index.html" class="icon icon-home"> MathJax
</a>
<div class="version">
2.7
</div>
<div role="search">
<form id="rtd-search-form" class="wy-form" action="search.html" method="get">
<input type="text" name="q" placeholder="Search docs" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
</div>
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
<p class="caption"><span class="caption-text">Basic Usage</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="mathjax.html">What is MathJax?</a></li>
<li class="toctree-l1"><a class="reference internal" href="start.html">Getting Started with MathJax</a></li>
<li class="toctree-l1"><a class="reference internal" href="installation.html">Installing and Testing MathJax</a></li>
<li class="toctree-l1"><a class="reference internal" href="configuration.html">Loading and Configuring MathJax</a></li>
<li class="toctree-l1"><a class="reference internal" href="config-files.html">Combined MathJax Configurations</a></li>
</ul>
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="tex.html">MathJax TeX and LaTeX Support</a></li>
<li class="toctree-l1"><a class="reference internal" href="mathml.html">MathJax MathML Support</a></li>
<li class="toctree-l1"><a class="reference internal" href="asciimath.html">MathJax AsciiMath Support</a></li>
<li class="toctree-l1 current"><a class="current reference internal" href="#">MathJax Output Formats</a><ul>
<li class="toctree-l2"><a class="reference internal" href="#mathjax-output-components">MathJax Output Components</a></li>
<li class="toctree-l2"><a class="reference internal" href="#automatic-line-breaking">Automatic Line Breaking</a></li>
<li class="toctree-l2"><a class="reference internal" href="#automatic-selection-of-the-output-processor">Automatic Selection of the Output Processor</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#htmlormml-extension-deprecated"><cite>HTMLorMML</cite> extension (deprecated)</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="#html-css-extensions">HTML-CSS Extensions</a></li>
<li class="toctree-l2"><a class="reference internal" href="#viewport-meta-tag">Viewport meta tag</a></li>
<li class="toctree-l2"><a class="reference internal" href="#internet-explorer-emulation-modes">Internet Explorer Emulation modes</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="font-support.html">MathJax Font Support</a></li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="localization.html">MathJax Localization</a></li>
<li class="toctree-l1"><a class="reference internal" href="safe-mode.html">MathJax Safe-mode</a></li>
</ul>
<ul>
<li class="toctree-l1"><a class="reference internal" href="community.html">The MathJax Community</a></li>
</ul>
<p class="caption"><span class="caption-text">Configuration options</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="options/index.html">Configuration options</a></li>
</ul>
<p class="caption"><span class="caption-text">Advanced topics</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="advanced/model.html">The MathJax Processing Model</a></li>
<li class="toctree-l1"><a class="reference internal" href="advanced/startup.html">The MathJax Startup Sequence</a></li>
<li class="toctree-l1"><a class="reference internal" href="advanced/synchronize.html">Synchronizing Your Code with MathJax</a></li>
<li class="toctree-l1"><a class="reference internal" href="advanced/dynamic.html">Loading MathJax Dynamically</a></li>
<li class="toctree-l1"><a class="reference internal" href="advanced/typeset.html">Modifying Math on the Page</a></li>
<li class="toctree-l1"><a class="reference internal" href="advanced/toMathML.html">Obtaining the MathML for an Expression</a></li>
<li class="toctree-l1"><a class="reference internal" href="advanced/extension-writing.html">Writing MathJax Extensions</a></li>
<li class="toctree-l1"><a class="reference internal" href="advanced/debugging-tips.html">Debugging Tips</a></li>
<li class="toctree-l1"><a class="reference internal" href="advanced/mathjax-node.html">MathJax on NodeJS</a></li>
</ul>
<p class="caption"><span class="caption-text">The MathJax API</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="api/index.html">Details of the MathJax API</a></li>
</ul>
<p class="caption"><span class="caption-text">Miscellanea</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="misc/accessibility-features.html">Accessibility features</a></li>
<li class="toctree-l1"><a class="reference internal" href="misc/browser-compatibility.html">Browser Compatibility</a></li>
<li class="toctree-l1"><a class="reference internal" href="misc/epub.html">EPUB3 Reading Systems</a></li>
<li class="toctree-l1"><a class="reference internal" href="misc/badges.html">MathJax Badges and Logo</a></li>
<li class="toctree-l1"><a class="reference internal" href="misc/articles.html">Articles and Presentations</a></li>
<li class="toctree-l1"><a class="reference internal" href="misc/platforms.html">Using MathJax in Web Platforms</a></li>
<li class="toctree-l1"><a class="reference internal" href="misc/faq.html">MathJax FAQ</a></li>
<li class="toctree-l1"><a class="reference internal" href="misc/mathjax-in-use.html">MathJax in Use</a></li>
</ul>
<p class="caption"><span class="caption-text">Upgrading MathJax</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="upgrading/index.html">Upgrading MathJax</a></li>
</ul>
<p class="caption"><span class="caption-text">Reference Pages</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="reference/HTML-snippets.html">HTML snippets</a></li>
<li class="toctree-l1"><a class="reference internal" href="reference/CSS-styles.html">CSS style objects</a></li>
<li class="toctree-l1"><a class="reference internal" href="reference/localization-strings.html">Localization strings</a></li>
<li class="toctree-l1"><a class="reference internal" href="reference/glossary.html">Glossary</a></li>
</ul>
</div>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
<nav class="wy-nav-top" role="navigation" aria-label="top navigation">
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="index.html">MathJax</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="breadcrumbs navigation">
<ul class="wy-breadcrumbs">
<li><a href="index.html">Docs</a> »</li>
<li>MathJax Output Formats</li>
<li class="wy-breadcrumbs-aside">
<a href="_sources/output.rst.txt" rel="nofollow"> View page source</a>
</li>
</ul>
<hr/>
</div>
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
<div itemprop="articleBody">
<div class="section" id="mathjax-output-formats">
<span id="output-formats"></span><h1>MathJax Output Formats<a class="headerlink" href="#mathjax-output-formats" title="Permalink to this headline">¶</a></h1>
<div class="section" id="mathjax-output-components">
<h2>MathJax Output Components<a class="headerlink" href="#mathjax-output-components" title="Permalink to this headline">¶</a></h2>
<p>Currently, MathJax can render math in three ways:</p>
<ul class="simple">
<li>Using HTML-with-CSS to lay out the mathematics,</li>
<li>Using <a class="reference internal" href="reference/glossary.html#term-svg"><span class="xref std std-term">SVG</span></a> to lay out the mathematics, or</li>
<li>Using a browser’s native MathML support.</li>
</ul>
<p>These are implemented by the <cite>CommonHTML</cite>, <cite>HTML-CSS</cite>, and <cite>PreviewHTML</cite> output processors, the <cite>SVG</cite> output processor, and the <cite>NativeMML</cite> output processor respectively. In addition, the <cite>PlainSource</cite> output is a convenience and accessibility output, rendering the source as plain text.</p>
<p>If you are using one of the combined configuration files, then this will
select one of these output processors for you. If the config file ends in
<code class="docutils literal"><span class="pre">_CHTML</span></code>, then it is the CommonHTML output processor, if it ends in <code class="docutils literal"><span class="pre">_HTML</span></code>, then it is the HTML-CSS output processor, and if it ends in
<code class="docutils literal"><span class="pre">_SVG</span></code> then the SVG output processor will be used. If it ends in
<code class="docutils literal"><span class="pre">_HTMLorMML</span></code>, HTML-CSS output will be used except on Internet Explorer 9 or below with the MathPlayer plugin; cf. <a class="reference internal" href="#mml-or-html"><span class="std std-ref">HTMLorMML extension (deprecated)</span></a>.</p>
<p>If you are performing your own in-line or file-based configuration,
you select which one you want to use by including either
<code class="docutils literal"><span class="pre">"output/CommonHTML"</span></code>, <code class="docutils literal"><span class="pre">"output/SVG"</span></code>, or <code class="docutils literal"><span class="pre">"output/NativeMML"</span></code> in
the <cite>jax</cite> array of your MathJax configuration. For example</p>
<div class="highlight-javascript"><div class="highlight"><pre><span></span><span class="nx">jax</span><span class="o">:</span> <span class="p">[</span><span class="s2">"input/TeX"</span><span class="p">,</span><span class="s2">"output/CommonHTML"</span><span class="p">]</span>
</pre></div>
</div>
<p>would specify TeX input and CommonHTML output for the mathematics
in your document.</p>
<p>The <strong>CommonHTML output processor</strong> produces high-quality output in all modern browsers, with results that are consistent across browsers and operating systems. This is MathJax’s primary output mode since MathJax v2.6. Its major advantage is its quality, consistency, and speed as well as support for server-side generation. Its browser supports starts with IE9 and equivalent browsers and it degrades gracefully on older browsers.
The CommonHTML output uses web-based fonts so that users don’t have to have math fonts installed on their computers. It currently only supports MathJax’s default TeX fonts.</p>
<p>The <strong>HTML-CSS output processor</strong> produces high-quality output in all
browsers, with results that are consistent across browsers and
operating systems. This was MathJax’s primary output mode prior to MathJax v2.6. Its major
advantage is its quality and consistency on legacy browsers starting with IE6.
The HTML-CSS output uses web-based
fonts so that users don’t have to have math fonts installed on their
computers but can use locally installed fonts instead.</p>
<p>The <strong>SVG output processor</strong> uses <cite>Scalable Vector Graphics</cite> to render the mathematics on the page.
SVG is supported in all the major browsers and most mobile devices;
note, however, that Internet Explorer prior to IE9 does not support
SVG, and IE9 only does in “IE9 standards mode”, nor its emulation
modes for earlier versions. The SVG output mode is high quality and
slightly faster than HTML-CSS, and it does not suffer from some of the
font-related issues that HTML-CSS does, so prints well in all
browsers. Since it uses SVG data instead of font files, it is not affected by user based web-font blocking. The disadvantages of this mode are the following: first, it does not
take advantage of locally installed fonts, and so only has access to the characters
in its (pseudo) web-based fonts, and second, its variable-width tables become
fixed size once they are typeset, and don’t rescale if the window size
changes (for example). Since equation numbers are handled through
variable-width tables, that means equation numbers may not stay at the
edge of the window if it is resized.</p>
<p>The <strong>NativeMML output processor</strong> uses the browser’s internal MathML
support (if any) to render the mathematics. Currently, Firefox has
native support for MathML, and IE has the <a class="reference external" href="http://www.dessci.com/en/products/mathplayer/">MathPlayer plugin</a> for rendering
MathML. Opera has some built-in support for MathML that works well
with simple equations, but fails with more complex formulas, so we
don’t recommend using the NativeMML output processor with Opera.
Safari has some support for MathML since version 5.1, but the quality
is not as high as either Firefox’s implementation or IE with MathPlayer.
Chrome, Konqueror, and most other browsers don’t support MathML
natively, but this may change in the future, since MathML is part of
the HTML5 specification.</p>
<p>The advantage of the NativeMML output processor is its speed, since
native MathML support is usually faster than converting to HTML-with-CSS and SVG
The disadvantage is that you are dependent on the browser’s MathML
implementation for your rendering, and these vary in quality of output
and completeness of implementation. MathJax relies on features that
are not available in some renderers (for example, Firefox’s MathML
support does not implement the features needed for labeled equations).
While MathJax’s NativeMML output processor works around various limitations of Firefox/Gecko and Safari/WebKit, the results using the NativeMML output processor may have spacing or
other rendering problems that are outside of MathJax’s control.</p>
<p>The <strong>PreviewHTML output processor</strong> produces fast but low-quality output in all modern browsers. It is designed to serve as a fast preview mode as its layout quality is nowhere near the quality of the CommonHTML, HTML-CSS, and SVG output processors. Its major advantage is its speed. Its browser supports starts with IE8. It uses locally installed Times-like fonts and does not load any webfonts.</p>
<p>The <strong>PlainSource output processor</strong> injects the plain text source of the equations instead; if the input is MathML, the output processor will prefer TeX and AsciiMath notation (in that order) if it is available in <code class="docutils literal"><span class="pre"><annotation></span></code> elements. This output is a convenience output for users who prefer raw source, e.g., users who need to copy&paste larger document fragments and users of assistive technologies.</p>
</div>
<div class="section" id="automatic-line-breaking">
<span id="automatic-linebreaking"></span><h2>Automatic Line Breaking<a class="headerlink" href="#automatic-line-breaking" title="Permalink to this headline">¶</a></h2>
<p>The CommonHTML, HTML-CSS, and SVG output processors implement (most of) the MathML3
automatic line-breaking specification. (The NativeMML output
processor relies on the browser’s native MathML support to handle line
breaking when it is used.) Since line-breaking takes extra processing
and so can slow down the mathematical output, it is off by default,
but you can enable it by adding, e.g.,</p>
<div class="highlight-html"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/x-mathjax-config"</span><span class="p">></span>
<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="nx">CommonHTML</span><span class="o">:</span> <span class="p">{</span> <span class="nx">linebreaks</span><span class="o">:</span> <span class="p">{</span> <span class="nx">automatic</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span> <span class="p">},</span>
<span class="s2">"HTML-CSS"</span><span class="o">:</span> <span class="p">{</span> <span class="nx">linebreaks</span><span class="o">:</span> <span class="p">{</span> <span class="nx">automatic</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span> <span class="p">},</span>
<span class="nx">SVG</span><span class="o">:</span> <span class="p">{</span> <span class="nx">linebreaks</span><span class="o">:</span> <span class="p">{</span> <span class="nx">automatic</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}</span> <span class="p">}</span>
<span class="p">});</span>
<span class="p"></</span><span class="nt">script</span><span class="p">></span>
</pre></div>
</div>
<p>to your page just before the <code class="docutils literal"><span class="pre"><script></span></code> tag that loads
<code class="docutils literal"><span class="pre">MathJax.js</span></code> itself.</p>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">Line breaking only applies to displayed equations, not
in-line equations (unless the in-line equation is itself longer than a
line), and that the line-breaks are only computed once when the
equation is initially typeset, and do not change if the user changes
the window size, or if the container changes size for some other
reason.</p>
</div>
<p>You can control what width is used to determine where the line breaks
shoud occur using the <code class="docutils literal"><span class="pre">container</span></code> parameter of the <code class="docutils literal"><span class="pre">linebreaks</span></code>
block. By default it is the width of the containing element, but you
can make it a fixed width, or make it a percentage of the container.
See the <a class="reference internal" href="options/output-processors/CommonHTML.html#configure-commonhtml"><span class="std std-ref">CommonHTML configuration</span></a>,
<a class="reference internal" href="options/output-processors/HTML-CSS.html#configure-html-css"><span class="std std-ref">HTML-CSS configuration</span></a>, or
<a class="reference internal" href="options/output-processors/SVG.html#configure-svg"><span class="std std-ref">SVG configuration</span></a> pages for more details.</p>
<p>Note that breaks occur only at operations and relations or at
explicit space, but not, for example, in the middle two consecutive
identifiers.</p>
<p>The line-breaking algorithm uses the nesting depth, the type of
operator, the size of spaces, and other factors to decide on the
breakpoints, but it does not know the meaning of the mathematics, and
may not choose the optimal breakpoints. We continue to work on
the algorithm as we gain information from its actual use in the field.
If you are using <a class="reference internal" href="reference/glossary.html#term-mathml"><span class="xref std std-term">MathML</span></a> as your input format, you can use the
<code class="docutils literal"><span class="pre">linebreak="newline"</span></code>, <code class="docutils literal"><span class="pre">linebreak="goodbreak"</span></code>,
<code class="docutils literal"><span class="pre">linebreak="badbreak"</span></code>, and <code class="docutils literal"><span class="pre">linebreak="nobreak"</span></code> attributes on
<code class="docutils literal"><span class="pre"><mo></span></code> elements to help MathJax pick the best breakpoints for your
mathematics; nested <code class="docutils literal"><span class="pre"><mrow></span></code> elements will reduce the risk of
breaking its children apart. For TeX input, you can use MathJax’s
non-standard <code class="docutils literal"><span class="pre">mmltoken</span></code> macro (e.g.,
<code class="docutils literal"><span class="pre">\mmlToken{mo}[linebreak="goodbreak"]{}</span></code>) and braces <code class="docutils literal"><span class="pre">{...}</span></code>
respectively to achieve analoguous effects.</p>
</div>
<div class="section" id="automatic-selection-of-the-output-processor">
<span id="automatic-output-switch"></span><h2>Automatic Selection of the Output Processor<a class="headerlink" href="#automatic-selection-of-the-output-processor" title="Permalink to this headline">¶</a></h2>
<p>Since not all browsers support MathML natively, it would be unwise to
choose the NativeMML output processor unless you are sure of your
audience’s browser capabilities. Similarly, you might want more control over which platforms use which renderer.</p>
<p>While MathJax used to provide an extension to handle switching between HTML-CSS and NativeMML output, this limited extension was deprecated in MathJax v2.6.</p>
<p>Instead, you can use the regular MathJax configuration methods to define which output to use where.</p>
<p>In general, you can do the following:</p>
<div class="highlight-html"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/x-mathjax-config"</span><span class="p">></span>
<span class="nx">MathJax</span><span class="p">.</span><span class="nx">Hub</span><span class="p">.</span><span class="nx">Register</span><span class="p">.</span><span class="nx">StartupHook</span><span class="p">(</span><span class="s2">"End Jax"</span><span class="p">,</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">BROWSER</span> <span class="o">=</span> <span class="nx">MathJax</span><span class="p">.</span><span class="nx">Hub</span><span class="p">.</span><span class="nx">Browser</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">jax</span> <span class="o">=</span> <span class="s2">"HTML-CSS"</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">BROWSER</span><span class="p">.</span><span class="nx">isMSIE</span> <span class="o">&&</span> <span class="nx">BROWSER</span><span class="p">.</span><span class="nx">hasMathPlayer</span><span class="p">)</span> <span class="nx">jax</span> <span class="o">=</span> <span class="s2">"NativeMML"</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">MathJax</span><span class="p">.</span><span class="nx">Hub</span><span class="p">.</span><span class="nx">setRenderer</span><span class="p">(</span><span class="nx">jax</span><span class="p">);</span>
<span class="p">});</span>
<span class="p"></</span><span class="nt">script</span><span class="p">></span>
</pre></div>
</div>
<p>This does essentially what the <code class="docutils literal"><span class="pre">MMLorHTML</span></code> configuration did in its default settings. You can, of course, substitute whatever output you want in place of <cite>HTML-CSS</cite> or <cite>NativeMML,</cite> and you can add other if-then statements for other browsers. E.g.,</p>
<div class="highlight-html"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/x-mathjax-config"</span><span class="p">></span>
<span class="nx">MathJax</span><span class="p">.</span><span class="nx">Hub</span><span class="p">.</span><span class="nx">Register</span><span class="p">.</span><span class="nx">StartupHook</span><span class="p">(</span><span class="s2">"End Jax"</span><span class="p">,</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">BROWSER</span> <span class="o">=</span> <span class="nx">MathJax</span><span class="p">.</span><span class="nx">Hub</span><span class="p">.</span><span class="nx">Browser</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">jax</span> <span class="o">=</span> <span class="s2">"HTML-CSS"</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">BROWSER</span><span class="p">.</span><span class="nx">isMSIE</span> <span class="o">&&</span> <span class="nx">BROWSER</span><span class="p">.</span><span class="nx">hasMathPlayer</span><span class="p">)</span> <span class="nx">jax</span> <span class="o">=</span> <span class="s2">"NativeMML"</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">BROWSER</span><span class="p">.</span><span class="nx">isFirefox</span><span class="p">)</span> <span class="nx">jax</span> <span class="o">=</span> <span class="s2">"SVG"</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">BROWSER</span><span class="p">.</span><span class="nx">isSafari</span> <span class="o">&&</span> <span class="nx">BROWSER</span><span class="p">.</span><span class="nx">versionAtLeast</span><span class="p">(</span><span class="s2">"5.0"</span><span class="p">))</span> <span class="nx">jax</span> <span class="o">=</span> <span class="s2">"NativeMML"</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">MathJax</span><span class="p">.</span><span class="nx">Hub</span><span class="p">.</span><span class="nx">setRenderer</span><span class="p">(</span><span class="nx">jax</span><span class="p">);</span>
<span class="p">});</span>
<span class="p"></</span><span class="nt">script</span><span class="p">></span>
</pre></div>
</div>
<p>This illustrates using <cite>BROWSER.versionAtLeast()</cite> to make some decisions. You can, of course, be as complicated as you like about making the choices. For example, you could detect if a user is blocking web-fonts and switch to SVG output (which does not rely on fonts but SVG data files).</p>
<p>If you want something that is more backward compatible with <cite>MMLorHTML</cite> (i.e., if you have pages that configure <cite>MMLorHTML</cite> one way and other apges that configure it another way), here is a version that uses the old <cite>MMLorHTML</cite>’s <cite>“prefer”</cite> object, and only sets MathML mode if they browser can handle that.</p>
<div class="highlight-html"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/x-mathjax-config"</span><span class="p">></span>
<span class="nx">MathJax</span><span class="p">.</span><span class="nx">Hub</span><span class="p">.</span><span class="nx">Register</span><span class="p">.</span><span class="nx">StartupHook</span><span class="p">(</span><span class="s2">"End Jax"</span><span class="p">,</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">BROWSER</span> <span class="o">=</span> <span class="nx">MathJax</span><span class="p">.</span><span class="nx">Hub</span><span class="p">.</span><span class="nx">Browser</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">canUseMML</span> <span class="o">=</span> <span class="p">(</span><span class="nx">BROWSER</span><span class="p">.</span><span class="nx">isFirefox</span> <span class="o">&&</span> <span class="nx">BROWSER</span><span class="p">.</span><span class="nx">versionAtLeast</span><span class="p">(</span><span class="s2">"1.5"</span><span class="p">))</span> <span class="o">||</span>
<span class="p">(</span><span class="nx">BROWSER</span><span class="p">.</span><span class="nx">isMSIE</span> <span class="o">&&</span> <span class="nx">BROWSER</span><span class="p">.</span><span class="nx">hasMathPlayer</span><span class="p">)</span> <span class="o">||</span>
<span class="p">(</span><span class="nx">BROWSER</span><span class="p">.</span><span class="nx">isSafari</span> <span class="o">&&</span> <span class="nx">BROWSER</span><span class="p">.</span><span class="nx">versionAtLeast</span><span class="p">(</span><span class="s2">"5.0"</span><span class="p">))</span> <span class="o">||</span>
<span class="p">(</span><span class="nx">BROWSER</span><span class="p">.</span><span class="nx">isOpera</span> <span class="o">&&</span> <span class="nx">BROWSER</span><span class="p">.</span><span class="nx">versionAtLeast</span><span class="p">(</span><span class="s2">"9.52"</span><span class="p">)</span> <span class="o">&&</span>
<span class="o">!</span><span class="nx">BROWSER</span><span class="p">.</span><span class="nx">versionAtLeast</span><span class="p">(</span><span class="s2">"14.0"</span><span class="p">));</span>
<span class="kd">var</span> <span class="nx">CONFIG</span> <span class="o">=</span> <span class="nx">MathJax</span><span class="p">.</span><span class="nx">Hub</span><span class="p">.</span><span class="nx">CombineConfig</span><span class="p">(</span><span class="s2">"MMLorHTML"</span><span class="p">,{</span>
<span class="nx">prefer</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">MSIE</span><span class="o">:</span><span class="s2">"MML"</span><span class="p">,</span> <span class="nx">Firefox</span><span class="o">:</span><span class="s2">"HTML"</span><span class="p">,</span> <span class="nx">Opera</span><span class="o">:</span><span class="s2">"HTML"</span><span class="p">,</span> <span class="nx">Chrome</span><span class="o">:</span><span class="s2">"HTML"</span><span class="p">,</span> <span class="nx">Safari</span><span class="o">:</span><span class="s2">"HTML"</span><span class="p">,</span>
<span class="nx">other</span><span class="o">:</span><span class="s2">"HTML"</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">jax</span> <span class="o">=</span> <span class="nx">CONFIG</span><span class="p">.</span><span class="nx">prefer</span><span class="p">[</span><span class="nx">BROWSER</span><span class="p">]</span> <span class="o">||</span> <span class="nx">CONFIG</span><span class="p">.</span><span class="nx">prefer</span><span class="p">.</span><span class="nx">other</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">jax</span> <span class="o">===</span> <span class="s2">"HTML"</span><span class="p">)</span> <span class="nx">jax</span> <span class="o">=</span> <span class="s2">"HTML-CSS"</span><span class="p">;</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">jax</span> <span class="o">===</span> <span class="s2">"MML"</span><span class="p">)</span> <span class="nx">jax</span> <span class="o">=</span> <span class="s2">"NativeMML"</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">jax</span> <span class="o">===</span> <span class="s2">"NativeMML"</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">canUseMML</span><span class="p">)</span> <span class="nx">jax</span> <span class="o">=</span> <span class="nx">CONFIG</span><span class="p">.</span><span class="nx">prefer</span><span class="p">.</span><span class="nx">other</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">MathJax</span><span class="p">.</span><span class="nx">Hub</span><span class="p">.</span><span class="nx">setRenderer</span><span class="p">(</span><span class="nx">jax</span><span class="p">);</span>
<span class="p">});</span>
<span class="p"></</span><span class="nt">script</span><span class="p">></span>
</pre></div>
</div>
<p>The deprecated <code class="docutils literal"><span class="pre">MMLorHTML</span></code> extension also included version checking to see if MathJax is supported in the browser, but there shouldn’t be a need for that any longer as those older browsers (IE5 and below) just aren’t used any more.</p>
<div class="section" id="htmlormml-extension-deprecated">
<span id="mml-or-html"></span><h3><cite>HTMLorMML</cite> extension (deprecated)<a class="headerlink" href="#htmlormml-extension-deprecated" title="Permalink to this headline">¶</a></h3>
<div class="admonition warning">
<p class="first admonition-title">Warning</p>
<p class="last">This extension has been deprecated in MathJax v2.6.</p>
</div>
<p>With the decline of MathPlayer, the general lack of development of native MathML implementations, and the increase in output options in MathJax, we have decided to deprecate the <code class="docutils literal"><span class="pre">HTMLorMML</span></code> extension in MathJax v2.6.</p>
<p>Originally, a number of combined configuration files would select
NativeMML output when the browser supports it well enough, and
HTML-CSS output otherwise. These are the configuration files that end
in <code class="docutils literal"><span class="pre">_HTMLorMML</span></code>.</p>
<p>These configurations added the <code class="docutils literal"><span class="pre">"MMLorHTML.js"</span></code> extension to
your configuration’s <cite>config</cite> array, and they would not include an output
processor in your <cite>jax</cite> array; MathJax will fill that in for you based on
the abilities of your user’s browser.</p>
<p>By default, this extension would choose HTML-CSS in all browsers except for one case: Internet Explorer 9 and below when the MathPlayer plugin is present.</p>
<p>In recent versions of MathJax, this extension would choose HTML-CSS in all Internet Explorer versions when the MathPlayer plugin is present. However, due to lack of support for MathPlayer in Internet Explorer 10 and above, we have restricted this further. In the v1.x releases, MathJax selected NativeMML output for Firefox as well, but we have found that there are too many rendering issues with Firefox’s native MathML implementation, and so MathJax v2.0+ selected
HTML-CSS output for Firefox by default as well.</p>
<p>Users can still use the Mathjax contextual menu to select the NativeMML renderer if they wish to.</p>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">See the <code class="docutils literal"><span class="pre">config/default.js</span></code> file or the
<a class="reference internal" href="options/output-processors/MMLorHTML.html#configure-mmlorhtml"><span class="std std-ref">Configuring MMLorHTML</span></a> section for further
details.</p>
</div>
</div>
</div>
<div class="section" id="html-css-extensions">
<h2>HTML-CSS Extensions<a class="headerlink" href="#html-css-extensions" title="Permalink to this headline">¶</a></h2>
<p>The HTML-CSS output jax uses elements with width set to 100% when it
typesets displayed equations. If there are floating elements on the
left or right, this can mean that displayed mathematics isn’t properly
centered, and can cause equation numbers to overlap the floating
content. To avoid this, you can specify the <cite>handle-floats</cite> extension
in the <cite>extensions</cite> array of your <cite>HTML-CSS</cite> configuration block.</p>
<div class="highlight-javascript"><div class="highlight"><pre><span></span><span class="s2">"HTML-CSS"</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">extensions</span><span class="o">:</span> <span class="p">[</span><span class="s2">"handle-floats.js"</span><span class="p">]</span>
<span class="p">}</span>
</pre></div>
</div>
<p>This will use CSS that puts the displayed equations into elements that
work like tabel cells, and won’t overlap the floaring content.
Because this is somewhat of a misuse of CSS, it is not used by
default, but it has proved successful in most situations, so you may
consider using it in pages that include material that floats to the
left or right of text containing displayed mathematics, especially
when equation numbers or tags are used.</p>
<p>See the <a class="reference internal" href="options/output-processors/HTML-CSS.html#configure-html-css"><span class="std std-ref">HTML-CSS configuration options</span></a> for
other options of the HTML-CSS output jax.</p>
</div>
<div class="section" id="viewport-meta-tag">
<h2>Viewport meta tag<a class="headerlink" href="#viewport-meta-tag" title="Permalink to this headline">¶</a></h2>
<p>The meta viewport tag provides the browser with instructions regarding viewports and zooming. This way, web developers can control how a webpage is displayed on a mobile device.</p>
<p>Incorrect or missing viewport information can confuse MathJax’s layout process, leading to very small font sizes. We recommend to use standard values such as the following:</p>
<div class="highlight-html"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="p">></span>
</pre></div>
</div>
</div>
<div class="section" id="internet-explorer-emulation-modes">
<span id="ie-emulation-modes"></span><h2>Internet Explorer Emulation modes<a class="headerlink" href="#internet-explorer-emulation-modes" title="Permalink to this headline">¶</a></h2>
<p>Internet Explorer provides so-called emulation modes for backward compatibility to its legacy versions. These emulation modes have been deprecated since Internet Explorer 11, cf. <a class="reference external" href="https://msdn.microsoft.com/en-us/library/jj676915.aspx">Microsoft documentation</a>.</p>
<p>MathJax is fastest when in the standards mode of each IE version, so it is best to force the highest mode possible. That can be accomplished by adding</p>
<div class="highlight-html"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content</span><span class="o">=</span><span class="s">"IE=edge"</span><span class="p">></span>
</pre></div>
</div>
<p>at the top of the <code class="docutils literal"><span class="pre"><head></span></code> section of your HTML documents.</p>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">This line must come at the beginning of the <code class="docutils literal"><span class="pre"><head></span></code>, before
any stylesheets, scripts, or other content are loaded.</p>
</div>
<p>In early versions, we recommended forcing IE8 and IE9 into IE7-emulation
mode in order to get better performance. That is no longer necessary.</p>
<span class="target" id="id1"></span></div>
</div>
</div>
<div class="articleComments">
</div>
</div>
<footer>
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
<a href="font-support.html" class="btn btn-neutral float-right" title="MathJax Font Support" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right"></span></a>
<a href="asciimath.html" class="btn btn-neutral" title="MathJax AsciiMath Support" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left"></span> Previous</a>
</div>
<hr/>
<div role="contentinfo">
<p>
© Copyright 2017 The MathJax Consortium.
</p>
</div>
Built with <a href="http://sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/snide/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>.
</footer>
</div>
</div>
</section>
</div>
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT:'./',
VERSION:'2.7',
COLLAPSE_INDEX:false,
FILE_SUFFIX:'.html',
HAS_SOURCE: true,
SOURCELINK_SUFFIX: '.txt'
};
</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="_static/js/theme.js"></script>
<script type="text/javascript">
jQuery(function () {
SphinxRtdTheme.StickyNav.enable();
});
</script>
</body>
</html>
|