CODEWITHSUNDEEP
javascripthtmlcssheightmathjax
ixokoro
ixokoro

Reputation: 3

MathJax in div incorrect height

I am trying to figure out why MathJax render block gives me the wrong height for the div. The code is

<div class="text-field" id='inner-text'>\(\sqrt{b^{a}\frac{\partial y}{\partial x}}\)</div>

with CSS

.text-field {
    display: inline-block;
    overflow: hidden;
    max-width: 15em;
}

When the following JS snippet is run

  MathJax.typeset();
  let text = document.getElementById("inner-text");
  console.log(text.clientHeight,
              text.offsetHeight,
              text.getBoundingClientRect().height,
              window.getComputedStyle(text).getPropertyValue('height'));

The console gives

41 41 41.25 "41.25px"

However, in inspect elements:

enter image description here

The actual height does not agree with any of height options accessible via JS. What is going on and how should can a get an accurate height value?

Upvotes: 0

Views: 432

Answers (1)

54ka
54ka

Reputation: 3589

The problem is that it takes MathJax time to create the visualization. The idea of the solution I made is to give time to MathJax and when it is ready then we take the size of the element.

I made two versions of the code. Both work correctly in Firefox, Chrome, Edge... etc.

Option 1:

The script waits for MathJax to load then gives it another 100ms to complete and then takes the size of the inner-text

var checkEx = setInterval(function () {
    let wrap = document.getElementById("inner-text");
    var text = wrap.getElementsByClassName('MathJax')[0];
    if (text) {
        setTimeout(() => {
            console.log(wrap.getBoundingClientRect().height, wrap.getBoundingClientRect().width);
        }, 100);
        clearInterval(checkEx);
    }
}, 100);
.text-field {
    display: inline-block;
    overflow: hidden;
    max-width: 15em;
}
<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>


<div class="text-field" id='inner-text'>\(\sqrt{b^{a}\frac{\partial y}{\partial x}}\)</div>

Option 2

The script waits for MathJax to load then begins to take the size of the element. When the size stops changing... return the size of the inner-text

var elhg;
var elwg;

var checkEx = setInterval(function () {
    let wrap = document.getElementById("inner-text");
    var text = wrap.getElementsByClassName('MathJax')[0];
    if (text) {

        elHeight = wrap.getBoundingClientRect().height;
        elWidth = wrap.getBoundingClientRect().width;

        if (elhg === elHeight && elwg === elWidth) {
            console.log(elHeight, elWidth);
            clearInterval(checkEx);
        }

        elhg = elHeight;
        elwg = elWidth;
    }
}, 100);
.text-field {
    display: inline-block;
    overflow: hidden;
    max-width: 15em;
}
<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>

<div class="text-field" id='inner-text'>\(\sqrt{b^{a}\frac{\partial y}{\partial x}}\)</div>

Upvotes: 1

Related Questions