There are a couple of ways to go about this. Your suggestion of inserting a placeholder and overlaying it is one, which can be done as follows:
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function () {
var PX = function (x) {return x.toFixed(2) + 'px'};
var space = document.getElementById('space');
var sbox = space.getBoundingClientRect();
var math = MathJax.Hub.getJaxFor(space).SourceElement().previousSibling;
var mbox = math.getBoundingClientRect();
var x = sbox.left - mbox.left;
var y = sbox.top - mbox.top;
var html = MathJax.HTML.Element('div', {id:'html', style: {
position:'absolute', top:PX(y), left:PX(x),
width:PX(sbox.width), height:PX(sbox.height), 'line-height':'normal'
}}, [[
'table',{style:{height:'100%', width:'100%', background:'red', border:'5px solid green'}}, [[
'tr',{},[[
'td',{},['abc']
]]
]]
]]);
math.style.position = 'relative';
math.appendChild(html);
});
</script>
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS_CHTML" defer></script>
<div style="xfont-size: 150%">
$$x + \left(\,\cssId{space}{\Space{100px}{55px}{45px}}\,\right) + y$$
</div>
Here we use \Space to insert a blank area of the desired width, height, and depth, and \cssId to mark the space so we can retrieve it later. We use MathJax.Hub.Queue() to queue a function to run after MathJax typesets the math. This function looks up the space-holder element and finds the container element that MathJax uses to hold the math. It gets the bounding box information for each, and computes the position of the overlay in relation to the math. Then it created the overlay (the content is hardcoded in this instance), with the proper size and potion to lay over top of the space-holder.
This works, but is a bit awkward, and for displayed equations, if the window size changes, the overlay may not stay in the correct position. Also, it is only set up to work for CommonHTML output.
An alternative is the following, which uses the a <semantics> element to include HTML into the internal MathML structure used by MathJax. It adds a new macro \insertHTML{} that does it.
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
CommonHTML: {
styles: {
//
// remove CSS for '.mjx-math *'
//
'.mjx-math *': {
display: null,
'-webkit-box-sizing': null,
'-moz-box-sizing': null,
'box-sizing': null,
'tex-align': null
},
//
// add CSS for .mjx-math span instead
//
'.mjx-math span': {
display: 'inline-block',
'-webkit-box-sizing': 'context-box !important',
'-moz-box-sizing': 'context-box !important',
'box-sizing': 'context-box !important',
'tex-align': 'left'
},
//
// override display for .mjx-char spans
//
'span.mjx-char': {
display: 'block'
}
}
}
});
MathJax.Hub.Register.StartupHook("TeX Jax Ready", function () {
var MML = MathJax.ElementJax.mml;
var TEX = MathJax.InputJax.TeX;
TEX.Definitions.macros.insertHTML = 'InsertHTML';
TEX.Parse.Augment({
InsertHTML: function (name) {
var html = this.GetArgument(name).replace(/^\s*<!--\s*/,'').replace(/\s*-->\s*$/,'');
var span = MathJax.HTML.Element('mjx-reset', {style: {display:'inline-block'}});
span.innerHTML = html; // serious security risk if users can enter math
span.setAttribute("xmlns","http://www.w3.org/1999/xhtml");
var mml = MML["annotation-xml"](MML.xml(span)).With({encoding:"application/xhtml+xml",isToken:true});
this.Push(MML.semantics(mml));
}
});
});
</script>
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS_CHTML" defer></script>
<div style="xfont-size: 150%">
$$x + \left(\,\insertHTML{<!--
<table width="100" height="100"
style="display:inline-table; vertical-align:-.25em; background:red; border:5px solid green;
box-sizing:border-box !important">
<tr><td style="text-align:center">abc</td></tr>
</table>
-->}\,\right) + y$$
</div>
$$x+\left(\insertHTML{<!--
<i>this</i> is <b>html</b>
-->}\right)+y$$
Because MathJax won't process math that contains HTML tag directly, you have to put the HTML in a comment, which you see in the two example expressions above. This version works on all output formats (even MathML output), but it does require a bit of configuration to override some of the CommonHTML CSS that would apply to the content due to it being contained internally within the MathJax layout.
The HTML in this case will stay properly positioned no matter what happens to the window, and it has the advantage of allowing the HTML to be given in the expression itself. Note, however, that this presents a security risk if your site allows users to enter mathematics, since it means that they can enter arbitrary HTML into your page. In this case, you would want to sanitize the HTML prior to setting the innerHTML in the InsertHTML function.
