mozilla
Your Search Results

    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="http://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="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);
    

     

    Document Tags and Contributors

    Tags: 
    Contributors to this page: fred.wang, fscholz
    Last updated by: fscholz,