mozilla

Revision 333287 of Extras

  • Revision slug: Mozilla_MathML_Project/Extras
  • Revision title: Extras
  • Revision id: 333287
  • Created:
  • Creator: fred.wang
  • Is current revision? No
  • Comment

Revision Content

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)

Mouse over either log to see a tooltip showing the title log a x = ln x ln a Rather than repeating the instructions, some CSS might be used to provide a visual cue. For example with the style rule: *[title] { color: blue; } log a x = ln x ln a

Mixing with other markups

A = [ 1 mozilla-16 4 ] <svg height="30px" width="30px"> <defs> <radialgradient cx="50%" cy="50%" fx="50%" fy="50%" id="radGrad1" r="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"></stop> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"></stop> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attributetype="XML" dur="15s" from="360" repeatcount="indefinite" to="0" type="rotate"></animatetransform> <g transform="translate(-15, -15)"> <path 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" fill="url(#radGrad1)"></path> </g> </g> </g> </svg> = 0 π 2 θ <svg height="15px" width="15px"> <defs> <radialgradient cx="50%" cy="50%" fx="50%" fy="50%" id="radGrad2" r="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"></stop> <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:.9;"></stop> </radialgradient> </defs> <g> <animatemotion begin="0s" dur="0.5s" path="M0,0 L3,0 L2,5 L5,5 L0,4 L5,2 z" repeatcount="indefinite"></animatemotion> <circle cx="5px" cy="5px" fill="url(#radGrad2)" r="5px"></circle> </g> </svg> θ

<svg height="250px" width="300px"> <defs> <lineargradient id="grad1" x1="0%" x2="100%" y1="0%" y2="0%"> <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1"></stop> <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"></stop> </lineargradient> <lineargradient id="grad2" x1="0%" x2="0%" y1="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop> <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"></stop> </lineargradient> <radialgradient cx="50%" cy="50%" fx="50%" fy="50%" id="grad3" r="50%"> <stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"></stop> <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:.8"></stop> </radialgradient> </defs> <rect fill="url(#grad1)" height="250" width="300"></rect> <g transform="translate(150,125)"> <g> <animatetransform attributename="transform" attributetype="XML" dur="6s" from="0" repeatcount="indefinite" to="360" type="rotate"></animatetransform> <g transform="translate(-50,-35)"> <rect fill="url(#grad2)" height="70" width="100"></rect> <switch> <foreignobject height="70" requiredextensions="http://www.w3.org/1998/Math/MathML" width="100"> ( cosθ sinθ sinθ cosθ ) </foreignobject> <text>rotation matrix</text> </switch> </g></g></g> <g> <animatemotion begin="0s" dur="20s" 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" repeatcount="indefinite"></animatemotion> <animatetransform attributename="transform" attributetype="XML" dur="20s" keytimes="0;.25;.75;1" repeatcount="indefinite" type="scale" values="1;2;.5;1"></animatetransform> <circle fill="url(#grad3)" r="30"></circle> <g transform="translate(-30,-30)"> <switch> <foreignobject height="60" requiredextensions="http://www.w3.org/1998/Math/MathML" width="60"> n = 0 + α n n ! </foreignobject> <text>exp(α)</text> </switch> </g> </g> </svg>

Inline JavaScript

Mouse Over

Revision Source

<h2 style="text-align: center;">MathML Extras</h2>
<p>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.</p>
<h2 id="title-attr">The <i>title</i> attribute as a tooltip (<a href="http://www.w3.org/TR/html4/struct/global.html#adef-title">from XHTML</a>)</h2>
<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>
<h2 id="mixing">Mixing with other markups</h2>
<p><math display="block"> <mrow> <mi>A</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext> <img alt="mozilla-16" height="16" src="http://www.mozilla.org/images/mozilla-16.png" width="16" /> </mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input size="4" value="type" /></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mpadded depth="15px" height="15px" voffset="-15px" width="30px"> <mtext> <svg height="30px" width="30px"> <defs> <radialgradient cx="50%" cy="50%" fx="50%" fy="50%" id="radGrad1" r="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"></stop> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"></stop> </radialgradient> </defs> <g transform="translate(15,15)"> <g> <animatetransform attributename="transform" attributetype="XML" dur="15s" from="360" repeatcount="indefinite" to="0" type="rotate"></animatetransform> <g transform="translate(-15, -15)"> <path 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" fill="url(#radGrad1)"></path> </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 height="15px" width="15px"> <defs> <radialgradient cx="50%" cy="50%" fx="50%" fy="50%" id="radGrad2" r="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"></stop> <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:.9;"></stop> </radialgradient> </defs> <g> <animatemotion begin="0s" dur="0.5s" path="M0,0 L3,0 L2,5 L5,5 L0,4 L5,2 z" repeatcount="indefinite"></animatemotion> <circle cx="5px" cy="5px" fill="url(#radGrad2)" r="5px"></circle> </g> </svg> </mtext> </msup> <mrow> <mo>ⅆ</mo> <mi>θ</mi> </mrow> </math></p>
<div style="width: 300px; margin-left: auto; margin-right: auto;">
  <svg height="250px" width="300px"> <defs> <lineargradient id="grad1" x1="0%" x2="100%" y1="0%" y2="0%"> <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1"></stop> <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"></stop> </lineargradient> <lineargradient id="grad2" x1="0%" x2="0%" y1="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop> <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"></stop> </lineargradient> <radialgradient cx="50%" cy="50%" fx="50%" fy="50%" id="grad3" r="50%"> <stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"></stop> <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:.8"></stop> </radialgradient> </defs> <rect fill="url(#grad1)" height="250" width="300"></rect> <g transform="translate(150,125)"> <g> <animatetransform attributename="transform" attributetype="XML" dur="6s" from="0" repeatcount="indefinite" to="360" type="rotate"></animatetransform> <g transform="translate(-50,-35)"> <rect fill="url(#grad2)" height="70" width="100"></rect> <switch> <foreignobject height="70" requiredextensions="http://www.w3.org/1998/Math/MathML" width="100"> <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 begin="0s" dur="20s" 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" repeatcount="indefinite"></animatemotion> <animatetransform attributename="transform" attributetype="XML" dur="20s" keytimes="0;.25;.75;1" repeatcount="indefinite" type="scale" values="1;2;.5;1"></animatetransform> <circle fill="url(#grad3)" r="30"></circle> <g transform="translate(-30,-30)"> <switch> <foreignobject height="60" requiredextensions="http://www.w3.org/1998/Math/MathML" width="60"> <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>
<h2 id="inline_javascript">Inline JavaScript</h2>
<p><math display="block"> <mfrac> <mtext id="num">Mouse</mtext> <mtext id="denum">Over</mtext> </mfrac> </math></p>
Revert to this revision