htmlcsshrefmathjaxmathml

How to make MathJax equation render properly in href?

I want to make a hyperlink which contains an equation. I am using MathJax for the equation. The part of the link which contains the equation is not underlined.

Here is a minimal example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

</head>
<body>
<a href="some link">Hello world \(2 + 2 =4\) (note that the equation is not underlined)</a>
</body>
</html>

Here is what it looks like: enter image description here

Solution

  • Underlining mathematical equations is not easy, because they can go quite a lot below the baseline if they contain subscripts. The browser typesets the equation only after it has typeset the rest of the link, therefore it does not yet know how much the equation will go below the baseline when it draws the underline. To be on the safe side, it does not underline equations at all. (Note that the underline also has a gap where the "q" descends below the baseline.)

    You could decide on a case-by-case basis how far to lower the underline. The following example does this by using a padding plus a border at the bottom (you may want a different color for a:visited to indicate whether the link has already been visited).

    a { text-decoration: none; border-bottom: solid 1px blue; }
a#e2 { padding-bottom: 2px; }
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<a id="e1" href="some link">Hello world \(2 + 2 = 4\) (note that the equation is now underlined)</a>
<a id="e2" href="some link">Hello world \(\log_2(2 + 2) = 2\) (note that the equation is now underlined)</a>