Improper height of MathJax in the div element

Question

Improper height of MathJax in the div element

I'm currently investigating why the MathJax render block is giving me an incorrect height for the div. Here's the code snippet:

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

Here's the associated CSS:

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

When executing the following JavaScript snippet:

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

The console outputs:

41 41 41.25 "41.25px"

However, upon inspection in the elements tab:

https://i.sstatic.net/wWhjD.png

The actual height doesn't match any of the height values retrieved via JS. What could be causing this discrepancy and how can I obtain an accurate height value?

javascript html css height mathjax

Answer 1

Answer №1

The issue arises from the time taken by MathJax to generate the visualization. My solution involves allowing MathJax sufficient time to process before determining the size of the element.

I have developed two versions of the code, both functioning correctly across various browsers such as Firefox, Chrome, and Edge.

Method 1:

This script waits for MathJax to load, then provides an additional 100ms for it to finalize before calculating the dimensions 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>

Method 2

This script also waits for MathJax to load and then starts measuring the dimensions of the element. Once the dimensions stabilize, it returns 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>

Answer 2

The issue arises from the time taken by MathJax to generate the visualization. My solution involves allowing MathJax sufficient time to process before determining the size of the element.

I have developed two versions of the code, both functioning correctly across various browsers such as Firefox, Chrome, and Edge.

Method 1:

This script waits for MathJax to load, then provides an additional 100ms for it to finalize before calculating the dimensions 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>

Method 2

This script also waits for MathJax to load and then starts measuring the dimensions of the element. Once the dimensions stabilize, it returns 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>

Improper height of MathJax in the div element

Answer №1

Similar questions

The background color of social media links spills over onto other links, creating a messy overlap

AngularJS ui-router, html5Mode, and Express causing "Cannot GET" error in nested state

npm ERROR! 404 Content removed by unidentified source on August 8, 2022 at 09:20:35.527 UTC

Expand the video comparison slider to occupy the entire width and height

How can I collapse the dropdown menu in typeahead.js?

When you drag and drop multiple items, the entire data set is erased

The issue with Nextjs getStaticPaths is that it is not retrieving data from Firebase Firestore

Finding the perfect regex pattern to extract bank transaction information

A unique technique for creating a stunning visual effect with images using

Capturing C# log data for JavaScript interactions

Pass a selected object to a dropdown/select change event using AngularJS

In Javascript, determine the root cause of a boolean expression failing by logging the culprit

What is the best way to align icons in the center alongside text or paragraphs using react?

Having trouble locating an element on a webpage? When inspecting the element, are you noticing that the HTML code differs from the source page?

The validation directive is run on each individual item within the ng-repeat loop

AngularJS - Retaining the initial value without submitting

Trouble with Firebase/Firestore documentation queries in JavaScript

The React.js Redux reducer fails to add the item to the state

Use jquery ajax to upload an image with a reusable input field

Error Loading Collada Texture: Three.js Cross Origin Issue