'->' in \ce macro only renders correctly with newcm font

[kevin1078]

Issue Summary

'->' in \ce macro only rendered correctly with newcm font; failed with all other 10 fonts: tex/termes/stix2/schola/pagella/modern/fira/dejavu/bonum/asana.

Steps to Reproduce:

Please see attachments. You probably need to modify the url in this line to get it work:

<script id="MathJax-script" async src="@mathjax/mathjax-dejavu-font/tex-mml-chtml-mathjax-dejavu.js"></script>

template_chtml_asana.html
template_chtml_bonum.html
template_chtml_dejavu.html
template_chtml_fira.html
template_chtml_modern.html
template_chtml_newcm.html
template_chtml_pagella.html
template_chtml_schola.html
template_chtml_stix2.html
template_chtml_termes.html
template_chtml_tex.html

This is a result picture:

.

Technical details:

• MathJax Version: 4.0
• Client OS: (e.g., Windows 10)
• Browser: (Chrome and EdgeBrowser interface)

MathJax configuration: see attachments.

[dpvc]

If you check the developer's console, you should see a message like

MathJax([mathjax-mhchem-extension]/chtml): The required mathjax-newcm CHTML font can't be found

indicating that it is looking for the mathjax-newcm font. It turns out that that is because the tex-mml-chtml-mathjax-asana.js file (for example) that you are loading has failed to properly indicate that it is using the mathjax-asana font. It is supposed to do so, and does set the output.font value, but it turns out that that is occurring after the output block has been transferred to the chtml block, and that means the chtml output doesn't know about it and is falling back on the default mathjax-newcm font when the mhchem font extension is looking for the font that it is supposed to extend.

An easy fix is to add

    output: {
      font: 'mathjax-asana',
    },

to your configuration.

Note, however, that the mhchem extension will load the font from jsdelivr.net by default, so if you are trying to use a totally local installation, you will need to install the @mathjax/mathjax-mhchem-font-extension npm package as well, and add

        'mathjax-mhchem-extension': '@mathjax/mathjax-mhchem-font-extension'

to the loader.paths object after the mathjax-asana declaration.

I will fix the problem with the tex-mml-chtml-mathjax-asana.js files for the next release.

[kevin1078]

    'mathjax-mhchem-extension': '@mathjax/mathjax-mhchem-font-extension'

Yes, this is exactly what I did.

---

output: {
  font: 'mathjax-asana',
},

Yes, it did work; but the long right arrow does not has the style of that font, it's more like newcm's style. Thanks for your help!

[dpvc]

the long right arrow does not has the style of that font, it's more like newcm's style.

Yes, that's correct. This is discussed briefly in the 4.0.0-rc.4 release notes, where the mhchem font extension was added to handle more of the stretchy arrows needed by mhchem:

For the mhchem extension, several of the arrows were not previously stretchy. This release adds a new mhchem-specific font that includes the characters needed to stretch all the arrows available in mhchem, improving its output in both CHTML and SVG output. Note, however, that these fonts match the mathjax-newcm font set, and are used no matter what font is selected, so the arrows may not match other arrows used in the font if you are using one other than mathjax-newcm.

This is discussed further in the pull request that added the mhchem font extension:

This PR adjusts the mhchem package to provide several stretchy characters that it needed but that weren't in the original MathJax TeX fonts (and two that don't have Unicode equivalents). This is done by using a separate mathjax-mhchem font that has the needed arrows and pieces needed for stretchy assemblies for these characters, based on the mathjax-newcm arrows. In order to make the arrows used in mhchem consistent with these, all the arrows used in mhchem are included in this new font, so that even when mhchem is used in a setting where a different font is selected, the arrows will not change their look between ones that could have been found in the selected font and ones that are in the mathjax-mhchem font.

The new font also includes character used for the bonds that have in the past been constructed from multiple characters.

The bold sentence tells why this is the case. In order to make all the arrows used by mhchem be properly stretchable, there needs to be the proper pieces to make multi-character assemblies for those arrows. Because not all the font include those characters, and in particular, because some of the needed arrows don't have Unicode positions (so aren't included in any of the fonts), we created a font extension that has the needed pieces and extra arrows. These pieces use the mathjax-newcm arrows as the basis for them, and in order to avoid a change in style between the new stretchy arrows and other arrows in the formula, the mhchem font extension uses mathjax-newcm arrows in all cases within the formula. That was a conscious decision to avoid some arrows looking one way and others looking a different way.

While it would be possible to make separate mhchem font extensions that use mathjax-asana and the other fonts as the basis for the stretched arrows, we anticipate that the number of fonts will grow, including with third-party fonts, once the font tools are released, and it would be a maintenance nightmare to try to keep up with that. So the mathjax-newcm arrows are the ones that are used in all cases.

[dpvc]

Admittedly, that fact could be documented better.

[kevin1078]

Then how can I use mathjax-mhchem font extension?

I tried "output: { font: 'mathjax-stix2', }", but it didn't work. Below is the html I had used.

template_chtml_mhchem.html

[dpvc]

Your configuration has a number of problems.

First, you don't need to include '[mathjax-mhchem-font-extension]' in the loader.load list. This will be loaded automatically when needed by the mhchem extension.

Second, you don't need the generic path.

Third, you have the wrong name and wrong path for the mhchem font extension. It should be as I listed in my first comment above:

         'mathjax-mhchem-extension': '@mathjax/mathjax-mhchem-font-extension'

Note that 'mathjax-mhchem-extension' does not include the -font that you have in your configuration, and that the path '@mathjax/mathjax-mhchem-font-extension' does not include the /chtml that you have.

Fourth, the output.font should be mathjax-stix2 not mathjax-mhchem since you are using STIX2 as the base font (the mhchem font is an extension to the base font, not the base font itself).

So if you use the configuration

  window.MathJax = {
    loader: {
      load: ['[tex]/color', '[tex]/mhchem', '[tex]/physics'],
      paths: {
        mathjax: 'mathjax',
        'mathjax-mhchem-extension': '@mathjax/mathjax-mhchem-font-extension'
      }
    },
    tex: {
      packages: {'[+]': ['color', 'mhchem', 'physics']},
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$', '$$']]
    },
    startup: {
      typeset: true,
      ready() {
        MathJax.startup.defaultReady();
        document.getElementById('render').disabled = false;
      }
    },
    output: {
      scale: 1.25,
      displayAlign: 'left',
      linebreaks: {                  // options for when overflow is linebreak
        inline: true,                // true for browser-based breaking of inline equations
        width: '100%',               // a fixed size or a percentage of the container width
        lineleading: .5,             // the default lineleading in em units
      },
      font: 'mathjax-stix2',
    }
  }

in your example file, it should work for you. At least is does for me.

[kevin1078]

I got "@mathjax/mathjax-mhchem-font-extension" source by using this command "pnpm install @mathjax/mathjax-mhchem-font-extension@4"; and my configuration file comes from @mathjax\mathjax-mhchem-font-extension\examples\chtml.html.

"font: 'mathjax-stix2'," also works for me, other like "font: 'mathjax-schola'," also works, except font: 'mathjax-mhchem'.

I just want to see how would mathjax-mhchem-font-extension look like. I got it worked with "font: 'mathjax-stix2'," or "font: 'mathjax-schola',", but had seen no difference.

The configuration you gave does not work for me. I just opened the file in local directory with no http server provided.

Thank you for the reply.

[dpvc]

my configuration file comes from https://github.com/mathjax\mathjax-mhchem-font-extension\examples\chtml.html

I wondered where you had gotten the generic stuff from.

The examples/chtml.html file is one that is created automatically by the font tools, and really only makes sense for actual fonts, not font extensions, like mhchem. I will need to remove those files, as they are not useful. It also looks like it has a v3 path rather than a v4 one, so that would have to be fixed in any case.

except font: 'mathjax-mhchem'.

Note that mathjax-mhchem is not a font, but a font extension. It adds to an existing font, but doesn't have the data needed to be a complete font, and specifying font: 'mathjax-mhchem' will just lead to errors about the font not being found.

These are the characters in the mathjax-mhchem font extension:

Those are the only characters in the font, and they will look the same whether you are extending the STIX2 font or the Scholar font, or any of the others. If you are using \ce{A -> B}, for example, only the "A" and "B" will be affected by the MathJax font you have selected.

The configuration you gave does not work for me. I just opened the file in local directory with no http server provided.

"It does not work" is not a very useful description, as it doesn't give me any information to use to help you. For example, are there error messages in the developer's console? Does MathJax run but not display the arrows properly, or does it not run at all? You've given me nothing to work with, here.

Note that the paths in the configuration expect there to be a mathjaxfolder (containing the MathJax files) in the same folder as the template HTML file, and a @mathjax folder containing the two fonts that are in use (mathjax-stix2-font and mathjax-mhchem-font-extension). If those aren't in the same directory as the template file, the browser won't be able to find the needed files. I suspect that those folders are not in the same directory as the template file, but are in the node_modules directory. In that case you should prepend node_modules/ to the paths for mathjax and mathjax-mhchem-extension in the loader.paths section of the configuration.

[kevin1078]

I wondered where you had gotten the generic stuff from.

I got "@mathjax/mathjax-mhchem-font-extension" source by using this command "pnpm install @mathjax/mathjax-mhchem-font-extension@4"; and my configuration file comes from @ mathjax\mathjax-mhchem-font-extension\examples\chtml.html.

You can see 'generic' stuff in the chtml.html file. It's '@ mathjax\mathjax-mhchem-font-extension\examples\chtml.html', not https://github.com/mathjax\mathjax-mhchem-font-extension\examples\chtml.html; it seems the website automatically replaced '@ mathjax' with 'https://github.com/mathjax', which I didn't expect.

"It does not work" is not a very useful description, as it doesn't give me any information to use to help you. For example, are there error messages in the developer's console? Does MathJax run but not display the arrows properly, or does it not run at all? You've given me nothing to work with, here.

Sorry, I just run all the html files I attached from local place, just double clicked them in the file explorer. The chtml.html has a 'convert' button, so does the template_chtml_mhchem.html, it comes from the '@ mathjax\mathjax-mhchem-font-extension\examples\chtml.html' in my local directory downloaded by "pnpm install @mathjax/mathjax-mhchem-font-extension@4" command. I just simply found the 'convert' button is grey and can not click, it's so obviously so I didn't mention more. And in order to get these files (the chtml.html files in 12 fonts) work from local, I also changed js, css files' path, so that they can be accessed from local directories, such as '<script id="MathJax-script" async src="../generic/es5/tex-mml-chtml-generic.js"></script>' in '@ mathjax\mathjax-mhchem-font-extension\examples\chtml.html'. Since I could not find tex-mml-chtml-generic.js anywhere, so I guess it's a generic font for all characters except for the special characters covered by mhchm extension font, so I replaced "../generic/es5/tex-mml-chtml-generic.js" with "@mathjax/mathjax-stix2-font/tex-mml-chtml-mathjax-stix2.js" and it happened to worked.

Note that the paths in the configuration expect there to be a mathjax folder (containing the MathJax files) in the same folder as the template HTML file, and a @ mathjax folder containing the two fonts that are in use (mathjax-stix2-font and mathjax-mhchem-font-extension). If those aren't in the same directory as the template file, the browser won't be able to find the needed files. I suspect that those folders are not in the same directory as the template file, but are in the node_modules directory.

Yes, the mathjax folder and @ mathjax folder with all 12 fonts are all in node_modules directory.

In that case you should prepend node_modules/ to the paths for mathjax and mathjax-mhchem-extension in the loader.paths section of the configuration.

For the complete usage of mathjax in my app, I used a local http server with a local root directory at node_modules/, so that I do not need to add the path prefix. I also moved template_chtml_mhchem.html to node_modules/, and modified several js and css files' relative path, so that it also works well from local directory.

At last, thank you very much!
Best regards,