Assistive MML displaced when using text-indent

[LukeNK]

This is one of my first issues, so if I make any mistakes, please let me know.

Issue Summary

<mjx-assistive-mml> and the child element <math> are offset based on the value of text-indent on Microsoft Edge, Windows 11.

Steps to Reproduce:

1. Have a paragraph element with the style text-indent set to a number

The <mjx-assistive-mml> should be perfectly on the displayed math, but this time it is offset by the value of text-indent. Moreover, if you try to resize the page close to the equation itself, it will trigger the x-overflow scroll bar:

Technical details:

• MathJax Version: 3.2.3
• Client OS: Window 11 Home 23H2 build 22631.5039
• Browser: Microsoft Edge version 134.0.3124.83

I am using the following MathJax configuration:

window.MathJax = {
    tex: {
        tags: 'ams',
        inlineMath: [['$', '$']],
    }
};

and loading MathJax via

(() => {
    var script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js';
    script.async = true;
    document.head.appendChild(script);
})();

Supporting information:

This problem also appears when I use tex-svg.js. I tried disabling stuff with the following options:

    options: {
        enableMenu: false,
        enableAssistiveMml: false,
        assistiveMml: false,
    }

JSbin file: https://jsbin.com/bazotuj

[dpvc]

Can you add the CSS

mjx-assistive-mml {
  text-indent: 0 ! important;
  bottom: 0;
  right: 0;
}

to your page and see if that resolves the issue for you?

Note: your jsBin link seems to be broken, so I can't test your exact file, but this should take care of the issue.

[LukeNK]

Can you add the CSS

mjx-assistive-mml {
text-indent: 0 ! important;
bottom: 0;
right: 0;
}
to your page and see if that resolves the issue for you?

Note: your jsBin link seems to be broken, so I can't test your exact file, but this should take care of the issue.

I have tested your solution and it works! However, do you think I should keep this issue open? I think having the Assistive MML being displaced like that really messes up with CSS, considering it took me half an hour to figure out why my page has x-overflow despite setting the size of everything correctly. Let me know your opinion!

(btw, sorry for the broken JSbin; I fixed it. I hope it is right this time...)

[dpvc]

Yes, leave it open for now. I will include the fix in a future PR, and will close this when that is merged.