gecko/layout/mathml/tests/mixing.xml
2012-05-21 12:12:37 +01:00

153 lines
4.7 KiB
XML

<?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"
>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<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>
<div>
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"
alt="throbber" />
</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 mathvariant="italic">jif</mi>
<mi mathvariant="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 mathvariant="bold">...</mo>
</mstyle>
</mfrac>
</mrow>
</mstyle>
</mfrac>
</mrow>
</mstyle>
</mfrac>
</mrow>
</mstyle>
</mfrac>
</mrow>
</mstyle>
</mfrac>
</mrow>
</math>
</button>
</div>
</div>
</body>
</html>