Two one-sided arrows from mhchem MathJax extension do not render properly upon conversion to pdf

Question

I am using pdfkit-pythonbased on wkhtmltopdfto convert into pdf a text that contains MathJax with mhchemextension.

All works fine on the browser, like in the case :

$\ce{A <=> B + C}$

where I have used $\ce{<=>}$ to draw the so-called two one-sided arrows.

However, this is what I get after conversion to pdf.

As you see, a huge space is added after the arrows, which is quite annoying. I can overcome the problem by using $\ce{\rightleftharpoons}$, which gives:

$\ce{A \rightleftharpoons B + C}$

and here how it appears on the pdf:

with the drawback that arrows are smaller than in the previous case with $\ce{<=>}$ .

This is just an example of problems that I have encountered: I could give you more discrepancies showing up ONLY when pdf is created.

---

My question is:
Is it possible to avoid the added space upon conversion to pdf when using $\ce{<=>}$ ? Or more generally, what should one do to obtain the same rendering on the pdf, as on the browser ?

---

Here some of the parameters I have used to perform pdf conversion:

wkhtmltopdf config:

options = {
    'quiet': '',
    'javascript-delay' : '5000',
    'page-size': 'A4',
    'margin-top': '0.75in',
    'margin-right': '0.75in',
    'margin-bottom': '0.75in',
    'margin-left': '0.75in',
    'disable-smart-shrinking': '',
    'dpi': '400',
}

MathJax config:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    TeX: {extensions: ["mhchem.js"]},
    tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    processEscapes: true
    }
});
</script>

<script type="text/javascript" async
    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

Answer 1

As it has been pointed out here, the --window-statusoption should be used, instead of an arbitrary delay (given by --javascript-delay). Here below, how wkhtmltopdfconfiguration should look like:

options = {
'quiet': '',
'window-status' : 'finished',
'page-size': 'A4',
'margin-top': '0.75in',
'margin-right': '0.75in',
'margin-bottom': '0.75in',
'margin-left': '0.75in',
'disable-smart-shrinking': '',
'dpi': '400',

}

And here the MathJaxconfiguration:

     <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            TeX: {extensions: ["mhchem.js"]},
            tex2jax: {
            inlineMath: [['$','$'], ['\\(','\\)']],
            displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
            processEscapes: true,
            },
            "HTML-CSS": {
                scale : 100,
                minScaleAdjust: 110
            },
        });
        MathJax.Hub.Queue(["Rerender", MathJax.Hub], function () {window.status="finished"})
    </script>

The windows.statusallows conversion into pdf only once MathJax is fully loaded. I have added minScaleAdjust: 110 to obtain the maths big enough compared to text.

    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML">
    </script>

A second reason of above described misbehavior was the use of CommonHTMLoutput processor (CHTML): I have switched to HTML-CSS(HTML) which seems to properly handle the two one-sides double arrow of the mhchem extension.

Here, an example of how MathJaxis rendered in pdf, using two different output processors:

HTML:

CHTML: