I want to know the dimensions of the bounding box of a formula rendered by mathjax version 4 beta 6.
On ubuntu, it works well on firefox, but it fail on chromium. Chromium gives me a value somewhere between the width before and after rendering.
I tried two methods : getBoundingClientRect and getComputedStyle. They give me the same(but wrong) result in chromium.
here is a minimal working example :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\(', '\)']],
},
startup: {
ready: () => {
MathJax.startup.defaultReady();
MathJax.startup.promise.then(() => {
//the following will give the width after rendering by mathjax
let mydiv = document.getElementById('mydiv');
let style = window.getComputedStyle(mydiv);
console.log(style.getPropertyValue('width'));
console.log(mydiv.getBoundingClientRect().width);
});
}
}
}
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/[email protected]/tex-mml-chtml.js"></script>
</head>
<body>
<div id="mydiv" style="display:inline-block;border:1px solid red">
$f(x)=x^2+2x+1$
</div>
<script type="text/javascript">
// The following lines will give the width before rendering by mathjax
let mydiv = document.getElementById('mydiv');
let style = window.getComputedStyle(mydiv);
console.log(style.getPropertyValue('width'));
console.log(mydiv.getBoundingClientRect().width);
</script>
</body>
</html>
Thanks for your help