Bundling MathJax

82 views
Skip to first unread message

Bryan Jones

unread,
Nov 15, 2024, 3:27:55 PM11/15/24
to MathJax Users
I integrate MathJax with a Visual Studio Code webview, so I prefer to provide my users a local copy of MathJax, rather than loading it from a CDN. When using v3, I found that the WOFF fonts are dynamically imported, so I ended up placing the entire MathJax distribution (the NPM mathjax package, not mathjax-source) in my bundle to ensure I included all the needed files.

With v4 in beta, it looks like fonts are now in separate packages, but no longer in WOFF files. Can a modern bundler be used (I prefer esbuild, but can work with webpack/vite/etc.) to find all the necessary imports (including dynamic font imports), or should I fall back to copying mathjax and (I suppose) mathjax-modern-font?

Thanks for any help or advice!

Bryan

Davide Cervone

unread,
Nov 20, 2024, 4:11:54 PM11/20/24
to mathja...@googlegroups.com
With v4 in beta, it looks like fonts are now in separate packages, but no longer in WOFF files.

The fonts are in separate packages, but they are still in woff format.  For example, see mathjax-modern-font/chtml/woff

Can a modern bundler be used (I prefer esbuild, but can work with webpack/vite/etc.) to find all the necessary imports (including dynamic font imports), or should I fall back to copying mathjax and (I suppose) mathjax-modern-font?

You can do it, but must do so by pre-loading the dynamic files that you want to include.  You could create a file called preload-font.js containing:

import {startup} from 'mathjax-full/components/src/startup/init.js';
import {Loader, CONFIG} from 'mathjax-full/js/components/loader.js';

//
// Load the components that we want to combine into one component
//
import 'mathjax-full/components/src/core/core.js';
import 'mathjax-full/components/src/input/tex/tex.js';
import {loadFont} from 'mathjax-full/components/src/output/chtml/chtml.js';
import 'mathjax-full/components/src/ui/menu/menu.js';
import {checkSre} from 'mathjax-full/components/src/a11y/util.js';

//
// Import the dynamic font files you want to include
//
import {MathJaxModernFont} from 'mathjax-modern-font/js/chtml.js';
import 'mathjax-modern-font/js/chtml/dynamic/fraktur.js';
//   ... list any additional ones here

const fontPreloads = ['fraktur'];  // The preloaded dynamic font components (imported above)

//
// Mark the components that you have loaded
//
Loader.preLoad(
  'loader', 'startup',
  'core',
  'input/tex',
  'output/chtml',
  'ui/menu',
  '[mathjax-modern]/chtml'
);

//
// Mark the MathJax version being used for this combined configuration
//
Loader.saveVersion('preload-font.js');

//
// Change these to your own server locations for the MathJax components that
// can be dynamically loaded, and any font files that aren't included above
// but can be dynamically loaded.
//
CONFIG.paths['mathjax-modern'] = 'https://cdn.jsdelivr.net/npm/mathjax-m...@4.0.0-beta.7';

//
// Set up the pre-loaded dynamic font data
//
const Ready = MathJax.config.startup.ready;
MathJax.config.startup.ready = () => {
  (Ready || MathJax.startup.defaultPageReady)();
  const font = MathJax.startup.document.outputJax.font;
  const dynamic = MathJaxModernFont.dynamicFiles;
  fontPreloads.forEach(name => dynamic[name].setup(font));
};

//
// Procede with the startup process
//
loadFont(checkSre(startup), true);

and then pack it (you will need to use the mathjax-full package, not just mathjax, for this), say to preload-font.min.js, and load it in a file like:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Preloaded MathJax Fonts</title>
<script defer src="preload-font.min.js"></script>
</head>
<body>

$$\text{Testing!} + \mathfrak{ABC}$$

</body>
</html>

which should show the Fraktur character without loading the fracture data dynamically (since they are already included in the packed file).  Of course, the font files are still loaded separately.  If you are using a bundler that can include them as well, you may need to set the chtml.fontURL configuration option in the MathJax configuration to the location needed by the bundler for that.

The preload-font.js file above is based on the mathjax-full/components/mjs/tex-chtml/tex-chtml.js file, with just the extra loading of font files and their setup.

Hope that does what you need.

Davide
 
Reply all
Reply to author
Forward
0 new messages