Are single quotes special when they occur in typewriter font?

I want to typeset the Pascal expression

(chr='A') and (num=3)

in MathJax with the number, parentheses, equality signs and logical "and" operator rendered as mathematical symbols and the rest in typewriter font. I use the TeX commands \hbox and \tt to achieve this.

.a mjx-c.mjx-c2019::before {
  content: "\27" !important;
  padding-right: 0.525em !important;
  font-family: MJXZERO, MJXTEX-T;
}

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js" type="text/javascript"></script>
Correct: <span class="math a">\[({\tt chr}=\hbox{\tt 'A'})\land
 ({\tt num}=3)\]</span>
Wrong: <span class="math b">\[({\tt chr}=\hbox{\tt 'A'})\land
 ({\tt num}=3)\]</span>
Without \hbox: <span class="math c">\[({\tt chr}={\tt 'A'})\land
 ({\tt num}=3)\]</span>

It works, but I need the mysterious CSS style to have the single quotes come out in typewriter font. Without the \hbox the single quotes are rendered as yet a different symbol.

Other characters inside a {\tt ...} come out in typewriter font correctly. Why are single quotes treated differently?

Solution

First, if you use CSS to change the size of characters used by MathJax, it won't know the size of the expression anymore and may get things like fractions, roots, overbraces, etc., wrong. So you shouldn't do that.

There are several ways you could approach the problem. First, the issue is being caused by the textmacros extension that is used to process macros in text mode. In TeX, the ` and ' characters are are used to form "smart quotes" like ‘ and ’, or “ and ”, and since MathJax's fonts are unicode-based, MathJax turns ` and ' into their unicode versions, U+2018 (‘) and U+2019 (’), and the pairs `` and '' into U+201C (“) and U+201D (”). In the MathJax fonts, the monospace font doesn't include these smart quote characters, and so it falls back on the normal variant for those. That is why you are seeing a non-monospaced version. (In your last example, the expression is in math-mode not text-mode, so the ' is interpreted as ^\prime, as the \tt only applies to letters and numbers in math-mode. So you are getting a prime character. This is true in both MathJax and actual TeX.)

So one possible solution is to not use the textmacros extension, so that the characters in text mode are taken verbatim. You can do that as in the following example:

<script>
MathJax = {
  tex: {
    packages: {'[-]': ['textmacros']}
  }
}
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js" type="text/javascript"></script>
\[(\texttt{chr}=\texttt{'A'})\land (\texttt{num}=3)\]

Note that I have used \texttt{...} to get the monospace font in text mode, which is the correct way to do that. Your {\tt ...} is in math mode, and without textmacros, \hbox{\tt ...} will not process the \tt as nothing in text mode is processed.

If you want to continue to use the textmacros extension, then a solution is to define the needed U+2019 and U+201D characters. Here is one way to do that:

    <script>
    MathJax = {
      startup: {
        ready() {
          MathJax.startup.defaultReady();
          const jax = MathJax.startup.document.outputJax;
          const chars = jax.font.variant.monospace.chars;
          chars[0x2019] = [.611, -.287, .525, {f: "T", c: "'"}];
          chars[0x201D] = [.611, -.287, 1.05, {f: "T", c: "''"}];
        }
      }
    }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js" type="text/javascript"></script>
    \[(\texttt{chr}=\texttt{'A'})\land (\texttt{num}=3)\]

You can do something similar for U+2018 and U+201C, if you need those.