live demo and nodejs rendering results are different

[ZnPdCo]

Issue Summary

When rendering $$f(x)\equiv 0\pmod m\tag{1}$$, using the official live demo, the rendered result is:

<mjx-mtable data-latex="\mathchoice{\kern18mu}{\kern8mu}{\kern8mu}{\kern8mu}(\mmlToken{mi}{mod}\kern 6mu m)\tag{1}"  ... style="min-width: 12.936em;">...
...
</mjx-mtable>

Please note that there is no margin-related content in the style.

However, when using the code from https://docs.mathjax.org/en/latest/server/direct.html#converting-tex-to-chtml, margin appears:

Running node index.js "f(x)\equiv 0\pmod m\tag{1}" outputs:

<mjx-mtable data-latex="f(x)\equiv 0\pmod m\tag{1}" side="right" style="min-width:10.473em;margin-left:2.078em;margin-right:2.078em" width="full"><mjx-table style="width:auto;min-width:6.317em;margin:0 2.078em">
...
</mjx-mtable>

Notice that the style now contains margin-left and margin-right.

You may also notice that the data-latex output from the live demo is \mathchoice{\kern18mu}{\kern8mu}{\kern8mu}{\kern8mu}(\mmlToken{mi}{mod}\kern 6mu m)\tag{1}, and I don’t know why. But even if I run node index.js "\mathchoice{\kern18mu}{\kern8mu}{\kern8mu}{\kern8mu}(\mmlToken{mi}{mod}\kern 6mu m)\tag{1}", the result still contains margin.

Is this a bug, or did I make a mistake in my usage? 🤔

Steps to Reproduce:

1. copy code from https://docs.mathjax.org/en/latest/server/direct.html#converting-tex-to-chtml
2. run node index.js "f(x)\equiv 0\pmod m\tag{1}"
3. notice there have margin style in output

Technical details:

• MathJax Version: 4.0
• Client OS: Windows 11

My nodejs code(from official docs):

//
//  Load the modules needed for MathJax
//
import {mathjax} from '@mathjax/src/js/mathjax.js';
import {TeX} from '@mathjax/src/js/input/tex.js';
import {CHTML} from '@mathjax/src/js/output/chtml.js';
import {liteAdaptor} from '@mathjax/src/js/adaptors/liteAdaptor.js';
import {RegisterHTMLHandler} from '@mathjax/src/js/handlers/html.js';
import '@mathjax/src/js/util/asyncLoad/esm.js';

//
// Import the needed TeX packages
//
import '@mathjax/src/js/input/tex/base/BaseConfiguration.js';
import '@mathjax/src/js/input/tex/ams/AmsConfiguration.js';
import '@mathjax/src/js/input/tex/newcommand/NewcommandConfiguration.js';
import '@mathjax/src/js/input/tex/noundefined/NoUndefinedConfiguration.js';

//
// The em and ex sizes and container width to use during the conversion
//
const EM = 16;          // size of an em in pixels
const EX = 8;           // size of an ex in pixels
const WIDTH = 80 * EM;  // width of container for linebreaking

//
//  Create DOM adaptor and register it for HTML documents
//
const adaptor = liteAdaptor({fontSize: EM});
RegisterHTMLHandler(adaptor);

//
//  Create input and output jax and a (blank) document using them
//
const tex = new TeX({
  packages: ['base', 'ams', 'newcommand', 'noundefined'],
  formatError(jax, err) {console.error(err.message); process.exit(1)},
  //
  // Other TeX configuration goes here
  //
});
const chtml = new CHTML({
  fontURL: 'https://cdn.jsdelivr.net/npm/@mathjax/mathjax-newcm-font/chtml/woff2',
  //
  // Any output options go here
  //
});
const html = mathjax.document('', {
  InputJax: tex,
  OutputJax: chtml,
  //
  // Other document options go here
  //
});

//
// Load all the font data
//
await chtml.font.loadDynamicFiles();

//
// Typeset the math from the command line
//
const node = html.convert(process.argv[2] || '', {
  display: true,
  em: EM,
  ex: EX,
  containerWidth: WIDTH
});

//
// Generate a JSON object with the CHTML output and needed CSS
//
// console.log(JSON.stringify({
//   math: adaptor.outerHTML(node),
//   css: adaptor.cssText(chtml.styleSheet(html))
// }));

console.log(adaptor.outerHTML(node))

Supporting information:

[dpvc]

This is due to a bug in the LiteDOM handling of CSS styles for margin. I have made a PR to resolve the problem, but in the meantime, you can add

import {Styles} from '@mathjax/src/js/util/Styles.js';
Styles.connect.margin = {...Styles.connect.padding};

to the code that you cite above just after the last import command. That will add the needed definitions to properly handle margin settings.

Thanks for the report. It will be fixed in the next release.