Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
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");
}