MathJax_Display and margin

[kenfeldt]

I am displaying a table of math equations - each row holding some
Mathjax rendered MathML.

Some MathJax elements are wrapped by MathJax_Display elements that add
a 1em margin to top and bottom:

<div class="MathJax_Display" style="width: 100%; position: relative;
text-align: center;" role="textbox" aria-readonly="true">




Other mathjax elements don't have a MathJax display wrapper and render
without a margin.

The result is an inconsistent spacing.

1) What is the rule that determines if a MathJax_Display element is
created (vs. just a MathJax element):

2) The 'margin' style property in MathJax config seems to have no
affect - what do you recommend
to get some consistent rendering of these rows of math?

<script type="text/javascript" src="/js/mathjax/MathJax.js">
MathJax.Hub.Config({
extensions:["mml2jax.js"],
jax:["input/MathML","output/HTML-CSS"],
styles: {
'.MathJax_Display': {
"margin":"1em 0" , // tried different values -
nothing seems to affect margin
"color" : 'red'
}
}

});
</script>

[Davide P. Cervone]

The presence of the display="block" attribute (or the deprecated
mode="display" attribute) on the <math> element is what determines
whether the MathJax_Display wrapper is used. Displayed equations
(i.e., those with display="block") are supposed to be offset from the
text on a separate line, usually centered. This DIV accomplishes that.

You are on the right track by trying to change the style settings, but
since they are set by the HTML-CSS output jax, you need to set them
for that component, not for MathJax as a whole (since otherwise HTML-
CSS will override it). Try

<script type="text/javascript" src="/js/mathjax/MathJax.js">
MathJax.Hub.Config({
extensions:["mml2jax.js"],
jax:["input/MathML","output/HTML-CSS"],

"HTML-CSS": {
styles: {
'.MathJax_Display': {
"margin": 0
}
}
}
});
</script>

I think that will take care of it for you. Otherwise, be sure all
your <math> elements have the same display value (either "block" or
"inline").

Hope that helps.

Davide

[kenfeldt]

Thank you. It now all makes sense as we have been using Javascript to
turn on sequential displays of lines of text in a step-by-step fashion
- using
the 'display' attribute in a rather undisciplined fashion.

Thanks again, your answer is what we needed.