<?xml version="1.0"?>
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
  "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:html="http://www.w3.org/1999/xhtml"
      xmlns:math="http://www.w3.org/1998/Math/MathML"
      xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
>
<!--
  *  The contents of this file are subject to the Mozilla Public
  *  License Version 1.1 (the "License"); you may not use this file
  *  except in compliance with the License. You may obtain a copy of
  *  the License at http://www.mozilla.org/MPL/
  *
  *  Software distributed under the License is distributed on an "AS
  *  IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
  *  implied. See the License for the specific language governing
  *  rights and limitations under the License.
  *
  *  The Original Code is Mozilla MathML Project.
  *
  *  The Initial Developer of the Original Code is The University of
  *  Queensland.  Portions created by The University of Queensland are
  *  Copyright (C) 1999 The University of Queensland.  All
  *  Rights Reserved.
  *
  *  Contributor(s):
  *    Roger B. Sidje <rbs@maths.uq.edu.au>
  -->

<head>
  <title>Mixing MathML with other markup</title>
</head>

<!--
<body style="font-size: 18pt; background-color: gold; background-image: url(resource:/res/samples/raptor.jpg); background-repeat: no-repeat; background-attachment: fixed;">
-->

<body style="font-size: 18pt; background-color: gold; background-image: url(raptor.jpg); background-repeat: no-repeat; background-attachment: fixed;">

<h2 style="text-align: center; color: blue">
Mixing MathML markups and other markups to get special effects</h2>

<br />

A fraction with the animated throbber as denominator...
View the source...

<math mode="display" xmlns="http://www.w3.org/1998/Math/MathML">
  <mfrac linethickness="3">
    <mi>a</mi>
<!--
    <html:img src="resource:/chrome/skins/modern/global/skin/animthrob.gif" />
-->
    <html:img src="animthrob.gif" />
  </mfrac>
</math>

<br />


See the difference between &lt;mi&gt; an &lt;html:i&gt;
(which doesn't understand the scriptlevel) :

<math mode="display" xmlns="http://www.w3.org/1998/Math/MathML">
  <mfrac>
    <mi>a</mi>
    <mi>a</mi>
  </mfrac>

  &nbsp;

  <mfrac>
    <html:i>a</html:i>
    <html:i>a</html:i>
  </mfrac>
</math>

<br />

And there could be more...

<div style="text-align: center">
  <button style="background-color:rgb(192,192,192)">
     <span style="color: brown;">
       For example, a MathML continued fraction inside a HTML button<br />
     </span> 
     <math xmlns="http://www.w3.org/1998/Math/MathML">
       <mrow>
         <mfrac>
           <mi>&pi;</mi>
           <mn>4</mn>
         </mfrac>
         <mo>=</mo>
         <mfrac numalign="left">
            <mstyle scriptlevel="0">
              <mn>1</mn>
            </mstyle>
            <mstyle scriptlevel="0">
               <mrow>
                 <mn>2</mn>
                 <mo>+</mo>
                 <mfrac numalign="left">
                   <mstyle scriptlevel="0">
                     <msup><mn>1</mn><mn>2</mn></msup>
                   </mstyle>
                   <mstyle scriptlevel="0">
                      <mrow>
                        <mn>2</mn>
                        <mo>+</mo>
                        <mfrac numalign="left">
                          <mstyle scriptlevel="0">
                            <msup><mn>3</mn><mn>2</mn></msup>
                          </mstyle>               
                          <mstyle scriptlevel="0">
                            <mrow>
                               <mn>2</mn>
                               <mo>+</mo>
                               <mfrac numalign="left">
                                 <mstyle scriptlevel="0">
                                   <msup><mn>5</mn><mn>2</mn></msup>
                                 </mstyle>
                                 <mstyle scriptlevel="0">
                                   <mrow>
                                      <mn>2</mn>
                                      <mo>+</mo>
                                      <mfrac numalign="left">
                                        <mstyle scriptlevel="0">
                                          <msup><mn>7</mn><mn>2</mn></msup>
                                        </mstyle>
                                        <mstyle scriptlevel="0">
                                          <mn>2</mn><mo>+</mo><mo fontweight="bold">...</mo>
                                        </mstyle>
                                      </mfrac>
                                    </mrow>
                                 </mstyle>
                               </mfrac>
                             </mrow>
                          </mstyle>
                        </mfrac>
                      </mrow>
                   </mstyle>
                 </mfrac>      
               </mrow> 
            </mstyle> 
         </mfrac>  
      </mrow>
    </math>
  </button>
</div>

</body>
</html>

