Search code examples
csshtml-listsmathjaxcolumn-count

Mathjax font size shrinks when playing with `position` CSS attribute

I want to make a HTML document with a list of math formulas mimicking a \itemize latex environment (i.e. markers should be like "1), 2), etc") and I would like to have a two-columns layout.

For math formulas I use MathJax, for the markers I used the CSS trick at https://stackoverflow.com/a/1636635/3025740 and for two-columns I use the CSS property column-count adding vendor-specific properties as in http://www.w3schools.com/cssref/css3_pr_column-count.asp

Any two of these three mechanisms seem to work fine, but when I mix the three of them it does not: the font size of math formulas (recall, rendered with MathJax) is way too small.

Here is a minimal code to reproduce the problem (tested on Ubuntu 16.04 LTS with Firefox 49.0.2)

<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" async
		  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
		</script>
		<style media="screen">
			ol {
				counter-reset: list;
			}
			ol > li {
				list-style: none;
				/*removing this property fixes MathJax size but breaks markers*/
				position: relative;
			}
			ol > li:before {
				counter-increment: list;
				content: counter(list, decimal) ") ";
				position: absolute;
				left: -1.4em;
			}
			.twocolumns {
		    -webkit-column-count: 2;
		    -moz-column-count: 2;
		    column-count: 2;
			}
		</style>
	</head>
	<body>
		<div class="twocolumns">
			<ol>
				<li>\(2 \times 5\)</li>
				<li>\(4 \times (2 +11)\)</li>
				<li>\(4 \times 5 - 2 \times 7\)</li>
				<li>\(4 \times (87 - 45) + 5 \times 2\)</li>
			</ol>
		</div>
	</body>
</html>

As indicated in the snippet removing position: relative; in ol > li in the CSS fixes the MathJax size issues. Sadly it also breaks the marker trick (markers disapear)

Any idea how to make this work?

Solution

  • MathJax uses a relatively tall box (60ex high) to determine the ex-height of the surrounding font, and it looks like FF and Edge both do something funny with the size of that box in your multi-column setting. They seem to override both the width and height set by MathJax for this box, and so MathJax gets the wrong ex-height (and so sets the wrong font scaling). Since both FF and IE do it, perhaps it is the correct behavior by the HTML or CSS spec, and WebKit is getting it wrong. I haven't tried to figure that out.

    In any case, it turns out that adding overflow:hidden to the CSS for the test element used by MathJax resolves the problem (the browsers don't screw up the height in that case, for reasons beyond my comprehension), so adding

    <script type="text/x-mathjax-config">
MathJax.Hub.Config({
  CommonHTML: {
    styles: {".mjx-ex-box-test": {overflow: "hidden"}}
  }
});
</script>

    to your page, or adding

    .mjx-ex-box-test {
  overflow: hidden;
}

    to your CSS file should resolve the issue.