MathML using server-side css does not have all the styles?

[SPG]

I am using Mathjax on server-side using node to generate css just once, and then apply it to the multiple translated MathML elements, which also happens on the server-side.

My question is - Will generating the css once create all the styles needed?

I read in this group somewhere that it will, but I am not seeing styles like mjx-line in the css that I am generating. Will I have to pass the MathML(or a sample of all types of Math elements used) to the MathDocument first to generate all the styles needed?

Here is how I am generating the css:

import {mathjax} from 'mathjax-full/js/mathjax.js';

import {MathML} from 'mathjax-full/js/input/mathml.js';

import {CHTML} from 'mathjax-full/js/output/chtml.js';

import {liteAdaptor} from 'mathjax-full/js/adaptors/liteAdaptor.js';

import {RegisterHTMLHandler} from 'mathjax-full/js/handlers/html.js';

import {AssistiveMmlHandler} from 'mathjax-full/js/a11y/assistive-mml.js';

const defaultOptions = {

    "assistiveMml" : true,

    "css":false,

    "em": 16,   

    "ex": 8,

    "inline": true,

    "width": 80 * 16,

    "fontURL": 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2',

};

const adaptor = liteAdaptor();

const handler = RegisterHTMLHandler(adaptor);

const mml = new MathML();

const chtml = new CHTML({fontURL: defaultOptions.fontURL});

const html = mathjax.document('', {InputJax: mml, OutputJax: chtml});

//get the math css

const getMathCss = () => {

    const mcss = adaptor.textContent(chtml.styleSheet(html));

    console.log(mcss);

    return mcss;

};

const transformServerMath = (mathnode, options) => {

    ...

};

export {transformServerMath, getMathCss};

[SPG]

I was able to get the complete css by setting adaptiveCSS option for CHTML to false. So my getMathCss() looks like this:

const getMathCss = () => {

    const chtml = new CHTML({fontURL: defaultOptions.fontURL, adaptiveCSS: false});

    html = mathjax.document('', {InputJax: mml, OutputJax: chtml});

    const mcss = adaptor.textContent(chtml.styleSheet(html));

    return mcss;

};

But I still cannot get my CHTML to render in the browser.

For server side mathml processing this is what I am going:

1. Generate the complete math css and append it to the existing application css on the server side.

2. Fetch the data, replace all the MathML nodes to the translated CHTML

3. Render

I can see that the css contains the math styles, the font faces etc. When inspect/view source the node generated CHTML/css in the browser and compare it to the browser generated CHTML/css for Mathjax v3, I don't see any difference the CHTML that is being generated on the server-side. I am not sure what I have overlooked. Any help would be appreciated.

Thanks

[Davide Cervone]

I can see that the css contains the math styles, the font faces etc. When inspect/view source the node generated CHTML/css in the browser and compare it to the browser generated CHTML/css for Mathjax v3, I don't see any difference the CHTML that is being generated on the server-side. I am not sure what I have overlooked. Any help would be appreciated.

Can you link to a page that includes the result of your processing?  It is difficult to diagnose without the actual results.

Can you tell from the browser network information whether the fonts have actually been downloaded (without them you will see nothing).

My question is - Will generating the css once create all the styles needed?

The CSS will be the CSS needed for the expressions processed so far.  So if you ask for this before processing any math, there will be very little CSS.

If you process the expressions that you need for the page, and THEN get the CSS, that should be the CSS you need.  

You can set the adaptiveCSS option to false, as you have, but that will lead to a VERY large amount of CSS.  It would be better to use the adaptive CSS if you can manage it.

Davide