MathML Demo: <mspace> - space
The background color of <mspace>
elements has been set to yellow for easier viewing. You can set the width height and depth of mspace
elements (click the math text to view the numeric values that are set).
Interactive Sizing
HTML Content
<p>
Use the control buttons below to adjust the parameters of
the <code>mspace</code> element and see the effects. <br />
Height
<a class="control" href="javascript:upheight();" title="increase height">+</a>/
<a class="control" href="javascript:downheight();" title="decrease height">-</a>
Width
<a class="control" href="javascript:upwidth();" title="increase width">+</a>/
<a class="control" href="javascript:downwidth();" title="decrease width">-</a>
Depth
<a class="control" href="javascript:updepth();" title="increase depth">+</a>/
<a class="control" href="javascript:downdepth();" title="decrease depth">-</a>
<math display="block">
<mstyle displaystyle="true">
<msqrt>
<mrow>
<mn>3</mn>
<mspace style="background-color: yellow" id="thespace" height="0.1ex" depth="0.1ex" width="0.1em" />
<mi>x</mi>
</mrow>
</msqrt>
</mstyle>
</math>
</p>
JavaScript Content
var height=0;
var width=0;
var depth=0;
function upheight() {
height++;
document.getElementById("thespace").setAttribute("height",height+".1ex");
}
function downheight() {
height--;
document.getElementById("thespace").setAttribute("height",height+".1ex");
}
function upwidth() {
width++;
document.getElementById("thespace").setAttribute("width",width+".1em");
}
function downwidth() {
width--;
document.getElementById("thespace").setAttribute("width",width+".1em");
}
function updepth() {
depth++;
document.getElementById("thespace").setAttribute("depth",depth+".1ex");
}
function downdepth() {
depth--;
document.getElementById("thespace").setAttribute("depth",depth+".1ex");
}