How to get the width of MathJax Render?

[nioclass]

Is there a way to get the width of a mathjax expression? (In pixels or character count for example? ) I want to know if the expression will fit on the screen without a horizontal scroll.

[fast-reflexes]

Hi!

I think this is a general HTML question rather than a MathJax or better-react-mathjax question. There are multiple ways of getting the width of an HTML element, all with its own perks. You can Google it and you'll find a lot of answers which might teach you about how they differ. The one I usually use is <ELEMENT>.getBoundingClientRect().width. To apply it in your scenario you either:

• Keep the math content you want to measure in a single MathJax component. Wrap this component in a <span> (if the inline flag is set and you're typesetting inline content) or in a div (if the inline flag is not set and you're typesetting display math, however this will always be 100% wide). Store the references to these elements using useRef and measure them in the onTypeset callback of the MathJax component in question. You have to do this in that callback AFTER typesetting because otherwise you will get the width of the containers BEFORE typesetting (if you only use a useEffect for example).
• If you have so much math on your page you need to keep multiple expressions in the same MathJax element for performance reasons, then you need to find out which generated MathJax element you want to measure and then run a plain old document.getElementByTagName(<TAG>) to get ahold of all such elements and then find the one you want to measure and run getBoundingClientRect().width on that one, also in the onTypeset callback of the MathJax component holding your content. This involves first doing it without this callback in place trying to find the names of the HTML elements generated by MathJax that you want to measure, then writing an appropriate old-style Javascript query to find the right one and measure it.

I've added an example with how to measure it using the first method in a codesandbox: https://codesandbox.io/s/better-react-mathjax-40-lrzok5

Good luck!

[fast-reflexes]

Feel free to reopen if you need further assistance! Best of luck!