Manually stretch arrow in MathJax

Question

I am using the Extpfeil extension in Mathjax to produce arrows in my html page. In particular I am using:

\Newextarrow{\cs}{lspace,rspace}{unicode-char}

This works great for some arrows (for example, see answer by Davide), but as the documentation states:

Note that MathJax knows how to stretch only a limited number of characters, so you may not actually get a stretchy character this way.

Unfortunately, I really need to use one of these non-supported characters (specifically, 0x21CC), and it would be very nice if I could get it to stretch. Is there a way I can manually specify an amount to stretch the arrows in a nice way? For context, I'm trying to make chemical reaction diagrams like this:

The overset and underset variables may be a few characters long, so the stretching is necessary.

Answer 1

The ability of MathJax to stretch a character depends on the availability of the appropriate glyphs within the font that it is using. The MathJax TeX font (the usual web-based font) doesn't have the necessary glyphs to stretch U+21CC; however, the STIX fonts do, and as of version 2.3, MathJax includes web versions of the STIX fonts. So if you are authoring your own pages and can specify the font, you could get U+21CC to stretch. But if you are using a site like StackExchange, where you can't control the font, you are limited to the font in use.

To do this, add

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  "HTML-CSS": {
    preferredFont: "STIX",
    availableFonts: ["STIX"],
    webFont: "STIX-Web"
  },
  SVG: {
    font: "STIX-Web"
  },
  TeX: {
    extensions: ["extpfeil.js"]
  }
});
</script>

just before the script that loads MathJax.js. Then in the body of your page use

<div style="display:none">
$$\Newextarrow{\rightleftharpoons}{5,5}{0x21CC}$$
</div>

to define the arrow (somewhere early on before it is used. Then use

\rightleftharpoons[xyz]{abcdefg}

to put "abcdefg" over the arrow and "xyz" below it, and have it stretch. It looks like the vertical positioning of the under-text is not great (it is a bit too low), but the arrow stretches!

Here is an example: