mozilla

Revision 534985 of Authoring MathML

• Raccourci de la révision : Web/MathML/Authoring
• Titre de la révision : Authoring MathML
• ID de la révision : 534985
• Créé :
• Créateur : fred.wang
• Version actuelle ? Non
• Commentaire

Contenu de la révision

Cette page explique comment écrire des formules mathématiques en utilisant le langage MathML. A l'instar du HTML, le MathML est décrit par des balises et des attributs. Le code source HTML devient lourd lorque votre document contient des structures avancées telles que des listes ou tableaux mais heureusement il existe plusieurs générateurs de HTML à partir de notations simples, des éditeurs WYSIWYG ainsi que des systèmes de gestions de contenu (CMS) qui aide à l'écriture de page Web.

Les notations mathématiques sont encore plus complexes, avec des structures telles que les fractions, les racines carré ou les matrices qui sont susceptibles de nécessiter leur propres balisage. Par conséquent, de bons outils d'édition MathML sont encore plus importants et nous en décrivons quelques-uns ci-dessous. En particulier, l'équipe MathML de Mozilla a développé TeXZilla, un convertisseur Javascript de LaTeX vers MathML compatible avec Unicode, dont le but est d'être utilisé dans divers scenari décrits ici. Bien sûr, la liste n'est pas exhaustive et vous êtes invité à jeter un oeil à la  liste du W3C des logiciels MathML (en) où vous pouvez trouver divers outils.

Notez que MathML est conçu pour être bien intégré au HTML5 et en particulier vous pouvez utiliser les concepts Web usuels tels que CSS, DOM, Javascript ou SVG. Cela ne rentre pas dans le cadre de ce document mais n'importe qui avec les connaissances de base des langages Web pourra facilement mélanger ceux-ci avec le MathML. Allez voir nos démos et la référence MathML pour plus de détails.

Using MathML

MathML in HTML pages

You can use Presentation MathML inside HTML5 documents:

<!DOCTYPE html>
<html>
<title>MathML in HTML5</title>
<body>

<h1>MathML in HTML5</h1>

<p>
Square root of two:
$<msqrt> <mn>2</mn> </msqrt>$
</p>

</body>
</html>

Content MathML is not supported by browsers. It's recommended to convert your Content MathML markup into Presentation MathML before publishing it, for example with the help of the ctop.xsl  stylesheet. Tools mentioned on this page generates Presentation MathML.

Fallback for Browsers without MathML support

Unfortunately, some browsers are not able to render MathML equations or only have a limited support. In that case, you will need to do some browser detection technique and load a MathML polyfill as needed. For example, the following UA string sniffing will allow to detect the rendering engines with native MathML support (Gecko and WebKit):

var ua = navigator.userAgent;
var isGecko = ua.indexOf("Gecko") > -1 && ua.indexOf("KHTML") === -1 && ua.indexOf('Trident') === -1;
var isWebKit = ua.indexOf('AppleWebKit') > -1 && ua.indexOf('Chrome') === -1;

UA string sniffing is not the most reliable method and might break from version to version. An alternative is to do feature detection, for instance the following function try to detect MathML by checking the support for the mspace element:

function hasMathMLSupport() {
var div = document.createElement("div"), box;
div.innerHTML = "$<mspace height='23px' width='77px'/>$";
document.body.appendChild(div);
box = div.firstChild.firstChild.getBoundingClientRect();
return Math.abs(box.height - 23) <= 1  && Math.abs(box.width - 77) <= 1;
}
mathml-sniffing
HTML Content
<pre id="result"></pre>
JavaScript Content
var ua = navigator.userAgent;
var isGecko = ua.indexOf("Gecko") > -1 && ua.indexOf("KHTML") === -1 && ua.indexOf('Trident') === -1;
var isWebKit = ua.indexOf('AppleWebKit') > -1 && ua.indexOf('Chrome') === -1;

function hasMathMLSupport() {
var div = document.createElement("div"), box;
div.innerHTML = "$<mspace height='23px' width='77px'/>$";
document.body.appendChild(div);
box = div.firstChild.firstChild.getBoundingClientRect();
return Math.abs(box.height - 23) <= 1  && Math.abs(box.width - 77) <= 1;
}

{
document.getElementById("result").textContent = "Result in your browser:\n\n  isGecko: " + isGecko + "\n  isWebKit: " + isWebKit + "\n  hasMathMLSupport(): " + hasMathMLSupport();
}

{{ EmbedLiveSample('mathml-sniffing', '100%', '150px') }}

We recommend to use MathJax as a MathML polyfill. For example, add the simple Javascript code below in your document header or in an external javascript file to load MathJax in non-Gecko browsers:

if (!isGecko) {
var s = document.createElement("script");
s.src = "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=MML_HTMLorMML";
}

Note however that MathJax is a heavy Javascript library, so in some situations you might prefer a small mathml.css stylesheet with only limited constructions for basic mathematics. For instance to load it in browser without MathML support:

if (!hasMathMLSupport()) {
s.href = "http://fred-wang.github.io/mathml.css/mathml.css";
s.rel = "stylesheet";
}

Mathematical fonts

Note: browsers can only use a limited set of mathematical fonts to draw stretchy MathML operators. However, implementation of the OpenType MATH table is in progress in Gecko & WebKit. This will provide a generic support for mathematical fonts and simplify the settings described in this section.

To get a good mathematical rendering in browsers, some MathML fonts are required. It's a good idea to provide to your visitors a link to the MDN page that explains how to install MathML fonts. Alternatively, you can just make them available as Web fonts. You can get these fonts from the MathML-fonts add-on ; the xpi is just a zip archive that you can fetch and extract for example with the following command:

unzip mathml-fonts.zip -d mathml-fonts

Then copy the mathml-fonts/resource/ directory somewhere on your Web site and ensure that the woff files are served with the correct MIME type. Finally, include the mathml-fonts/resource/mathml.css style sheet in your Web pages, for example by adding the following rule to the default style sheet of your Web site:

@import url('/path/to/resource/mathml.css');

You then need to modify the font-family on the $elements and, for Gecko, the on ::-moz-math-stretchy pseudo element too. For example to use STIX fonts: math { font-family: STIXGeneral; } ::-moz-math-stretchy { font-family: STIXNonUnicode, STIXSizeOneSym, STIXSize1, STIXGeneral; } Try the MathML torture test to compare the rendering of various fonts and the CSS rules to select them. MathML in XML documents (XHTML, EPUB, etc) If for some reason you need to use MathML in XML documents, be sure to satisfy the usual requirements: well-formed document, use of correct MIME type, MathML namespace "http://www.w3.org/1998/Math/MathML" on [itex] roots. For example, the XHTML version of the previous example looks like this: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>XHTML+MathML Example</title> </head> <body> <h1>XHTML+MathML Example</h1> <p> Square root of two: <math xmlns="http://www.w3.org/1998/Math/MathML"> <msqrt> <mn>2</mn> </msqrt>$
</p>

</body>
</html>

Note that if you use MathML as a standalone .mml or .svg documents or inside an EPUB book, it may not always be possible to use MathJax as a polyfill for rendering engines without MathML support. Hence whether MathML can be handled will vary according to the tools used to read these documents.

MathML in email and instant messaging clients

Modern mail clients may send and receive emails in the HTML5 format and thus can use MathML expressions. Be sure to have the "send as HTML" and "view as HTML" options enabled. In Thunderbird, you can use the "Insert HTML" command to paste your HTML+MathML code. MathBird is a convenient add-on for Thunderbird to insert such MathML expressions using the AsciiMath input syntax. Again, the way MathML is handled and the quality of the MathML rendering depend on the mail clients. Even if your browser supports MathML, your Webmail may prevent you to send or receive mails with MathML inside.

In theory, Gecko-based instant messaging clients could integrate one of the Javascript-based text-to-MathML converters mentioned below and render the MathML expressions. For example there is an InstantBird add-on to handle LaTeX expressions.

Conversion from a Simple Syntax

There are many simple notations (e.g. wiki or markdown syntaxes) to generate HTML pages. The same is true for MathML: for example ASCII syntaxes as used in calculators or the more powerful LaTeX language, very popular among the scientific community. In this section, we present some of these tools to convert from a simple syntax to MathML.

• pros:
• Writing mathematical expressions may only require a standard text editor.
• Many tools are available, some of them are compatible with the classical LaTeX-to-pdf workflow.
• cons:
• This may be harder to use: people must learn a syntax, typos in the code may easily lead to parsing or rendering errors etc
• The interface is not user-friendly: only code editor without immediate display of the mathematical expression.
• None of the syntax has been standardized, making cross-compatibility between converters difficult. Even the popular LaTeX language keeps having new packages added.

Client-side Conversion

In a Web environment, the most obvious method to convert a simple syntax into a DOM tree is to use Javascript and of course many libraries have been developed to perform that task.

• pros:
• This is a pure Web-based solution: everything is done by the browsers and no other programs must be installed or compiled.
• cons:
• This won't work if the visitor has Javascript disabled.
• The MathML code is not exposed to Web crawlers (e.g. those of math search engines or feed aggregators). In particular, your content won't show up properly on Planet.
• The conversion must be done at each page load, may be slow and may conflict with the HTML parsing (e.g. "<" for tags or "$" for money amounts) • You may need to synchronize the Javascript converter with other Javascript programs on your page. TeXZilla has an <x-tex> custom element, that can be used to write things like <x-tex>\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1</x-tex> and get it automatically converted into MathML. This is still a work-in-progress, but could be improved in the future thanks to Web Components and shadow DOM. Alternatively, you can use the more traditional Javascript parsing of expressions at load time as all the other tools in this section do. One simple client-side conversion tools is ASCIIMathML. Just download the ASCIIMathML.js script and copy it to your Web site. Then on your Web pages, add a <script> tag to load ASCIIMathML and the mathematical expressions delimited by  (grave accent) will be automatically parsed and converted to MathML: <html> <head> ... <script type="text/javascript" src="ASCIIMathML.js"></script> ... </head> <body> ... <p>blah blah x^2 + y^2 = r^2 blah ... ... LaTeXMathML is a similar script that allows to parse more LaTeX commands. The installation is similar: copy LaTeXMathML.js and LaTeXMathML.standardarticle.css, add links in the header of your document and the LaTeX content of your Web page marked by the "LaTeX" class will be automatically parsed and converted to HTML+MathML: <head> ... <script type="text/javascript" src="LaTeXMathML.js"></script> <link rel="stylesheet" type="text/css" href="LaTeXMathML.standardarticle.css" /> ... </head> <body> ... <div class="LaTeX"> \documentclass[12pt]{article} \begin{document} \title{LaTeXML Example} \maketitle \begin{abstract} This is a sample LaTeXML document. \end{abstract} \section{First Section} $$\sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$$ \end{document} </div> ... jqMath is another script to parse a simple LaTeX-like syntax but which also accepts non-ASCII characters like √{∑↙{n=1}↖{+∞} 6/n^2} = π to write $\sqrt{\sum _{n=1}^{+\infty }\frac{6}{{n}^{2}}}=\pi$. The installation is similar: download and copy the relevant Javascript and CSS files on your Web site and reference them in your page header (see the COPY-ME.html file from the zip archive for an example). One of the advantage of jqMath over the previous scripts is that it will automatically add some simple CSS rules to do the mathematical layout and make the formulas readable on browsers with limited MathML support. Another way to work around the lack of MathML support in some browsers is to use MathJax. However, note that you may find conflicts and synchronization issues between MathJax and the Javascript libraries previously mentioned. So if you really want to use MathJax as a MathML polyfill, you'd better use its own LaTeX/ASCIIMath parsers too. Note that on the one hand MathJax has better parsing and rendering support but on the other hand it is much bigger, more complex and slower than the previous Javascript libraries. Fortunately, you can use MathJax's CDN so that you don't need to install it on your Web server. Also, the slowest part of MathJax is currently its HTML-CSS / SVG output modes so we recommend to use the Native MathML output for Gecko-based browsers. Hence a typical configuration to use the AMS-LaTeX input is: ... <script type="text/x-mathjax-config"> MathJax.Hub.Config({ MMLorHTML: { prefer: { Firefox: "MML" } } }); </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script> </head> <body> $\tau = \frac{x}{y} + \sqrt{3}$ ... Note that the dollar delimiters are not used by default. To use the ASCIIMathML input instead, just replace TeX-AMS-MML_HTMLorMML by AM-MML_HTMLorMML. MathJax has many other features, see the MathJax documentation for further details. Command-line Programs An alternative way is to parse the simple syntax before publishing your web pages. That is, you use command-line programs to generate them and publish these static pages on your server. • pros: • You get static Web pages: the LaTeX source don't need to be parsed at each page load, the MathML code is exposed to Web crawlers and you can put them easily on any Web server. • Binary programs may run faster than Javascript programs and can be more sophisticated e.g. have a much complete LaTeX support or generate other formats like EPUB. • You can keep compatibility with other tools to generate pdf e.g. you can use the same .tex source for both latex and latexml. • cons: • This requires to install programs on your computer, which may be a bit more difficult or they may not be available on all platforms. • You must run the programs on your computer and have some kind of workflow to get the Web pages at the end ; that may be a bit tedious. • Binary programs are not appropriate to integrate them in a Mozilla extension or XUL application. TeXZilla can be used from the command line and will essentially have the same support as itex2MML described below. However, the stream filter behavior is not implemented yet. If you only want to parse simple LaTeX mathematical expressions, you might want to try tools like itex2MML or Blahtex. The latter is often available on Linux distributions. Let's consider the former, which was originally written by Paul Gartside at the beginning of the Mozilla MathML project and has been maintained by Jacques Distler since then. It's a small stream filter written in C/C++ and generated with flex and bison ; in particular it is very fast. Install flex/bison as well as the classical compiler and make tools. On Unix, you can then download itex2MML, build and install it: wget http://golem.ph.utexas.edu/~distler/blog/files/itexToMML.tar.gz; \ tar -xzf itexToMML.tar.gz; \ cd itex2MML/itex-src; make sudo make install Now suppose that you have a HTML page with TeX fragments delimited by dollars: input.html ... </head> <body> <p>$\sqrt{a^2-3c}$</p> <p>$${\sum_{i=1}^N i} = \frac{N(N+1)}{2}$$</p> </body> </html> Then to generate the HTML page input.html with TeX expressions replaced by MathML expressions, just do cat input.html | itex2MML > output.html There are even more sophisticated tools to convert arbitrary LaTeX documents into HTML+MathML. For example TeX4ht is often included in TeX distributions and has an option to use MathML instead of PNG images. This command will generate an XHTML+MathML document foo.xml from a foo.tex LaTeX source: mk4ht mzlatex foo.tex # Linux/Mac platforms mzlatex foo.tex # Windows platform LaTeXML is another tool that is still actively developed but the release version is rather old, so you'd better install the development version. In particular, this version can generate HTML5 and EPUB documents. Here is the command to execute in order to create a foo.html Web page from the foo.tex LaTeX source: latexml --dest foo.xml foo.tex latexmlpost --dest foo.html --format=html5 foo.xml If you want to have a MathJax fallback for non-Gecko browsers, copy the Javascript lines given above into a mathjax.js file and use the --javascript parameter to tell LaTeXML to include that file: latexmlpost --dest foo.html --format=html5 --javascript=mathjax.js foo.xml If your LaTeX document is big, you might want to split it into several small pages rather putting everything in a single page. This is especially true if you use the MathJax fallback above, since in that case MathJax will take a lot of time to render the equations in non-Gecko browsers. Use the --splitat parameter for that purpose. For example, this will split the pages at the \section level: latexmlpost --dest foo.html --format=html5 --splitat=section foo.xml Finally, to generate an EPUB document, you can do latexmlc --dest foo.epub --splitat=section foo.xml Server-side Conversion • pros: • Conversion is done server-side and the MathML output can be cached, which is more efficient and cleaner than client-side conversion. • cons: • This might be a bit more difficult to set up, since you need some admin right on your server. TeXZilla can be used as a Web server in order to perform server-side LaTeX-to-MathML conversion. LaTeXML can also be used as a deamon to run server-side. Mathoid is another tool based on MathJax that is also able to perform additional MathML-to-SVG conversion. Instiki is a Wiki that integrates itex2MML to do server-side conversion. In future versions, MediaWiki will support server-side conversion too. Graphical Interface Input Box TeXZilla has several interfaces, including a CKEditor plugin used on MDN, an online demo, a Firefox add-on or a FirefoxOS Webapp. Abiword contains a small equation editor, based on itex2MML. Bluegriffon is a mozilla-based Wysiwyg HTML editor and has an add-on to insert MathML formulas in your document, using ASCII/LaTeX-like syntax. WYSIYWG Editors Firemath is an extension for Firefox that provides a WYSIWYG MathML editor. A preview of the formula is displayed using the rendering engine of Mozilla. The generated MathML code is available at the bottom. Use the text field for token elements and buttons to build advanced constructions. Once you are done, you can save your document as a XHTML page. OpenOffice and LibreOffice have an equation editor (File → New → Formula). It is semi-WYSIWYG: you enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed. The editor uses its own syntax "StarMath" for the source but MathML is also generated when the document is saved. To get the MathML code, save the document as mml and open it with any text editor. Alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called content.xml. Amaya is the W3C's web editor, which is able to handle MathML inside XHTML documents. Use the Elements and the Special Chars panels to create various advanced mathematical constructs. Simple text such as a+2 is automatically parsed and the appropriate MathML markup is generated. Once you are done, you can directly save your XHTML page and open it in Mozilla. Optical Character & Handwriting Recognition Inftyreader is able to perform some Optical Character Recognition, including translation of mathematical equations into MathML. Other tools can do handwriting recognition such as the Windows Math Input Panel or the online converter Web Equation. Original Document Information • Author(s): Frédéric Wang • Other Contributors: Florian Scholz • Copyright Information: Portions of this content are © 2010 by individual mozilla.org contributors; content available under a Creative Commons license | Details. Source de la révision <p>Cette page explique comment écrire des formules mathématiques en utilisant le langage MathML. A l'instar du HTML, le MathML est décrit par des balises et des attributs. Le code source HTML devient lourd lorque votre document contient des structures avancées telles que des listes ou tableaux mais heureusement il existe plusieurs générateurs de HTML à partir de notations simples, des éditeurs WYSIWYG ainsi que des systèmes de gestions de contenu (CMS) qui aide à l'écriture de page Web.</p> <p>Les notations mathématiques sont encore plus complexes, avec des structures telles que les fractions, les racines carré ou les matrices qui sont susceptibles de nécessiter leur propres balisage. Par conséquent, de bons outils d'édition MathML sont encore plus importants et nous en décrivons quelques-uns ci-dessous. En particulier, l'équipe MathML de Mozilla a développé <a href="https://github.com/fred-wang/TeXZilla/">TeXZilla</a>, un convertisseur Javascript de LaTeX vers MathML compatible avec Unicode, dont le but est d'être utilisé dans divers scenari décrits ici. Bien sûr, la liste n'est pas exhaustive et vous êtes invité à jeter un oeil à la&nbsp; <a class="external" href="http://www.w3.org/Math/Software/">liste du W3C des logiciels MathML (en)</a> où vous pouvez trouver divers outils.</p> <p>Notez que MathML est conçu pour être bien intégré au HTML5 et en particulier vous pouvez utiliser les concepts Web usuels tels que CSS, DOM, Javascript ou SVG. Cela ne rentre pas dans le cadre de ce document mais n'importe qui avec les connaissances de base des langages Web pourra facilement mélanger ceux-ci avec le MathML. Allez voir <a href="/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents" title="/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents">nos démos</a> et la <a href="https://developer.mozilla.org/en-US/docs/Web/MathML" title="en/MathML/Element">référence MathML</a> pour plus de détails.</p> <h2 id="Using_MathML">Using MathML</h2> <h4 id="Example_in_HTML5_(text/html)" name="Example_in_HTML5_(text/html)">MathML in HTML pages</h4> <p>You can use Presentation MathML inside HTML5 documents:</p> <pre class="brush: html"> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &nbsp;&lt;title&gt;MathML in HTML5&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &nbsp; &lt;h1&gt;MathML in HTML5&lt;/h1&gt; &nbsp; &lt;p&gt; &nbsp;&nbsp;&nbsp; Square root of two: &nbsp;&nbsp;&nbsp; &lt;math&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;msqrt&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;mn&gt;2&lt;/mn&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/msqrt&gt; &nbsp;&nbsp;&nbsp; &lt;/math&gt; &nbsp; &lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </pre> <p>Content MathML is not supported by browsers. It's recommended to convert your Content MathML markup into Presentation MathML before publishing it, for example with the help of the <a class="external" href="http://code.google.com/p/web-xslt/source/browse/trunk/#trunk/ctop">ctop.xsl</a>&nbsp; stylesheet. Tools mentioned on this page generates Presentation MathML.</p> <h4 id="Fallback_for_Browsers_without_MathML_support">Fallback for Browsers without MathML support</h4> <p>Unfortunately, some browsers are not able to render MathML equations or only have a limited support. In that case, you will need to do some browser detection technique and load a MathML polyfill as needed. For example, the following UA string sniffing will allow to detect the rendering engines with native MathML support (Gecko and WebKit):</p> <pre class="brush: js"> var ua = navigator.userAgent; var isGecko = ua.indexOf("Gecko") &gt; -1 &amp;&amp; ua.indexOf("KHTML") === -1 &amp;&amp; ua.indexOf('Trident') === -1; var isWebKit = ua.indexOf('AppleWebKit') &gt; -1 &amp;&amp; ua.indexOf('Chrome') === -1; </pre> <p>UA string sniffing is not the most reliable method and might break from version to version. An alternative is to do feature detection, for instance the following function try to detect MathML by checking the support for the <a href="/en-US/docs/Web/MathML/Element/mspace">mspace</a> element:</p> <pre class="brush: js"> &nbsp;function hasMathMLSupport() { &nbsp; var div = document.createElement("div"), box; &nbsp; div.innerHTML = "&lt;math&gt;&lt;mspace height='23px' width='77px'/&gt;&lt;/math&gt;"; &nbsp; document.body.appendChild(div); &nbsp; box = div.firstChild.firstChild.getBoundingClientRect(); &nbsp; document.head.remove(div); &nbsp; return Math.abs(box.height - 23) &lt;= 1&nbsp; &amp;&amp; Math.abs(box.width - 77) &lt;= 1; }</pre> <div style="display: none;"> <h5 id="mathml-sniffing" name="mathml-sniffing">mathml-sniffing</h5> <h6 id="HTML_Content">HTML Content</h6> <pre class="brush: html"> &lt;pre id="result"&gt;&lt;/pre&gt; </pre> <h6 id="JavaScript_Content">JavaScript Content</h6> <pre class="brush: js"> var ua = navigator.userAgent; var isGecko = ua.indexOf("Gecko") &gt; -1 &amp;&amp; ua.indexOf("KHTML") === -1 &amp;&amp; ua.indexOf('Trident') === -1; var isWebKit = ua.indexOf('AppleWebKit') &gt; -1 &amp;&amp; ua.indexOf('Chrome') === -1; function hasMathMLSupport() { var div = document.createElement("div"), box; &nbsp; div.innerHTML = "&lt;math&gt;&lt;mspace height='23px' width='77px'/&gt;&lt;/math&gt;"; &nbsp; document.body.appendChild(div); &nbsp; box = div.firstChild.firstChild.getBoundingClientRect(); &nbsp; document.head.remove(div); &nbsp; return Math.abs(box.height - 23) &lt;= 1&nbsp; &amp;&amp; Math.abs(box.width - 77) &lt;= 1; } <span> function load() { document.getElementById("result").textContent = "Result in your browser:\n\n isGecko: " + isGecko + "\n isWebKit: " + isWebKit + "\n hasMathMLSupport(): " + hasMathMLSupport(); } window.addEventListener("load", load, false);</span> </pre> </div> <p>{{ EmbedLiveSample('mathml-sniffing', '100%', '150px') }}</p> <p>We recommend to use <a href="http://www.mathjax.org" title="http://www.mathjax.org">MathJax</a> as a MathML polyfill. For example, add the simple Javascript code below in your document header or in an external javascript file to load MathJax in non-Gecko browsers:</p> <p><a name="mathjax-fallback"></a></p> <pre class="brush: js"> if (!isGecko) { &nbsp; var s = document.createElement("script"); &nbsp; s.src = "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=MML_HTMLorMML"; &nbsp; document.head.appendChild(s); }</pre> <p>Note however that MathJax is a heavy Javascript library, so in some situations you might prefer a small <a href="https://github.com/fred-wang/mathml.css">mathml.css</a> stylesheet with only limited constructions for basic mathematics. For instance to load it in browser without MathML support:</p> <p><a name="css-fallback"></a></p> <pre class="brush: js"> if (!hasMathMLSupport()) { &nbsp; var s = document.createElement("link"); &nbsp; s.href = "http://fred-wang.github.io/mathml.css/mathml.css"; &nbsp; s.rel = "stylesheet"; &nbsp; document.head.appendChild(s); } </pre> <h4 id="Mathematical_fonts">Mathematical fonts</h4> <p><strong>Note: browsers can only use a limited set of mathematical fonts to draw stretchy MathML operators. However, implementation of the OpenType MATH table is in progress in Gecko &amp; WebKit. This will provide a generic support for mathematical fonts and simplify the settings described in this section.</strong></p> <p>To get a good mathematical rendering in browsers, some <a href="/docs/Mozilla/MathML_Project/Fonts" title="/docs/Mozilla/MathML_Project/Fonts">MathML fonts</a> are required. It's a good idea to provide to your visitors a link to the <a href="/docs/Mozilla/MathML_Project/Fonts" title="/docs/Mozilla/MathML_Project/Fonts">MDN page that explains how to install MathML fonts</a>. Alternatively, you can just make them available as Web fonts. You can get these fonts from the <a href="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/" title="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/">MathML-fonts add-on</a> ; the xpi is just a zip archive that you can fetch and extract for example with the following command:</p> <pre class="brush: bash"> wget https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xpi -O mathml-fonts.zip; \ unzip mathml-fonts.zip -d mathml-fonts</pre> <p>Then copy the <code>mathml-fonts/resource/</code> directory somewhere on your Web site and ensure that the woff files are served with the correct MIME type. Finally, include the <code>mathml-fonts/resource/mathml.css</code> style sheet in your Web pages, for example by adding the following rule to the default style sheet of your Web site:</p> <pre class="brush: css"> @import url('/path/to/resource/mathml.css');</pre> <p><span>You then need to modify the font-family on the &lt;math&gt; elements and</span>, for Gecko, the on ::-moz-math-stretchy pseudo element too. For example to use STIX fonts:</p> <pre> <span class="brush: css"><span class="brush: css">math { font-family: STIXGeneral; } </span>::-moz-math-stretchy { font-family: STIXNonUnicode, STIXSizeOneSym, STIXSize1, STIXGeneral; } </span></pre> <p><span>Try the <a href="/docs/Mozilla/MathML_Project/MathML_Torture_Test" title="/docs/Mozilla/MathML_Project/MathML_Torture_Test">MathML torture test</a></span> to compare the rendering of various fonts and the CSS rules to select them.</p> <h4 id="MathML_in_XML_documents_(XHTML.2C_EPUB.2C_etc)">MathML in XML documents (XHTML, EPUB, etc)</h4> <p>If for some reason you need to use MathML in XML documents, be sure to satisfy the usual requirements: well-formed document, use of correct MIME type, MathML namespace <code>"http://www.w3.org/1998/Math/MathML"</code> on <code>&lt;math&gt;</code> roots. For example, the XHTML version of the previous example looks like this:<br /> &nbsp;</p> <pre class="brush: xml"> &lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" &nbsp;"http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &nbsp;&lt;title&gt;XHTML+MathML Example&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;XHTML+MathML Example&lt;/h1&gt; &nbsp; &lt;p&gt; &nbsp;&nbsp;&nbsp; Square root of two: &nbsp;&nbsp;&nbsp; &lt;math xmlns="http://www.w3.org/1998/Math/MathML"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;msqrt&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;mn&gt;2&lt;/mn&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/msqrt&gt; &nbsp;&nbsp;&nbsp; &lt;/math&gt; &nbsp; &lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </pre> <p>Note that if you use MathML as a standalone .mml or .svg documents or inside an EPUB book, it may not always be possible to use MathJax as a polyfill for rendering engines without MathML support. Hence whether MathML can be handled will vary according to the tools used to read these documents.</p> <h4 id="MathML_in_email_and_instant_messaging_clients">MathML in email and instant messaging clients</h4> <p>Modern mail clients may send and receive emails in the HTML5 format and thus can use MathML expressions. Be sure to have the "send as HTML" and "view as HTML" options enabled. In Thunderbird, you can use the "Insert HTML" command to paste your HTML+MathML code. <a href="http://disruptive-innovations.com/zoo/MathBird/" title="http://disruptive-innovations.com/zoo/MathBird/">MathBird</a> is a convenient add-on for Thunderbird to insert such MathML expressions using the AsciiMath input syntax. Again, the way MathML is handled and the quality of the MathML rendering <a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails#c121" title="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails#c121">depend on the mail clients</a>. Even if your browser supports MathML, your Webmail may prevent you to send or receive mails with MathML inside.</p> <p>In theory, Gecko-based instant messaging clients could integrate one of the Javascript-based text-to-MathML converters mentioned below and render the MathML expressions. For example there is an <a href="https://addons.instantbird.org/en-US/instantbird/addon/340" title="https://addons.instantbird.org/en-US/instantbird/addon/340">InstantBird add-on</a> to handle LaTeX expressions.</p> <h2 id="Conversion_from_a_Simple_Syntax">Conversion from a Simple Syntax</h2> <p>There are many simple notations (e.g. wiki or markdown syntaxes) to generate HTML pages. The same is true for MathML: for example ASCII syntaxes as used in calculators or the more powerful LaTeX language, very popular among the scientific community. In this section, we present some of these tools to convert from a simple syntax to MathML.</p> <ul> <li>pros: <ul> <li>Writing mathematical expressions may only require a standard text editor.</li> <li>Many tools are available, some of them are compatible with the classical LaTeX-to-pdf workflow.</li> <li>This gives access to advanced features of LaTeX like macros.</li> </ul> </li> <li>cons: <ul> <li>This may be harder to use: people must learn a syntax, typos in the code may easily lead to parsing or rendering errors etc</li> <li>The interface is not user-friendly: only code editor without immediate display of the mathematical expression.</li> <li>None of the syntax has been standardized, making cross-compatibility between converters difficult. Even the popular LaTeX language keeps having new packages added.</li> </ul> </li> </ul> <h3 id="Client-side_Conversion">Client-side Conversion</h3> <p>In a Web environment, the most obvious method to convert a simple syntax into a DOM tree is to use Javascript and of course many libraries have been developed to perform that task.</p> <ul> <li>pros: <ul> <li>This is very easy setup: only a few Javascript and CSS files to upload and/or a link to add to your document header.</li> <li>This is a pure Web-based solution: everything is done by the browsers and no other programs must be installed or compiled.</li> </ul> </li> <li>cons: <ul> <li>This won't work if the visitor has Javascript disabled.</li> <li>The MathML code is not exposed to Web crawlers (e.g. those of math search engines or feed aggregators). In particular, your content won't show up properly on Planet.</li> <li>The conversion must be done at each page load, may be slow and may conflict with the HTML parsing (e.g. "&lt;" for tags or "$" for money amounts)</li>
<li>You may need to synchronize the Javascript converter with other Javascript programs on your page.</li>
</ul>
</li>
</ul>
<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> has an <a href="https://github.com/fred-wang/x-tex">&lt;x-tex&gt;</a> custom element, that can be used to write things like</p>
<pre>
<span class="brush: html">&lt;<span class="start-tag">x-tex</span>&gt;</span><span>\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1</span><span class="brush: html">&lt;/<span class="end-tag">x-tex</span>&gt;</span></pre>
<p>and get it automatically converted into MathML. This is still a work-in-progress, but could be improved in the future thanks to Web Components and shadow DOM. Alternatively, you can use the more traditional <a href="https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#parsing-tex-expressions-in-your-web-page">Javascript parsing of expressions at load time</a> as all the other tools in this section do.</p>
<p>One simple client-side conversion tools is&nbsp;<a href="http://www1.chapman.edu/~jipsen/mathml/asciimath.html" title="http://www1.chapman.edu/~jipsen/mathml/asciimath.html">ASCIIMathML</a>. Just download the <a href="http://mathcs.chapman.edu/~jipsen/mathml/ASCIIMathML.js" title="http://mathcs.chapman.edu/~jipsen/mathml/ASCIIMathML.js">ASCIIMathML.js</a> script and copy it to your Web site. Then on your Web pages, add a <code>&lt;script&gt;</code> tag to load ASCIIMathML and the mathematical expressions delimited by <code></code> (grave accent) will be automatically parsed and converted to MathML:</p>
<pre class="brush: html">
&lt;html&gt;
...
&lt;script type="text/javascript" src="ASCIIMathML.js"&gt;&lt;/script&gt;
...
&lt;body&gt;
...
&lt;p&gt;blah blah x^2 + y^2 = r^2 blah ...
...
</pre>
<p><a href="http://math.etsu.edu/LaTeXMathML/" title="http://math.etsu.edu/LaTeXMathML/">LaTeXMathML</a> is a similar script that allows to parse more LaTeX commands. The installation is similar: copy <a href="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.js" title="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.js">LaTeXMathML.js</a> and <a href="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.standardarticle.css" title="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.standardarticle.css">LaTeXMathML.standardarticle.css</a>, add links in the header of your document and the LaTeX content of your Web page marked by the "LaTeX" class will be automatically parsed and converted to HTML+MathML:</p>
<pre class="brush: html">
<span>...
</span><span>&lt;<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://math.etsu.edu/LaTeXMathML/LaTeXMathML.js">LaTeXMathML.js</a>"&gt;</span><span>&lt;/<span class="end-tag">script</span>&gt;</span><span>
</span><span>&lt;<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">stylesheet</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text/css</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://math.etsu.edu/LaTeXMathML/LaTeXMathML.standardarticle.css">LaTeXMathML.standardarticle.css</a>" <span>/</span>&gt;</span><span>
...

</span><span>&lt;<span class="start-tag">body</span>&gt;</span><span>
...

</span>&lt;div class="LaTeX"&gt;
\documentclass[12pt]{article}

\begin{document}

\title{LaTeXML Example}
\maketitle

\begin{abstract}
This is a sample LaTeXML document.
\end{abstract}

\section{First Section}

&nbsp; $$\sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6}$$

\end{document}
&lt;/div&gt;
...</pre>
<p><a href="http://mathscribe.com/author/jqmath.html" title="http://mathscribe.com/author/jqmath.html">jqMath</a> is another script to parse a simple LaTeX-like syntax but which also accepts non-ASCII characters like&nbsp; <code>√{∑↙{n=1}↖{+∞} 6/n^2} = π</code>&nbsp; to write $<mrow> <msqrt> <mrow class="ma-repel-adj"> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>1</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <mn>6</mn> <msup> <mi>n</mi> <mn>2</mn> </msup> </mfrac> </mrow> </msqrt> <mo>=</mo> <mi>π</mi> </mrow>$. The installation is similar: download and copy the relevant <a href="http://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip" title="http://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip">Javascript and CSS files</a> on your Web site and reference them in your page header (see the <code>COPY-ME.html</code> file from the zip archive for an example). One of the advantage of jqMath over the previous scripts is that it will automatically add some simple CSS rules to do the mathematical layout and make the formulas readable on browsers with limited MathML support.</p>
<p><a name="mathjax"></a>Another way to work around the lack of MathML support in some browsers is to use <a href="http://www.mathjax.org/" title="http://www.mathjax.org/">MathJax</a>. However, note that you may find conflicts and synchronization issues between MathJax and the Javascript libraries previously mentioned. So if you really want to use MathJax as a MathML polyfill, you'd better use its own LaTeX/ASCIIMath parsers too. Note that on the one hand MathJax has better parsing and rendering support but on the other hand it is much bigger, more complex and slower than the previous Javascript libraries. Fortunately, you can use MathJax's CDN so that you don't need to install it on your Web server. Also, the slowest part of MathJax is currently its HTML-CSS / SVG output modes so we recommend to use the Native MathML output for Gecko-based browsers. Hence a typical configuration to use the AMS-LaTeX input is:</p>
<pre class="brush: html">
...
&nbsp;&nbsp;&nbsp; &lt;script type="text/x-mathjax-config"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; MathJax.Hub.Config({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; MMLorHTML: { prefer: { Firefox: "MML" } }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });
&nbsp;&nbsp;&nbsp; &lt;/script&gt;
&nbsp;&nbsp;&nbsp; &lt;script type="text/javascript"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"&gt;
&nbsp;&nbsp; &lt;/script&gt;
&nbsp; &lt;body&gt;
&nbsp;&nbsp; $\tau = \frac{x}{y} + \sqrt{3}$
...
</pre>
<p>Note that <a href="http://docs.mathjax.org/en/latest/tex.html#tex-and-latex-math-delimiters" title="http://docs.mathjax.org/en/latest/tex.html#tex-and-latex-math-delimiters">the dollar delimiters are not used by default</a>. To use the ASCIIMathML input instead, just replace <code>TeX-AMS-MML_HTMLorMML</code> by <code>AM-MML_HTMLorMML</code>.&nbsp; MathJax has many other features, see the <a href="http://docs.mathjax.org/en/latest/" title="http://docs.mathjax.org/en/latest/">MathJax documentation</a> for further details.</p>
<h3 id="Command-line_Programs">Command-line Programs</h3>
<p>An alternative way is to parse the simple syntax before publishing your web pages. That is, you use command-line programs to generate them and publish these static pages on your server.</p>
<ul>
<li>pros:
<ul>
<li>You get static Web pages: the LaTeX source don't need to be parsed at each page load, the MathML code is exposed to Web crawlers and you can put them easily on any Web server.</li>
<li>Binary programs may run faster than Javascript programs and can be more sophisticated e.g. have a much complete LaTeX support or generate other formats like EPUB.</li>
<li>You can keep compatibility with other tools to generate pdf e.g. you can use the same .tex source for both latex and latexml.</li>
</ul>
</li>
<li>cons:
<ul>
<li>This requires to install programs on your computer, which may be a bit more difficult or they may not be available on all platforms.</li>
<li>You must run the programs on your computer and have some kind of workflow to get the Web pages at the end ; that may be a bit tedious.</li>
<li>Binary programs are not appropriate to integrate them in a Mozilla extension or XUL application.</li>
</ul>
</li>
</ul>
<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> can be used <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla#usage-from-the-command-line">from the command line</a> and will essentially have the same support as itex2MML described below. However, the stream filter behavior is not implemented yet.</p>
<p>If you only want to parse simple LaTeX mathematical expressions, you might want to try tools like <a href="http://golem.ph.utexas.edu/~distler/blog/itex2MML.html" title="http://golem.ph.utexas.edu/~distler/blog/itex2MML.html">itex2MML</a> or <a href="http://gva.noekeon.org/blahtexml/" title="http://gva.noekeon.org/blahtexml/">Blahtex</a>. The latter is often available on Linux distributions. Let's consider the former, which was originally written by Paul Gartside at the beginning of the Mozilla MathML project and has been maintained by Jacques Distler since then. It's a small stream filter written in C/C++ and generated with flex and bison ; in particular it is very fast. Install flex/bison as well as the classical compiler and make tools. On Unix, you can then download itex2MML, build and install it:</p>
<pre class="brush: bash">
wget http://golem.ph.utexas.edu/~distler/blog/files/itexToMML.tar.gz; \
tar -xzf itexToMML.tar.gz; \
cd itex2MML/itex-src;
make
sudo make install
</pre>
<p>Now suppose that you have a HTML page with TeX fragments delimited by dollars:</p>
<pre class="brush: html">
input.html

...
&lt;body&gt;
&lt;p&gt;$\sqrt{a^2-3c}$&lt;/p&gt;
&lt;p&gt;$${\sum_{i=1}^N i} = \frac{N(N+1)}{2}$$&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>Then to generate the HTML page input.html with TeX expressions replaced by MathML expressions, just do</p>
<pre>
cat input.html | itex2MML &gt; output.html</pre>
<p>There are even more sophisticated tools to convert arbitrary LaTeX documents into HTML+MathML. For example <a href="https://www.tug.org/tex4ht/">TeX4ht</a> is often included in TeX distributions and has an option to use MathML instead of PNG images. This command will generate an XHTML+MathML document foo.xml from a foo.tex LaTeX source:</p>
<pre>
mk4ht mzlatex foo.tex # Linux/Mac platforms
mzlatex foo.tex       # Windows platform
</pre>
<p><a href="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> is another tool that is still actively developed but the release version is rather old, so you'd better <a href="https://github.com/KWARC/LaTeXML">install the development version</a>. In particular, this version can generate HTML5 and EPUB documents. Here is the command to execute in order to create a foo.html Web page from the foo.tex LaTeX source:</p>
<pre>
latexml --dest foo.xml foo.tex
latexmlpost --dest foo.html --format=html5 foo.xml
</pre>
<p>If you want to have a MathJax fallback for non-Gecko browsers, copy the <a href="#mathjax-fallback">Javascript lines given above</a> into a <code>mathjax.js</code> file and use the <code>--javascript</code> parameter to tell LaTeXML to include that file:</p>
<pre>
latexmlpost --dest foo.html --format=html5 --javascript=mathjax.js foo.xml
</pre>
<p>If your LaTeX document is big, you might want to split it into several small pages rather putting everything in a single page. This is especially true if you use the MathJax fallback above, since in that case MathJax will take a lot of time to render the equations in non-Gecko browsers. Use the <code>--splitat</code> parameter for that purpose. For example, this will split the pages at the <code>\section</code> level:</p>
<pre>
latexmlpost --dest foo.html --format=html5 --splitat=section foo.xml
</pre>
<p>Finally, to generate an EPUB document, you can do</p>
<pre>
latexmlc --dest foo.epub --splitat=section foo.xml
</pre>
<h3 id="Server-side_Conversion">Server-side Conversion</h3>
<ul>
<li>pros:
<ul>
<li>Conversion is done server-side and the MathML output can be cached, which is more efficient and cleaner than client-side conversion.</li>
</ul>
</li>
<li>cons:
<ul>
<li>This might be a bit more difficult to set up, since you need some admin right on your server.</li>
</ul>
</li>
</ul>
<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> can be <a href="https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#using-texzilla-as-a-web-server">used as a Web server</a> in order to perform server-side LaTeX-to-MathML conversion. <a href="http://dlmf.nist.gov/LaTeXML/">LaTeXML</a> can also be used as a deamon to run server-side. <a href="https://github.com/gwicke/mathoid">Mathoid</a> is another tool based on MathJax that is also able to perform additional MathML-to-SVG conversion.</p>
<p><a href="http://instiki.org/show/HomePage">Instiki</a> is a Wiki that integrates itex2MML to do server-side conversion. In future versions, <a href="https://www.mediawiki.org/wiki/MediaWiki">MediaWiki</a> will support server-side conversion too.</p>
<h2 id="Graphical_Interface">Graphical Interface</h2>
<h3 id="Input_Box">Input Box</h3>
<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> has several interfaces, including a <a href="http://ckeditor.com/addon/texzilla">CKEditor plugin</a> used on MDN, an <a href="http://fred-wang.github.io/TeXZilla/">online demo</a>, a <a href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/">Firefox add-on</a> or a <a href="http://r-gaia-cs.github.io/TeXZilla-webapp/">FirefoxOS Webapp</a>. <a href="http://abisource.org/">Abiword</a> contains a small equation editor, based on itex2MML.<a href="http://www.bluegriffon.com/"> Bluegriffon</a> is a mozilla-based Wysiwyg HTML editor and has an add-on to insert MathML formulas in your document, using ASCII/LaTeX-like syntax.</p>
<p style="text-align: center;"><img alt="BlueGriffon" src="http://www.bluegriffon.com/public/shots/mathml-shot1.png" style="width: 358px; height: 467px;" /></p>
<h3 id="WYSIYWG_Editors">WYSIYWG Editors</h3>
<p><a href="http://www.firemath.info/">Firemath</a> is an extension for Firefox that provides a WYSIWYG MathML editor. A preview of the formula is displayed using the rendering engine of Mozilla. The generated MathML code is available at the bottom. Use the text field for token elements and buttons to build advanced constructions. Once you are done, you can save your document as a XHTML page.</p>
<p><a href="http://www.openoffice.org/">OpenOffice</a> and <a href="http://libreoffice.org/">LibreOffice</a> have an equation editor (File → New → Formula). It is semi-WYSIWYG: you enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed. The editor uses its own syntax "StarMath" for the source but MathML is also generated when the document is saved. To get the MathML code, save the document as mml and open it with any text editor. Alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called <code>content.xml</code>.</p>
<p style="text-align: center;"><img alt="Open Office Math" src="/@api/deki/files/4261/=openoffice.png" style="width: 483px; height: 527px;" /></p>
<p><a href="http://www.w3.org/Amaya/">Amaya</a> is the W3C's web editor, which is able to handle MathML inside XHTML documents. Use the Elements and the Special Chars panels to create various advanced mathematical constructs. Simple text such as <code>a+2</code> is automatically parsed and the appropriate MathML markup is generated. Once you are done, you can directly save your XHTML page and open it in Mozilla.</p>
<h2 id="Optical_Character_.26_Handwriting_Recognition">Optical Character &amp; Handwriting Recognition</h2>
<p><a href="http://www.inftyreader.org/">Inftyreader</a> is able to perform some Optical Character Recognition, including translation of mathematical equations into MathML. Other tools can do handwriting recognition such as the <a href="http://windows.microsoft.com/en-za/windows7/use-math-input-panel-to-write-and-correct-math-equations">Windows Math Input Panel</a></p>
<p style="text-align: center;"><img alt="Windows Math Input Panel" src="http://res1.windows.microsoft.com/resbox/en/windows%207/main/50f56cb9-478c-48e9-867e-8de06e1d4190_46.jpg" style="width: 410px; height: 385px;" /></p>
<p>or the online converter <a href="http://webdemo.visionobjects.com/" title="http://webdemo.visionobjects.com/portal.html">Web Equation</a>.</p>
<div class="originaldocinfo">
<h3 id="Original_Document_Information">Original Document Information</h3>
<ul>
<li>Author(s): Frédéric Wang</li>
<li>Other Contributors: Florian Scholz</li>
<li>Copyright Information: Portions of this content are © 2010 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li>
</ul>
</div>
<p>&nbsp;</p>