The downcompiling example at https://github.com/mathjax/mathjax-v3/wiki/A-first-usable-demo-(using-webpack) does not work on IE11.

Hi,
I'm trying to fire up mathjax3 using the npm package for alpha-3.

import {MathJax} from "mathjax3/mathjax3/mathjax";
import "mathjax3/mathjax3/handlers/html";
import {AsciiMath} from "mathjax3/mathjax3/input/asciimath";
import {CHTML} from "mathjax3/mathjax3/output/chtml";

I'm getting the following error:
client:167 ./node_modules/mathjax3/mathjax3/input/asciimath.js
Module not found: Error: Can't resolve '../../mathjax2/input/AsciiMath.js' in '/Users/stnor/devel/src/nomp/frontend/nomp/node_modules/mathjax3/mathjax3/input'
@ ./node_modules/mathjax3/mathjax3/input/asciimath.js 38:21-65

Seems like asciimath is not included in the mathjax2 folder, only the css.

Hi,
This is probably not the best format for this question, but do you have an ETA on this being stable/ready for production use?
The only information I could find was on this old stackoverflow post, but I reserve the right to have been looking in the wrong place :-).
Thanks,
John

The font list for stretchy characters should include MJXTEX-A in order to get the glyphs needed for some extensible characters (e.g., some arrows like U+21DB). This is the line that needs to be changed:

https://github.com/mathjax/mathjax-v3/blob/4f951cfb6a3209aa2b4084a35ea0cf2375e606fa/mathjax3-ts/output/chtml/fonts/tex.ts#L252

TypeError: reduce of empty array with no initial value

generated using Chrome/OSX with mj3-demos-master/mj3-mml2html-global.html

with input:

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mtable></mtable>
</math>

This is the simplest case but others also fail in similar way, e.g.,:

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
	<mo>(</mo><mtable><mtr><mtd><mn>1</mn></mtd></mtr></mtable>
</math>

Full traceback:

TypeError: Reduce of empty array with no initial value
    at Array.reduce (<anonymous>)
    at s.computeBBox (mj3-mml2html-global.dist.js:1:192096)
    at s.e.getBBox (mj3-mml2html-global.dist.js:1:15975)
    at s.stretchChildren (mj3-mml2html-global.dist.js:1:171881)
    at new s (mj3-mml2html-global.dist.js:1:170829)
    at node.(anonymous function) (mj3-mml2html-global.dist.js:1:47178)
    at s.t.create (mj3-mml2html-global.dist.js:1:46975)
    at s.wrap (mj3-mml2html-global.dist.js:1:155364)
    at s.e.wrap (mj3-mml2html-global.dist.js:1:15509)
    at mj3-mml2html-global.dist.js:1:15163

For example

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mstyle mathbackground="red">
      <mn>1</mn>
  </mstyle>
</math>

Renders as

in mj3-demos, i.e., the background color is not filling the content's background, only a thin part at the bottom.

When I add

mjx-math * {
    background: inherit;
}

it looks ok but I'm not sure if that has side effects.

This is an action item from last TC call.

You might consider turning on the compiler 'strict' option (see https://www.typescriptlang.org/docs/handbook/compiler-options.html) in your tsconfig, which turns on a few options related to making the type checking more strict. For example, it turns on the strict null checking to help guard against errors involving null or undefined, etc. The nice thing about using 'strict' is that it will automatically updated in each TS release to be the recommended set of strict options. Alternatively, you might look at enabling individually each of the options 'strict' enables.

Moving this conversation to the issue tracker for broader discussion.

@pkra wrote:

The generated stylesheet is very large (500kb / 400kb minified / 40kb zipped).
Even though it compresses well, it is still large compared to, e.g., an MML+HTML distribution (375kb minified, 80kb zipped). And it is (of course) also very large compared to the old stylesheet (2kb zipped).

I'm slightly worried about this.

• it makes server-side processing less interesting as the page size increases not just by the HTML markup but also by the stylesheet - even though, from my tests, the HTML output has decreased in size in real life examples (often not more than MathML)
• in situations where client-side rendering is used but CSP blocking of inline-styles is required, it adds 50% load
• I'm wondering about CSS performance, especially as it interacts with other CSS

@dpvc wrote:

There are several possible approaches to this issue. Right now the CSS includes everything needed for every character in the fonts. It would be possible to generate only the CSS needed on the page. For example, for server-side pre-rendering of non-dynamic pages, this would produce only what is needed. For dynamic pages, it would be possible to generate the CSS as needed by the page, rather than all of it all the time.

Alternatively, the CSS could be broken down into smaller chunks and loaded as needed. For example, the Fraktur, script, sans-serif, and other such variants could be left our initially and loaded by the page author when those variants are desired.

It would also be possible for MathJax to do most of the CSS inline instead, as it is now in v2. It may be that we want to not use the "content" CSS styling but rather insert the character directly. Aside from reducing the CSS size, this would also fix some problems with Safari bugs, and would also allow the removal of the width specifications, as those are to work around a Safari bug that seems to be due to the use of content.

Finally, the fonts need to be reorganized and rebuilt. This will help slim down the CSS, which right now has some awkwardness due to the layout of the current fonts

The current implementation is a rough-and-ready approach that was only to get the output working enough to get the CHTML layout underway. It will need to be revisited when the fonts are reorganized and rebuilt. That will involved building the new font tools, and that will take some time; I didn't want to hold up the release for that. So there are still some iterations to be done for the fonts and their data, and I think that is something to look at early next year.

I can't figure out how to get MathJax3 to parse (only) the current element from my angularjs directive.

I've tried to pass an element (instead of the document) to MathJax.document(), but that doesn't seem to work.
How is one supposed to work with MathJax in a component-based architecture?

      const html = MathJax.document(window.document, {
        InputJax: mathML,
        OutputJax: new CHTML({font: font})
      });

      html.findMath()
          .compile()
          .typeset()
          .updateDocument();
    });

I recently began running into mathjax/MathJax#712 in production, an old issue due to MathML's limitations.

It would be great if v3 could handle this better, i.e., implement TeX's heuristics in the TeX input.

Follow-up question to #137.

[This is an old question of mine.]

Is it conceivable to have MathJax v3 (optionally) provide "non-tight" backgrounds, i.e., something closer to the behavior of CSS?

Or perhaps reversely: is the new layout more stable here to do this manually? E.g., <mstyle mathbackground="red" style="line-height: 1em"><mn>1</mn></mstyle> seems ok from a quick test (but then wouldn't work in an SVG setting).

The following example gives an error of "Misplaced &" when the problem is due to a missing \right) in the second line.

    \begin{align} 
       f(x)& =\left(x^3\right)+\left(x^3+x^2+x^1\right)+\left(x^3+x^2\right)\\ 
       f'(x)& =\left(\left(3x^2+2x+1\right)+\left(3x^2+2x\right) \\ 
       f''(x)& =\left(6x+2\right)\\ \end{align}

After cloning this repository, I ran npm install, which created package-lock.json and modified package.json with the latest versions of some dependencies.

I think including package-lock.json will ensure npm doesn't change package.json for me.

https://github.com/mathjax/mathjax-v3/blob/cd0e103318a08788309da1b4e39cb70458e975ac/mathjax3-ts/input/tex/braket/BraketItems.ts#L82

The closeNode needs texclass close.

The outerHTML method of the LiteAdaptor incorrectly does HTML character escaping on elements whose contents are PCDATA, such as <style> and <script>.

This can be fixed in

https://github.com/mathjax/mathjax-v3/blob/d60e0ec1650ffcfeeee9ff216c386cb87cadb50a/mathjax3-ts/adaptors/lite/Parser.ts#L341-L348

but checking of the node.kind is in the constructor's PCDATA object.

A quick documentation of what I've tried.

branches

I merged the moving_parse_methods1 branch into the stretchy-cells` branch and tried to build an analogous example to https://github.com/mathjax/mathjax-v3/wiki/A-first-usable-demo-(using-webpack).

setup example

• texpage.js

//
// the MathJax core
import  {MathJax} from "./mathjax3/mathjax.js";
// TeX input
import {TeX} from './mathjax3/input/tex.js';

// HTML output
import {CHTML} from "./mathjax3/output/chtml.js";

// handler for HTML documents
import {HTMLHandler} from "./mathjax3/handlers/html/HTMLHandler.js";
MathJax.handlers.register(new HTMLHandler());

// initialize mathjax with with a DOM document (e.g., browser, jsdom); other documents are possible
const html = MathJax.document(document, {
    InputJax: new TeX(),
    OutputJax: new CHTML()
});

window.addEventListener("load", function () {
    console.time('wrapper');
    // process the document
    html.findMath()
        .compile()
        .getMetrics()
        .typeset()
        .updateDocument();
    console.timeEnd('wrapper');
});

• webpack.config

const Uglify = require("uglifyjs-webpack-plugin");
module.exports = {
    entry: './texpage.js',
    output: {
        path: __dirname,
        filename: 'webpack.dist.js'
    },
    plugins: [
        new Uglify()
    ]
};

first problem: relative paths

The first problem came from the paths in the "legacy" code (which according to @zorkow is due to systemjs being weird about them).

So I manually changed anything like require('mathjax3/...') (or similar import statements) to add sufficient ../ prefixes.

QUESTION can we switch over to correct relative paths for the TeX "legacy" code?

I ran the tests after changing the paths and they didn't throw errors but had test failures; thus I'm not sure if there's a problem with using relative paths.

second problem

Once these were changes, webpack could resolve the resources but then ran into an actual problem in the code

ERROR in ./mathjax2/legacy/jax/input/TeX/StackItem.js
Module parse failed: ./mathjax2/legacy/jax/input/TeX/StackItem.js Duplicate constructor in the same class (817:2)
You may need an appropriate loader to handle this file type.
|   }
|
|   constructor(name, numbered, taggable, stack) {
|     super();
|     this.type = 'AMSarray';
 @ ./mathjax2/legacy/extensions/TeX/AMSmath.js 31:12-55
 @ ./mathjax2/input/TeX.js
 @ ./mathjax3/input/tex.js
 @ ./texpage.js

According to @zorkow this is a bug in the current TeX parser code.

Hello,

I'm trying MathJax on my website, but with the following code I get an 'adaptor is not a function' error.

// the MathJax core
const MathJax = require("../../../../node_modules/mathjax3/mathjax3/mathjax.js").MathJax;

// Tex input
const TeX = require("../../../../node_modules/mathjax3/mathjax3/input/tex.js").TeX;
// HTML output
const CHTML = require("../../../../node_modules/mathjax3/mathjax3/output/chtml.js").CHTML;
// Use browser DOM
const adaptor = require("../../../../node_modules/mathjax3/mathjax3/adaptors/browserAdaptor").browserAdaptor();
// Register the HTML document handler
require("../../../../node_modules/mathjax3/mathjax3/handlers/html.js").RegisterHTMLHandler(adaptor());

I tried to change the route to:

const adaptor = require("../../../../node_modules/mathjax3/mathjax3/adaptors/browserAdaptor.js").browserAdaptor();

But it wouldn't work.

Hello there,

First I must say that I am looking forward to MathJax v3, I came across this issue the other day, I am using Node as my rendering pipeline and synchronicity would be great for me.

I am working on a private project similar to Upmath here combining Markdown and LaTex.
I am using Markdown-it together with MathJax, currently it is all working great, but MathJax cannot render some of the examples I am using.
I have noticed the xymatrix and TikZ package as well as some examples of the LaTeX equations for web which Upmath is using.
I am also using this documentation as a reference.

So I think it would be really great if MathJax 3 could have support for these commands.

Thanks

Using the current demo https://mathjax.github.io/mj3-demos/mj3-tex2html-global.html with Firefox/Linux the input \displaystyle\sum (1)\textstyle\sum (1)\scriptstyle\sum (1)\scriptscriptstyle\sum (1) looks like

where the bottom edges of brackets, numbers and operators are aligned, instead of

(LaTeX) or

(math.stackexchange)

This mathml:

	<math><mi>t</mi><mo>·</mo><mfenced open="(" close=")"><mrow><mn>2</mn><mo>+</mo><mn>2</mn></mrow></mfenced><mo>=</mo><mn>3</mn><mo>·</mo><mn>3</mn><mo>+</mo><mn>3</mn></math>

renders as "t * (2 + 2) = 3 * 3 + t" with MathJAX 2.17.

With mathjax-v3 it renders without the parentheses (npm, alpha 3) and same when using your live demo page mj3-mml2html.html (local copy).

Please help.

/Stefan

Using https://mathjax.github.io/mj3-demos/mj3-tex2html-global.html, with input

x = -\left( \begin{array}{cc} a & b \\ c & d\\ x-1 & x_2 +x^{3^4} \\ z 4\\ a & b\end{array} \right)

the extender is missing in Edge (Microsoft Edge 38.14393.0.0; Microsoft EdgeHTML 14.14393). Picture below:

Some other stretchy delims (left { and completely missing right vertical line):
x = -\left\{ \begin{array}{cc} a & b \\ c & d\\ x-1 & x_2 +x^{3^4} \\ z 4\\ a & b\end{array} \right|

Using the current demo https://mathjax.github.io/mj3-demos/mj3-tex2html-global.html with Firefox/Linux and input \begin{align}x \colon y \to z \\ x : y\to z \end{align} results in:

where in the first line the colon should be closer to the x than to the y like in LaTeX:

or MathJax on math.stackexchange:

see https://tex.stackexchange.com/questions/37789 for further discussion of the difference.

I'm not sure where to track this so feel free to move and close this. I picked these up while testing the math.SE tutorial.

• verb
• cancel
• enclose
• AMScd
• extpfeil
• \require

Hi,
MathMLCompile.makeNode uses Elements.classList. which is not supported in IE11 and lower.
Is this by accident or design?

Also, It would be good if errors like this are logged and not only displayed as "Math Input Error".
It's easier to debug if you have a stack trace.

For Safari, the -webkit prefix is needed, and it must be in the styles attribute. For IE, it looks like you need to use url() for this. Perhaps a data URL will work?

There's a wiki page Proposal to refactor tex2jax extension, but from the code and the A first usable demo (using webpack) page it seems to me this already has been implemented.

Please give example on how to configure text2jax in a way it was possible with mathjax v2.
http://docs.mathjax.org/en/latest/options/preprocessors/tex2jax.html

For example, how to implement the following mathjax-v2 configuration in mathjax-v3:

MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [ ['$','$'], ['\\(','\\)'] ]
  }
});

Hi!
Please remove the call to 'this.drawBBox();'
I get really colorful output in beta1 due to this :(

Any plans for pushing a new beta anytime soon?

Using the current demo https://mathjax.github.io/mj3-demos/mj3-tex2html-global.html with Firefox/Linux and input \int_a^b f(x) dx the limits seem to be too far away from the integral:

With an additional align environment \begin{align}\int_a^b f(x) dx\end{align} the b moves closer to the integral:

It looks like the outline CSS that works everywhere else doesn't work in IE, so these will have to be handled explicitly by the SVG renderer rather than falling back on CSS styles.

I am getting a few warnings from AsyncLoad.js. Are you planning to fix these?

client:148 ./node_modules/mathjax3/mathjax3/util/AsyncLoad.js 8:15-34
Critical dependency: the request of a dependency is an expression

client:148 ./node_modules/mathjax3/mathjax3/util/AsyncLoad.js 8:15-34
System.import() is deprecated and will be removed soon. Use import() instead.
For more info visit https://webpack.js.org/guides/code-splitting/

In jupyterlab/jupyter-renderers#69, we made a JupyterLab plugin to use mathjax 3 to render mathematics throughout the system. The rendering layout seems to work okay, except that it is trying to get a bunch of font files which it can't find.

It seems that the font paths are hardcoded at, for example, https://github.com/mathjax/mathjax-v3/blob/master/mathjax3-ts/output/chtml/fonts/tex.ts#L253

JupyterLab uses webpack to bundle all of its js up, and normally if a font file is referenced in a static css file, webpack can find that font file, copy it to the output directory, and change the font reference in the css to point to the right font file location. With Mathjax 3, it seems that webpack doesn't recognize these URLs (things are too dynamic), so it doesn't know to package up the font files and can't change the references to point to the correct location.

I'm not sure a way around this. @zorkow and I just talked about it, and I got the impression that the font references were being dynamically constructed so that they could be lazily loaded. Is that right? Webpack I think essentially does that for you, so maybe that's where this friction is coming up.

v3 currently relies on jsdom when running in nodeJS.

The example in

• https://github.com/mathjax/mathjax-v3/blob/master/samples/replace-html.js
• https://github.com/mathjax/mathjax-v3/blob/master/samples/lib/myHTMLNodes.js
• https://github.com/mathjax/mathjax-v3/blob/master/samples/lib/myDOM.js

implements a minimal replacement.

I'm wondering if that approach should not be the default.

Cf. https://travis-ci.org/mathjax/mathjax-v3/jobs/334943476#L718

In JupyterLab we have multiple continuous documents on the same page (for example, two Jupyter notebooks side by side on a page). Is it (or will it be) possible to have two different states for the mathjax renderer on the same page? For example, equation numbering should be continuous in each Jupyter notebook.

CC @ian-r-rose @mpacer

Move the webworker code into another repository and move the v3 folder contents to the top level.

In the same effort as #68:

We would like to re-render portions of the document many times. I was running into a problem where more than one call to a MathJax document become a no-op, apparently because the fields processed.findMath, processed.compile, etc had been set to true.

Is it not intended that a document get rendered more than once? I was able to force a re-render by manually setting those fields to be true, but it doesn't feel like this is necessarily recommended.

If content extends beyond the bounding box (e.g., via \llap{} or \smash{}) of the <math> element, that content is clipped.

Using overflow: visible on the outermost svg element resolves that.

Sample

$$P(A + B) = \frac{\require{cancel}\cancelto{1}{3}}{\cancel{5}} *
                \frac{\cancel{5}}{\cancelto{3}{9}} = \frac{1}{3}$$

Stretchy characters with no single-character versions can be made too small. For example:

<math>
  <mtable>
    <mtr>
      <mtd>
        <mo minsize=".75em" stretchy="true">&#x23DE;</mo>
      </mtd>
    </mtr>
  </mtable>
</math>

Using the current demo https://mathjax.github.io/mj3-demos/mj3-tex2html-global.html with Firefox/Linux and input \begin{align} \sum_a^b \end{align} the b gets shifted by the align environment:

This is just a question.

In MathJax 2, it used to be almost impossible to use custom fonts on the HTML output processor.
I'm wondering if MathJax 3 will be more flexible in this regard, and how it will let users work with custom fonts? Are we still going to be restricted to a predefined subset of fonts?

In the past we relied on customizing SVG glyphs, and it worked reasonably well. However, we'd preferred using HTML rendering with custom fonts.

Thanks for the head's up

Regards

I tried using the alpha.1 npm package to implement a new typesetter for JupyterLab:

https://github.com/jasongrout/jupyter-renderers/blob/mathjax3/packages/mathjax3-extension/src/index.ts

It seems that in the updateDocument call at https://github.com/jasongrout/jupyter-renderers/blob/3aa8e2b3ec9543eae8f831d7bc42532c279e228b/packages/mathjax3-extension/src/index.ts#L50, it calls down into HTML.node, where that function tries to use this.document, but this.document is null:

Does my code look right?

I noticed some odd naming. Since this has been a pain for developers and authors in the past, I thought I'd raise this as a topic for discussion.

• "outer" classes: MathJax, MJX-CHTML, MJX-TEX
• elements: mjx-mi, mjx-c
  • attribute names: c
• "inner" classes mjx-i, mjx-n
  • but then also MathJax_ref

It would be good to have a bit of documentation so people can give productive feedback.

This is a bit subtle, and I am not entirely sure I have diagnosed the problem correctly, but I am running into a bug in the findMath() function in MathJax3. It appears that having nested elements in a paragraph (for instance, using the <strong> tag) causes premature exiting of the DOM string parser. Here is a minimal example, based upon the mj3-tex2html.html demo:
An HTML document with the following fails:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Testing MathJax v3 setup with TeX input</title>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
  <script src="mj3-tex2html.dist.js"></script>
</head>
<body>
    <p>This is a <strong>spoiler</strong></p>
    <p>
    $$ E = mc^2 $$
    </p>
</body>
</html>

Producing

Whereas the following succeeds:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Testing MathJax v3 setup with TeX input</title>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
  <script src="mj3-tex2html.dist.js"></script>
</head>
<body>
    <p><strong>A spoiler</strong>, this ain't</p>
    <p>
    $$ E = mc^2 $$
    </p>
</body>
</html>

mathjax2 in my project is too large. I just need to support html5

From a quick test, it seems that v3 keeps v2's behavior and only allows $, \ref, \eqref within text mode (\text, \mbox etc).

It would be very helpful to revisit this and make it to some degree configurable.

My particular use case is linking. I need a custom macro for linking that goes beyond what ref and eqref can provide; and I need to support this macro in both modes.

Is there a plan to implement these commands in v3?

In general mathjax3 is working nicely with webpack, except for one warning ("the request of a dependency is an expression") due to the dynamic importing of missing MathML entities:

https://github.com/mathjax/mathjax-v3/blob/83174b9af8f142f5b3f43908fcc70f297d8f2159/mathjax3-ts/input/mathml/MmlEntities.ts#L542

which ends up being System.import('mathjax/input/mathml/js/entities/' + file + '.js')

One issue here is the warning, the other is that the import path seems incorrect - it should perhaps be 'mathjax3/mathjax3/input/mathml/entities/' + file + '.js'.

However, given that webpack is going to bundle everything in the entities folder so that the dynamic import can always be satisfied, would it make sense to generate a single file containing all the entities and import that statically?

With [email protected] and [email protected], I currently get

$ npx tsc
mathjax3-ts/output/chtml/Wrappers/mfrac.ts(148,71): error TS1005: ')' expected.
mathjax3-ts/output/chtml/Wrappers/mfrac.ts(148,73): error TS1005: ';' expected.
mathjax3-ts/output/chtml/Wrappers/mfrac.ts(148,110): error TS1005: ';' expected.