Search code examples
javascripthtmlcssmathjax

Inline math overlapping with text in MathJax in HTML webpage

The inline math sometimes overlaps with the text that follows. I think I've been able to pinpoint the exact source of the issue, which is a line in the stylesheet, but I don't understand what's going on and how I should fix it.

Here is my style.css (this is enough to reproduce the issue):

section.post *, section > p * {
    max-width: 100%; }

Here's my HTML page:

<html>
   <link href='../stylesheets/style.css' rel='stylesheet' type='text/css' />
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
    TeX: { equationNumbers: { autoNumber: "AMS" } },
    inlineMath: [['$','$'], ['\\(','\\)']],
    processEscapes: true
    });
  </script>
  <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<!-- for mathjax support -->
  </head>
  <body>
    <div id='container'>
      <div class="content">
          <section class='post'>    
    <p>If \(T=100\) then compute \(1/{\sqrt{T}}\) again.</p>
</body>
</html>

Here's what the output looks like:

enter image description here

Any help will be much appreciated!

Solution

  • The css * applies to ALL elements inside other elements. If you remove the stars, it works as expected and since I assume you want the p to be at most 100% wide, such rule should still accomplish what you want.

    As you may know, MathJax takes what is a single element of text from the beginning, and splits it internally into multiple spans based on the designated delimiters it finds. These spans form a rather complicated nested structure (check your browser development tools yourself, there is absolute positioning and MathML and lots of more in there) where some spans have the display property set to inline-block. Now max-width doesn't apply to inline elements but it does to inline-block elements. With your rule, all of these nested spans also get the max-width: 100% rule set.

    We can mimick the behaviour like this:

    .truncated { white-space: nowrap; max-width: 10px; }
.ib { display: inline-block; }
    <p>
  <span class="truncated ib">
    Text that is truncated due to <tt>inline-block</tt> and <tt>max-width</tt>
  </span>
  <span>
    Ensuing text
  </span>
</p>
<p>
  <span class="truncated">
    Text that is not truncated thanks to <tt>inline</tt> and <tt>max-width</tt>
  </span>
  <span>
    Ensuing text
  </span>
</p>

    You need a master of MathJax to get a precise reason as to where and why this happens, but my guess is that during some intermediate step, the content of some inline-block span gets a max-width set indirectly by its parent content or directly through parent css at which point the max-width of the child also gets a meaning (max-width in percent has no meaning when the parent doesn't have a width). When the type-setting proceeds, this child box needs to grow which it can't due to this restriction. The need for growing may come from a font being downloaded or something else and may also differ between expressions since some expressions are typeset in a different way than others.

    I think the lesson here is that you can style elements that MathJax outputs (typically font-size, color etc...) but I would be careful when it comes to styling them with restrictions on dimensional properties (height, width, min-height, min-width, max-height, max-width) because MathJax needs this freedom to do a good job and if you don't have master level insights into the MathJax typesetting procedure, it is also not likely that this type of styling will have the effect you intend it to have.