Esta es una demostración técnica de algunos extras de Mozilla que aun no han sido definidos en la especificación MathML, pero que no se impide su uso por parte de otra especificación. No son portables , solo fueron creados para mostrar algunas características interesantes de usar código nativo desde el entorno del navegador. Se espera que otros renderizadores ignoren los atributos que no pueden comprender mientras estos extras permanezcan indefinidos.
HTML Content
<p>Mouse over either log to see a tooltip showing the title
<math display="block">
<mrow>
<mrow>
<msub title="Base-a log">
<mi>log</mi>
<mi>a</mi>
</msub>
<mo>⁡</mo>
<mi>x</mi>
</mrow>
<mo>=</mo>
<mfrac>
<mrow>
<mi title="Natural log">ln</mi>
<mo>⁡</mo>
<mi>x</mi>
</mrow>
<mrow>
<mi title="Natural log">ln</mi>
<mo>⁡</mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
Rather than repeating the instructions,
some CSS might be used to provide a visual cue. For example
with the style rule: <code style="white-space: nowrap;">*[title] { color: blue; }</code>
<math class="cue" display="block">
<mrow>
<mrow>
<msub title="Base-a log">
<mi>log</mi>
<mi>a</mi>
</msub>
<mo>⁡</mo>
<mi>x</mi>
</mrow>
<mo>=</mo>
<mfrac>
<mrow>
<mi title="Natural log">ln</mi>
<mo>⁡</mo>
<mi>x</mi>
</mrow>
<mrow>
<mi title="Natural log">ln</mi>
<mo>⁡</mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
</p>
CSS Content
math.cue *[title] { color: blue; }
Mezclando con otras marcas
HTML Content
<math display="block">
<mrow>
<mi>A</mi>
<mo>=</mo>
<mo>[</mo>
<mtable>
<mtr>
<mtd><mn>1</mn></mtd>
<mtd>
<mtext>
<img width="16" height="16"
src="https://www.mozilla.org/images/mozilla-16.png"
alt="mozilla-16" />
</mtext>
</mtd>
</mtr>
<mtr>
<mtd>
<mtext><input value="type" size="4"/></mtext>
</mtd>
<mtd><mn>4</mn></mtd>
</mtr>
</mtable>
<mo>]</mo>
</mrow>
</math>
<math display="block">
<msqrt>
<mpadded width="30px" height="15px" depth="15px" voffset="-15px">
<mtext>
<svg width="30px" height="30px">
<defs>
<radialGradient id="radGrad1" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%"
style="stop-color:rgb(255,255,255); stop-opacity:1;"/>
<stop offset="100%"
style="stop-color:rgb(255,0,0); stop-opacity:.8;"/>
</radialGradient>
</defs>
<g transform="translate(15,15)">
<g>
<animateTransform attributeName="transform"
attributeType="XML" type="rotate"
from="360" to="0"
dur="15s" repeatCount="indefinite"/>
<g transform="translate(-15, -15)">
<path fill="url(#radGrad1)"
d="M 15 0 L 20 10 L 30 15 L 20 20 L 15 30
L 10 20 L 0 15 L 10 10"/>
</g>
</g>
</g>
</svg>
</mtext>
</mpadded>
</msqrt>
<mo>=</mo>
<msubsup>
<mo>∫</mo>
<mn>0</mn>
<mfrac>
<mi>π</mi>
<mn>2</mn>
</mfrac>
</msubsup>
<msup>
<mi>θ</mi>
<mtext>
<svg width="15px" height="15px">
<defs>
<radialGradient id="radGrad2" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%"
style="stop-color:rgb(255,255,255); stop-opacity:1;"/>
<stop offset="100%"
style="stop-color:rgb(0,0,255); stop-opacity:.9;"/>
</radialGradient>
</defs>
<g>
<animateMotion path="M0,0 L3,0 L2,5 L5,5 L0,4 L5,2 z"
begin="0s" dur="0.5s" repeatCount="indefinite"/>
<circle fill="url(#radGrad2)" r="5px" cx="5px" cy="5px"/>
</g>
</svg>
</mtext>
</msup>
<mrow>
<mo>ⅆ</mo>
<mi>θ</mi>
</mrow>
</math>
<div style="width: 300px; margin-left: auto; margin-right: auto;">
<svg width="300px" height="250px">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/>
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
</linearGradient>
<radialGradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:.8"/>
</radialGradient>
</defs>
<rect width="300" height="250" fill="url(#grad1)"/>
<g transform="translate(150,125)">
<g>
<animateTransform attributeName="transform"
attributeType="XML" type="rotate" from="0" to="360"
dur="6s" repeatCount="indefinite"/>
<g transform="translate(-50,-35)">
<rect width="100" height="70" fill="url(#grad2)"/>
<switch>
<foreignObject width="100" height="70"
requiredExtensions="https://www.w3.org/1998/Math/MathML">
<math display="block">
<mrow>
<mo>(</mo>
<mtable>
<mtr>
<mtd><mi>cos</mi><mi>θ</mi></mtd>
<mtd><mo>−</mo><mi>sin</mi><mi>θ</mi></mtd>
</mtr>
<mtr>
<mtd><mi>sin</mi><mi>θ</mi></mtd>
<mtd><mi>cos</mi><mi>θ</mi></mtd>
</mtr>
</mtable>
<mo>)</mo>
</mrow>
</math>
</foreignObject>
<text>rotation matrix</text>
</switch>
</g></g></g>
<g>
<animateMotion path="M 32,69 C 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z"
begin="0s" dur="20s" repeatCount="indefinite"/>
<animateTransform attributeName="transform"
attributeType="XML" type="scale"
values="1;2;.5;1" keyTimes="0;.25;.75;1" dur="20s"
repeatCount="indefinite"/>
<circle fill="url(#grad3)" r="30"/>
<g transform="translate(-30,-30)">
<switch>
<foreignObject width="60" height="60"
requiredExtensions="https://www.w3.org/1998/Math/MathML">
<math display="block">
<mrow>
<munderover>
<mo>∑</mo>
<mrow>
<mi>n</mi>
<mo>=</mo>
<mn>0</mn>
</mrow>
<mrow>
<mo>+</mo>
<mi>∞</mi>
</mrow>
</munderover>
<mfrac>
<msup>
<mi>α</mi>
<mi>n</mi>
</msup>
<mrow>
<mi>n</mi>
<mo>!</mo>
</mrow>
</mfrac>
</mrow>
</math>
</foreignObject>
<text>exp(α)</text>
</switch>
</g>
</g>
</svg>
</div>
JavaScript Incorporado
HTML Content
<math display="block">
<mfrac>
<mtext id="num">Mouse</mtext>
<mtext id="denum">Over</mtext>
</mfrac>
</math>
JavaScript Content
function whoIsThereAlert(evt)
{
alert("Who is there?");
}
function attachListener(id)
{
document.getElementById(id).addEventListener("mouseover", whoIsThereAlert);
}
function init()
{
attachListener("num");
attachListener("denum");
}
window.addEventListener("load", init);