Compare Revisions

Authoring MathML

Change Revisions

Revision 399367:

Revision 399367 by Sheppy on

Revision 444969:

Revision 444969 by fred.wang on

Title:
Authoring MathML
Authoring MathML
Slug:
Web/MathML/Authoring
Web/MathML/Authoring
Tags:
"MathML", "MathML Project"
"MathML", "MathML Project"
Content:

Revision 399367
Revision 444969
n8      As indicated in the <a class="external" href="http://www.w3n8      This page explains how to write mathematics using the MathM
>.org/TR/MathML2/#abstract">introduction of the MathML Recommendat>L language. Just like HTML, MathML is an SGML language and thus i
>ion</a>, authors are supposed to use equation editors, conversion>s described with tags and attributes. HTML becomes verbose when y
> programs, and other specialized software tools to generate MathM>our document contains advanced structures like lists or tables bu
>L. This page first describes how to incorporate the code generate>t fortunately there are many generators from simple notations (Wi
>d in a document readable by Mozilla. In the remainder of the page>ki, Markdown, etc), WYSIWYG editors (the one used on the MDN Wiki
>, some tools are briefly described. Of course, the list is by no >, Gecko-based editors like Mozilla's mail client, LibreOffice, et
>means exhaustive and you are invited to check the <a class="exter>c) and other Content Management Systems to help writing Web pages
>nal" href="http://www.w3.org/Math/Software/">W3C MathML software >.
>list</a> where you can find various other tools. If for some reas 
>on you need to know more on how to write MathML code, have a look 
> to <a class="external" href="http://www-archive.mozilla.org/proj 
>ects/mathml/authoring.html" title="http://www-archive.mozilla.org 
>/projects/mathml/authoring.html">Roger B. Sidje's authoring guide 
>lines</a> or the <a href="/en/MathML/Element" title="en/MathML/El 
>ement">MathML element reference</a>. 
9    </p>
10    <p>
11      Mathematical notations are even more complex with structure
 >s like fractions, square roots or matrices that are likely to req
 >uire their own tags. As a consequence, good MathML authoring tool
 >s are more important and we describe some open source tools below
 >. Of course, the list is by no means exhaustive and you are invit
 >ed to check out the <a class="external" href="http://www.w3.org/M
 >ath/Software/">W3C MathML software list</a> where you can find va
 >rious other tools.
12    </p>
13    <p>
14      Note that by design, MathML is well-integrated in HTML5 and
 > in particular you can use usual Web features like CSS, DOM, Java
 >script or SVG. This is out of the scope of this document but anyo
 >ne with basic knowledge of Web languages will easily be able to m
 >ix these features with MathML. Check out <a href="/en-US/docs/Moz
 >illa/MathML_Project#Sample_MathML_Documents" title="/en-US/docs/M
 >ozilla/MathML_Project#Sample_MathML_Documents">our demos</a> and 
 ><a href="/en-US/docs/Web/MathML/" title="en/MathML/Element">MathM
 >L references</a> for more details.
n14      Example in HTML5 (text/html) {{ gecko_minversion_inline("2.n20      Using MathML in HTML pages {{ gecko_minversion_inline("2.0"
>0") }}>) }}
n17      Starting with Gecko 2.0 (Firefox 4.0) you can use MathML inn23      Starting with Gecko 2.0 (Firefox 4.0) you can use MathML in
>line in HTML5 documents. The new <a class="external" href="http:/>line in HTML5 documents:
>/hacks.mozilla.org/2010/05/firefox-4-the-html5-parser-inline-svg- 
>speed-and-more/" title="http://hacks.mozilla.org/2010/05/firefox- 
>4-the-html5-parser-inline-svg-speed-and-more/">HTML5 parser</a> l 
>iberates MathML and SVG from XML, which makes well-formed XML mar 
>kup unessential. In addition, prefixes for elements (like <code>m 
>ath:math</code>) and name space settings like <code>xmlns="<a cla 
>ss="external" href="http://www.w3.org/1998/Math/MathML" rel="free 
>link">http://www.w3.org/1998/Math/MathML</a>"</code> aren't neces 
>sary anymore. 
n19    <pre class="brush: xml">n25    <pre class="brush: html">
n27&lt;h1&gt;MathML in HTML5&lt;/h1&gt;n33  &lt;h1&gt;MathML in HTML5&lt;/h1&gt;
n29&lt;math display="block"&gt;n
30  &lt;mrow&gt;35  &lt;p&gt;
31    &lt;munderover&gt;36    Square root of two:
32      &lt;mo&gt;&amp;Sum;&lt;/mo&gt;37    &lt;math&gt;
33      &lt;mrow&gt;38      &lt;msqrt&gt;
34        &lt;mi&gt;i&lt;/mi&gt;
35        &lt;mo&gt;=&lt;/mo&gt;
36        &lt;mn&gt;1&lt;/mn&gt;39        &lt;mn&gt;2&lt;/mn&gt;
37      &lt;/mrow&gt;40      &lt;/msqrt&gt;
38      &lt;mi&gt;N&lt;/mi&gt;
39    &lt;/munderover&gt;
40    &lt;msub&gt;
41      &lt;mi&gt;a&lt;/mi&gt;
42      &lt;mi&gt;i&lt;/mi&gt;
43    &lt;/msub&gt;
44  &lt;/mrow&gt;
45&lt;/math&gt;41    &lt;/math&gt;
42  &lt;/p&gt;
nn47    <p>
48      Note that some browsers are not able to render MathML equat
 >ions or only have a limited support. If you want your pages to re
 >nder correctly in all browsers we recommend to use <a href="http:
 >//www.mathjax.org" title="http://www.mathjax.org">MathJax</a> as 
 >a polyfill. For example, add the simple Javascript code below in 
 >your document header or in an external .js file to load MathJax i
 >n non-Gecko browsers:
49    </p>
50    <pre class="brush: js">
51var ua = navigator.userAgent;
52var isGecko = ua.indexOf("Gecko") &gt; -1 &amp;&amp; ua.indexOf("
 >KHTML") === -1;
53if (!isGecko) {
54  var s = document.createElement("script");
55  s.src = "http://cdn.mathjax.org/mathjax/latest/MathJax.js?confi
 >g=MML_HTMLorMML";
56  document.querySelector('head').appendChild(s);
57}
58</pre>
n51      Example in XHTML (application/xhtml+xml)n60      Using MathML in XML documents (XHTML, EPUB, etc)
n54      In prior versions (before Gecko 2.0/Firefox 4.0) it is essen63      If for some reason you need to use MathML in XML documents,
>ntial to serve MathML as <code>application/xhtml+xml</code>. Basi> be sure to satisfy the usual requirements: well-formed document,
>cally you need to follow these requirements:> 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>
55    </p>64      &nbsp;
56    <ol>
57      <li>Mozilla must be asked to parse the document as XML.
58      </li>
59      <li>The document must be a well-formed XML document.
60      </li>
61    </ol>
62    <p>
63      To satisfy the first requirement, it is enough to use local
> files with the extension <code>.xhtml</code>. More generally, yo 
>ur document must be served as <code>application/xhtml+xml</code>. 
> For example, you can use a <code>.htaccess</code> to configure A 
>pache servers and <a class="external" href="http://httpd.apache.o 
>rg/docs/2.2/mod/mod_mime.html#addtype">map an extension to a give 
>n Mime type</a>. 
64    </p>
65    <p>
66      To satisfy the second requirement, the natural choice of XM
>L format is XHTML. By default, formulas are treated as inline mat 
>h. If you prefer to use display math, attach the attribute <code> 
>display="block"</code> to the <code>&lt;math/&gt;</code> element. 
nn78  &lt;p&gt;
79    Square root of two:
80&lt;math xmlns="http://www.w3.org/1998/Math/MathML" display="bloc80    &lt;math xmlns="http://www.w3.org/1998/Math/MathML"&gt;
>k"&gt; 
81  &lt;mrow&gt;
82    &lt;munderover&gt;
83      &lt;mo&gt;&amp;Sum;&lt;/mo&gt;
84      &lt;mrow&gt;81      &lt;msqrt&gt;
85        &lt;mi&gt;i&lt;/mi&gt;
86        &lt;mo&gt;=&lt;/mo&gt;
87        &lt;mn&gt;1&lt;/mn&gt;82        &lt;mn&gt;2&lt;/mn&gt;
88      &lt;/mrow&gt;83      &lt;/msqrt&gt;
89      &lt;mi&gt;N&lt;/mi&gt;
90    &lt;/munderover&gt;
91    &lt;msub&gt;
92      &lt;mi&gt;a&lt;/mi&gt;
93      &lt;mi&gt;i&lt;/mi&gt;
94    &lt;/msub&gt;
95  &lt;/mrow&gt;
96&lt;/math&gt;84    &lt;/math&gt;
85  &lt;/p&gt;
n102      Note that some workarounds exist to use <a href="/@api/dekin91      Note that if you use MathML as a standalone .mml or .svg do
>/files/4260/=mathml_in_html4.zip" title="https://developer.mozill>cuments or inside an EPUB book, it may not always be possible to 
>a.org/@api/deki/files/4260/=mathml_in_html4.zip">MathML inside HT>use MathJax as a polyfill for non-Gecko rendering engines. Hence 
>ML 4 document</a> such as using {{ HTMLElement("object") }}, {{ H>whether MathML can be handled will vary according to the tools us
>TMLElement("iframe") }} or JavaScript, but they are not as conven>ed to read these documents.
>ient/standard as direct embedding of MathML. 
92    </p>
93    <h4 id="Example_in_XHTML_(application.2Fxhtml.2Bxml)">
94      Using MathML in emails
95    </h4>
96    <p>
97      Modern mail clients may send and receive emails in the HTML
 >5 format and thus can use MathML expressions. Be sure to have the
 > "send as HTML" and "view as HTML" options enabled. In Thunderbir
 >d, you can use the "Insert HTML" command to paste your HTML+MathM
 >L 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.<br>
98      <br>
99      Again, the way MathML is handled and the quality of the Mat
 >hML rendering <a href="http://www.maths-informatique-jeux.com/blo
 >g/frederic/?post/2012/11/14/Writing-mathematics-in-emails#c121" t
 >itle="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.
nn104    <h3 id="Abiword">
105      Abiword
106    </h3>
107    <p>
108      Abiword contains a small equation editor, based on itex2MML
 >.
109    </p>
t108      Abiwordt
109    </h3>
110    <p>
111      Abiword contains a small equation editor, based on itex2MML
>. 
112    </p>
113    <h3>

Back to History