<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
           "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"
>
<?xml-stylesheet type="text/xsl" href="mathml.xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="cpt-parser.js"/>
<script type="text/javascript"><![CDATA[
function showMathML(target, source) {
  tgt = document.getElementById(target);
  tgt.innerHTML = source;
}
function renderMathML(target, source) {
  srcout = '<?xml version="1.0"?>'
         +  '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"'
         +  '  "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">'
         + '<?xml-stylesheet type="text/xsl" href="./mathml.xsl"?>'
         + '<html xmlns="http://www.w3.org/1999/xhtml">'
         + '<body><div style="float:left;">'
         + source
         + '</div></body></html>'
         + '';  
  var req = new XMLHttpRequest();
  req.open("GET", "mathml.xsl", false);
  req.send(null);
  processor = new XSLTProcessor();
  processor.importStylesheet(req.responseXML);
  var frag = processor.transformToFragment((new DOMParser()).parseFromString(srcout, 'application/xml'),document);
  tgt = document.getElementById(target);
  while (tgt.lastChild) tgt.removeChild(tgt.lastChild);
  tgt.appendChild(frag);
}
function sourceIn(source) {
  document.getElementById('myinputarea').value = source;
}
]]></script>
<title>CPT -- Translator</title>
</head>
<body>
<h1>Content Pseudo-TeX (CPT) -- Translator</h1>
<p>
Designed to be viewed using <a href="http://www.mozilla.org">Firefox 2.0</a> (or higher -- also check
<a href="http://www.mozilla.org/projects/mathml/fonts/">fonts</a>).
Other platforms (such as MSIE 6.0 or higher with Design Science MathPlayer plugin)
may work, but have not been tested.
</p>
<p>  
For an initial glimpse of how the Translator works, click
the "Load example" link at the bottom of this page, then click "Render."
</p>
<p>
For detailed information about the source mark-up syntax, read the
<a href="mathtransdoc.xml">documentation page</a>.
</p>
<p>
For another approach, the source mark-up can also be
<a href="in-page-doc.xml">embedded within a page</a>.
See the <a href="index.xml">list of tools and materials</a>.
</p>
<p><a id="applettop"/></p>
<table><tr><td valign="top">
<strong>Enter source mark-up here:</strong><form action="">
<fieldset style="border:none;">
<textarea id="myinputarea" rows="15" cols="50">Type input source here</textarea><br/>
<input type="button" id="here" value="Render"
    onclick="displaystyle=true;
renderMathML('myrenderlayer',parser.parse(document.getElementById('myinputarea').value));displaystyle=false;
	     showMathML('myoutputlayer','&lt;pre&gt;&lt;![CDATA['+parser.parse(document.getElementById('myinputarea').value)+']]&gt;&lt;/pre&gt;');"/><br/>
</fieldset></form><br/>
</td><td valign="top">
Copy and Paste Content MathML from here (after rendering):
<br/>
<div style="width:450px;height:200px;border:solid;border-width:1px;overflow:auto;" id="myoutputlayer">MathML output here</div>
<br/>
Rendered:<br/>
<div id="myrenderlayer" style="height:100px;width:450px;"></div>
</td></tr></table>
<p><a href="#applettop" 
onclick="sourceIn('\\int[v:x][l:0][u:\\pi;]{\\sin{x}}=2');">
Load example source markup:</a><br/><kbd>\int[v:x][l:0][u:\pi;]{\sin{x}}=2</kbd></p>
</body>
</html>
