Can't load .../svg/dynamic/math.js

[dmca-glasgow]

Hello,

I have a 2 part problem with the following maths: K^\perp which seems to lead to unexpected behaviour in mathjax.

Given the following minimal-as-possible demo where I statically load packages and use 2 fonts:

import { mathjax } from '@mathjax/src/js/mathjax.js';

// TeX to MathML
import { liteAdaptor } from '@mathjax/src/js/adaptors/liteAdaptor.js';
import { STATE } from '@mathjax/src/js/core/MathItem.js';
import { SerializedMmlVisitor } from '@mathjax/src/js/core/MmlTree/SerializedMmlVisitor.js';
import { RegisterHTMLHandler } from '@mathjax/src/js/handlers/html.js';
import { TeX } from '@mathjax/src/js/input/tex.js';

import '@mathjax/src/js/input/tex/base/BaseConfiguration.js';

// MathML to SVG
import { MathML } from '@mathjax/src/js/input/mathml.js';
import { SVG } from '@mathjax/src/js/output/svg.js';

import { MathJaxNewcmFont } from '@mathjax/mathjax-newcm-font/js/svg.js';
import '@mathjax/mathjax-newcm-font/js/svg/dynamic/math.js';

import { MathJaxFiraFont } from '@mathjax/mathjax-fira-font/js/svg.js';
// import '@mathjax/mathjax-fira-font/js/svg/dynamic/math.js';

// TeX to MathML ---------------------------------------

const adaptor = liteAdaptor();
const visitor = new SerializedMmlVisitor();
RegisterHTMLHandler(adaptor);

const packages: string[] = [
  'base',
];

const tex = new TeX({ packages });

const mmlDoc = mathjax.document('', {
  InputJax: tex,
});

function texToMathML(tex: string) {
  const mmlNode = mmlDoc.convert(tex, { end: STATE.CONVERT });
  return visitor.visitTree(mmlNode)
}

// MathML to SVG ----------------------------------

const adaptor2 = liteAdaptor();
RegisterHTMLHandler(adaptor2);

const htmlDoc = mathjax.document('', {
  InputJax: new MathML(),
});

const NewcmFont = new MathJaxNewcmFont();
const FiraFont = new MathJaxFiraFont();

const packages2: string[] = [
  // 'math',
];

packages2.forEach((name) => {
  // @ts-expect-error Property 'dynamicFiles' is protected
  MathJaxNewcmFont.dynamicFiles[name].setup(NewcmFont);
  // @ts-expect-error Property 'dynamicFiles' is protected
  MathJaxFiraFont.dynamicFiles[name].setup(FiraFont);
});

const fonts: Record<string, any> = {
  computerModern: new SVG({ fontData: NewcmFont }),
  fira: new SVG({ fontData: FiraFont }),
};

function mathMLToSvg(mml: string, font: string) {
  htmlDoc.outputJax = fonts[font];
  htmlDoc.outputJax.setAdaptor(htmlDoc.adaptor);
  const htmlNode = htmlDoc.convert(mml);
  const svg = htmlNode.children[0];
  return adaptor2.outerHTML(svg);
}

// Render -------------------------------------

const texMaths = String.raw`K^\perp`

// Browser ----------------------------------------

const element = document.querySelector<HTMLDivElement>('#app')

// initial render fails
try {
  const mml = texToMathML(texMaths)
  const svg = mathMLToSvg(mml, 'computerModern')
  element!.innerHTML = svg
} catch (err) {
  console.error(err)
}

// 2nd try works
const mml = texToMathML(texMaths)
const svg = mathMLToSvg(mml, 'computerModern')
element!.innerHTML = svg

// Node.js --------------------------------------

// // initial render fails
// try {
//   const mml = texToMathML(texMaths)
//   const svg = mathMLToSvg(mml, 'computerModern')
//   console.log(svg)
// } catch (err) {
//   console.error(err)
// }

// // 2nd try works
// const mml2 = texToMathML(texMaths)
// const svg2 = mathMLToSvg(mml2, 'computerModern')
// console.log(svg2)

To run the demo in the browser:

pnpm create vite mathjax-dynamic-maths-error --template vanilla-ts
pnpm i @mathjax/src @mathjax/mathjax-newcm-font @mathjax/mathjax-fira-font
# replace contents of main.ts with the code above
pnpm dev

With node:

# comment out the browser part and uncomment the node part
npx tsx src/main.ts

1. The Fira font doesn't have a math extension

I can resolve the error by preloading the math extension for the MathJaxNewcmFont, but no such extension exists for the MathJaxFiraFont.

2. The maths renders the 2nd time without the math extension preloaded

I noticed that the maths does successfully render on the 2nd try for both fonts, when the math extension is not preloaded.

[dpvc]

I can resolve the error by preloading the math extension for the MathJaxNewcmFont, but no such extension exists for the MathJaxFiraFont.

That's correct. The dynamic files differ from font to font, so so you may not need the same files for all fonts. Just loading it for MathJaxNewcmFont is sufficient to have it work in both cases.

I noticed that the maths does successfully render on the 2nd try for both fonts, when the math extension is not preloaded.

MathJax only tries to load an extension once, and if it doesn't succeed, it doesn't try again. So the second time you try to render the expression, the \perp character is not defined in the mathjax-newcm font, and it can't load the extension that should define it, so it falls back on trying to use system fonts as the last resort. It "succeeds" in the sense that the SVG is created, but it will have a <text> element in it (rather than the character paths it usually uses), and the result will depend on the fonts available on the system that is viewing it. MathJax won't know the size of the character, so there may be placement issues in some situations.

While loading the math.js dynamic file for mathjax-newcm will allow it to render this expression, if you are expecting to process arbitrary expressions, you would need to preload any other dynamic ranges that you might ever encounter. That is probably not what you want to do.

Instead, you could consider using a mixed direct-and-component approach, to allow MathJax to load its components rather than building everything into one file initially. This is outlined in Mixing components and direct linking section of the documentation.

In your case, you can add the lines

//
// Load the component definitions
//
import {Loader} from '@mathjax/src/js/components/loader.js';
import {Package} from '@mathjax/src/js/components/package.js';
import '@mathjax/src/components/js/startup/init.js';
import '@mathjax/src/components/js/core/lib/core.js';
import '@mathjax/src/components/js/input/tex/tex.js';
import '@mathjax/src/components/js/output/svg/svg.js';

import '@mathjax/mathjax-newcm-font/svg.js';
import '@mathjax/mathjax-fira-font/svg.js';

after your MathML to SVG imports, and then replace

import { MathJaxNewcmFont } from '@mathjax/mathjax-newcm-font/js/svg.js';
import '@mathjax/mathjax-newcm-font/js/svg/dynamic/math.js';

import { MathJaxFiraFont } from '@mathjax/mathjax-fira-font/js/svg.js';
// import '@mathjax/mathjax-fira-font/js/svg/dynamic/math.js';

with

const { MathJaxNewcmFont } = MathJax._.output.fonts['mathjax-newcm'].svg_ts;
const { MathJaxFiraFont } = MathJax._.output.fonts['mathjax-fira'].svg_ts;

//
// Record the pre-loaded component files
//
Loader.preLoaded(
  'loader', 'startup',
  'core',
  'input/tex',
  'output/svg',
);

MathJax.config.loader.require = (file) => import(file);
mathjax.asyncLoad = (file) =>  import(file.charAt(0) === '@' ? file : Package.resolvePath(file));

If you are packaging your result using webpack you will need to use

MathJax.config.loader.require = (file) => import(/* webpackIgnore: true */ file);
mathjax.asyncLoad = (file) =>
  import(/* webpackIgnore: true */ file.charAt(0) === '@' ? file : Package.resolvePath(file));

in order to avoid having it try to pack the imports. If you are using a different packer, you may need to do something similar to avoid that.

You can get rid of

const packages2: string[] = [
  // 'math',
];

packages2.forEach((name) => {
  // @ts-expect-error Property 'dynamicFiles' is protected
  MathJaxNewcmFont.dynamicFiles[name].setup(NewcmFont);
  // @ts-expect-error Property 'dynamicFiles' is protected
  MathJaxFiraFont.dynamicFiles[name].setup(FiraFont);
});

when using this approach, as the file will be loaded as needed.

Finally, you will need to use mathjax.handleRetriesFor() in order to process the dynamic file loads:

try {
  await mathjax.handleRetriesFor(() => {
    const mml = texToMathML(texMaths);
    const svg = mathMLToSvg(mml, 'computerModern');
    element.innerHTML = svg;
  });
} catch (err) {
  console.error(err);
}

and

try {
  await mathjax.handleRetriesFor(() => {
    const mml = texToMathML(texMaths);
    const svg = mathMLToSvg(mml, 'computerModern');
    console.log(svg);
  });
} catch (err) {
  console.error(err)
}

I haven't tried to do this in a Typescript setting (the components aren't really made for that), so you may need to set up some .d.ts files to prevent Typescript warnings.

[dmca-glasgow]

Hi @dpvc

It "succeeds" in the sense that the SVG is created, but it will have a <text> element in it (rather than the character paths it usually uses), and the result will depend on the fonts available on the system that is viewing it.

Oh, I didn't know that (or spot that in the SVG), thanks that's good to know.

Thanks for the code samples, I definitely need to change my approach to mathjax extensions as I currently have so many bundled with each course, when they're not necessary.

My project is a Tauri app (basically a native browser window as an app). It has a preview which shows the LaTeX as an HTML webpage and automatically updates on changes to LaTeX files, and an Export HTML button. Using your suggested approach above, I could trigger a mathjax bundling process when the user clicks the Export HTML button, which includes only the necessary extensions for this coursework. That would be a big upgrade for the project!

However I'm not sure how I could go about this for the preview... the bundle needs to be created before the content is known. And due to the security policies of Tauri, if it's not in the bundle it's not getting executed (although there's possibly some hacks around this). Is there a way to bundle all dynamic extensions, other than manually importing everything in the dynamic directories? That might be the best approach in the 'preview' scenario, where bundle size isn't really a concern (compared to TeXLive at about 6GB!).

Thanks.

[dpvc]

Is there a way to bundle all dynamic extensions, other than manually importing everything in the dynamic directories?

I don't know anything about Tauri, so some of what you say is a bit mysterious to me. Is the "bundle" the collection of files for the app, or is it the single webpacked (or otherwise bundled) javascript file that you are creating? A quick look through the Tauri CSP documentation suggests that you may be able to set the script-src value, which might allow MathJax to dynamically load its components, either from a trusted CDN, or from a local copy in your app. If so, that would mean you don't have to package everything in your webpacked file.

If not, then you would have to import everything by hand to get it included in a packaged version. There are calls to load all the dynamic font files, but those are dynamic calls so would be performed at run time, and so would not be picked up by a bundler like webpack. The MathJax.startup.document.outputJax.font.loadDynamicFiles() would load all the font files for the configured font. You should be able to call it on the font instances in your fonts object, I think.

If you can't load additional scripts into the web view for your app (which is how MathJax usually loads external components) and you can't do import() calls, then it looks like Tauri supports the fetch() API (see the documentation) and you might be able to use that to load the extensions, though you would probably have to eval() the result, which also may not be allowed.

Not sure if any of that helps. If not, then a more explicit description of the app's capabilities and packaging, I might be able to suggest something more.