mathjax
\overline doesn't appear on print
Issue Summary
\overline{} doesn't appear on print (pdf).
- Issue only appears in Firefox (tested with Mozilla Firefox for Linux Mint 89.0.1 (64-Bit))
- Issue only appears with MathJax 3 (not MathJax 2)
- Issue only appears with tex-chtml.js (not tex-svg.js)
Steps to Reproduce:
- Save the following as
test.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width">
<title>MathJax v3 with TeX input and HTML output</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]},
chtml: {displayAlign: 'left'}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
</head>
<body>
<h1>Testing...</h1>
<h2>.../overline</h2>
<p>
\[\overline{A}\]
</p>
<p>
Inline \(\overline{A}\) Inline
</p>
<h2>...\bar</h2>
<p>
\[\bar{A}\]
</p>
<p>
Inline \(\bar{A}\) Inline
</p>
</body>
</html>
- Open
test.htmlwith Firefox - Save page to pdf via print dialog (CTRL+P)
- Open the pdf file
-
\overlinedoesn't appear.\bardoes appear.
I wasn't able to reproduce this on MacOS, so I installed Linux Mint in a VM, and was able to see the issue there. It seems to be a bug with the pdf generation code. I don't know if that is Firefox or the system that is at fault.
It also is not restricted to the overline, as any horizontally stretched multi-character assembly is affected by this issue. MathJax renders the extenders in such an assembly by stretching the extender in the x direction, and clipping it to the right size. It turns out that the combination of clipping, stretching (when fairly large scale values are used), and applying the stretch to a ::before CSS rule seems to be confusing the pdf generator. Changing only one of the three seems to avoid the bug. changing the clipping or stretching of course will cause the wrong output (those features are required), but it turns out that the stretching could be applied to a parent element rather than the ::before node itself. So adding the following CSS should resolve the issue for you (it does for me at least):
mjx-stretchy-h > mjx-ext > mjx-c::before {
transform: none ! important;
}
mjx-stretchy-h > mjx-ext > mjx-c {
transform: scalex(500);
}
See if that does it for you.
Very impressive to see your skills in action. Your workaround works like a charm. Thank you so much!