Search code examples
latexmathjaxmathml

MathJax with html background and font color issue

Following html file does not display a LaTex expression (a fraction a/b) in display mode when using html background and font color. Also, in inline mode, with background and font color the denominator cuts the lower edge a quite a bit (as shown in image below). Thank you for giving us MathJax as it helps us so much in many areas of our work.

Html file

<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_HTMLorMML">
</script>
</head>
<body>
A \(\frac{a}{b}\) fraction in inline mode
<br/>
A\[\frac{a}{b}\] fraction in display mode
<br/>
A <span style='color:white;background:black'>\(\frac{a}{b}\)</span> fraction in inline mode with black background and white font
<br/>
A <span style='color:white;background:black'>\[\frac{a}{b}\]</span> fraction in display mode with black background and white font. This one is not displaying fraction.

</body>
</html>

Display on both IE 11 and Chrome:

enter image description here

Solution

  • You can solve it by changing <span style='color:white;background:black'> to <span class='inverted'> and adding this CSS code to your style sheet

    .inverted .math {
    color: white;
    background-color: black;
}

    You might also find CSS Style Objects useful.

    EDIT:

    One way to add this CSS is to change the code inside your <head> tag like this:

    <head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>
  <style type="text/css">
    .inverted .math {
      color: white;
      background-color: black;
    }
  </style> 
</head>

    I would also strongly recommend you to learn the basics of CSS (at least), w3schools tutorials might be really helpful.