Closed nioclass closed 1 year ago
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:
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).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!
Feel free to reopen if you need further assistance! Best of luck!
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.