CODEWITHSUNDEEP
htmlcsslatexmathjax
Novice
Novice

Reputation: 3

LaTex size is bigger in HTML spoiler

I've typed my LaTex code in spoiler, but the size is difference. Although their font-size are same but it's bigger than normal context. Here is an example.

<span style="font-size: 11pt;">$\alpha\beta\gamma\delta$</span>
<a id="ex1" onclick="document.getElementById('exx1').style.display=''; document.getElementById('ex1').style.display='none';" class="link">[Show]</a>
<span id="exx1" style="display: none">
<a onclick="document.getElementById('exx1').style.display='none'; document.getElementById('ex1').style.display='';" class="link">[Hide]</a><br>
<span style="font-size: 11pt;">$\alpha\beta\gamma\delta$</span>
</span>

How do I fix this?

The fiddle is here.

Upvotes: 0

Views: 196

Answers (2)

Davide Cervone
Davide Cervone

Reputation: 12205

The problem, here, is the display: none setting for the exx1 element. Elements that are display: none aren't laid out by the browser, and their sizes (like (offsetHeight and offsetWidth) aren't available, so MathJax can't determine the size of the surrounding font, or measure any of the elements that it needs to in order to typeset the mathematics. In order to handle math that is in a container that is display: none, it temporarily typesets it in the <body> and then moves the result to the original location. That means that the font matching is done to the main body font, not the font at the location. That is probably the source of the issue here. The difference between browsers may have to do with the difference in default fonts in use for the body element.

I recommend that you not use display: none if the contents contains mathematics. There are several other techniques that can be employed to get similar results, mostly involving use of visibility: hidden and setting the height to 0. See the examples from my talk at the January 2013 JMM (in particular the one on display:none).

Upvotes: 2

Palec
Palec

Reputation: 13551

MathJax generates different HTML & CSS markup for the two formulas. The first one has font-size: 126% while the second one has font-size: 130%.

The problem is in the HTML-CSS output processor, specifically in its matchFontHeight option. When set to false, both formulas have the same font-size. See http://jsfiddle.net/C6tyz/3/.

The interesting thing is that the formulas are assigned different font-size only when initially the first one is shown and the second one is hidden. I assume that MathJax generates the second one just before it is displayed for the first time and therefore the calculated font-size is influenced by the first formula, which is already displayed.

No workaround leaving matchFontHeight: true comes to my mind.

Upvotes: 1

Related Questions