Extras 编辑

MathML Extras

This is a technology demonstration of some of the extras in Mozilla but not defined in the MathML spec, and not prevented by the spec either. They are not portable and are meant to showcase a few interesting upshots from building natively upon the browser environment. Other renderers are expected to ignore attributes that they don't understand while the behavior of undefined elements is well, undefined.

The title attribute as a tooltip (from XHTML)

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>&ApplyFunction;</mo>
<mi>x</mi>
</mrow>
<mo>=</mo>
<mfrac>
<mrow>
<mi title="Natural log">ln</mi>
<mo>&ApplyFunction;</mo>
<mi>x</mi>
</mrow>
<mrow>
<mi title="Natural log">ln</mi>
<mo>&ApplyFunction;</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>&ApplyFunction;</mo>
<mi>x</mi>
</mrow>
<mo>=</mo>
<mfrac>
<mrow>
<mi title="Natural log">ln</mi>
<mo>&ApplyFunction;</mo>
<mi>x</mi>
</mrow>
<mrow>
<mi title="Natural log">ln</mi>
<mo>&ApplyFunction;</mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
</p>

CSS Content

math.cue *[title] { color: blue; }

Mixing with other markups

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.wenjiangs.com/wp-content/uploads/2020/mozilla/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="http://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="http://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>

Inline JavaScript

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);