<?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"
[
  <!ENTITY mathml "http://www.w3.org/1998/Math/MathML">
]>
<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;">

<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="chrome://communicator/skin/brand/throbber-anim.gif" />
  </mfrac>
</math>

Fill the gaps in this matrix with input fields
<math mode="display" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
  <mo>[</mo>
  <mtable>
    <mtr>
      <mtd><mi>a</mi></mtd>
      <mtd><html:input value="?" size="1"/></mtd>
    </mtr>
    <mtr>
      <mtd><html:input value="?" size="1"/></mtd>      
      <mtd><mi>d</mi></mtd>
    </mtr>
  </mtable>
  <mo>]</mo>
</mrow>
</math>
<br />


See the difference of rendering between <br />

<math xmlns="http://www.w3.org/1998/Math/MathML">
<msup>
  <mi fontstyle="italic">jif</mi>
  <mi fontstyle="italic">jif</mi>
</msup>
</math> -- italic MathML &lt;msup&gt; and

<br />

<span><i>jif</i><sup><i>jif</i></sup></span> -- italic HTML &lt;sup&gt;

<br />
<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, click this MathML continued fraction inside a HTML button<br />
     </span> 
     <math xmlns="&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>
