diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2021-05-12 14:14:06 -0400 |
|---|---|---|
| committer | Irvin <irvinfly@gmail.com> | 2021-05-15 15:15:41 +0800 |
| commit | 0d9c9f99e04e47510174ff0cfc6f969c6b064635 (patch) | |
| tree | 8eeabb278d2a393e4d3f49a394b4919c857381f7 /files | |
| parent | b5165490983324e64bd3ca11b1b60151cfc1f134 (diff) | |
| download | translated-content-0d9c9f99e04e47510174ff0cfc6f969c6b064635.tar.gz translated-content-0d9c9f99e04e47510174ff0cfc6f969c6b064635.tar.bz2 translated-content-0d9c9f99e04e47510174ff0cfc6f969c6b064635.zip | |
fix external image flaws in Web/MathML/Authoring (zh-cn, zh-tw)
Diffstat (limited to 'files')
| -rw-r--r-- | files/zh-cn/web/mathml/authoring/index.html | 44 | ||||
| -rw-r--r-- | files/zh-tw/web/mathml/authoring/index.html | 251 |
2 files changed, 166 insertions, 129 deletions
diff --git a/files/zh-cn/web/mathml/authoring/index.html b/files/zh-cn/web/mathml/authoring/index.html index 5e247f1680..48fe7f24bf 100644 --- a/files/zh-cn/web/mathml/authoring/index.html +++ b/files/zh-cn/web/mathml/authoring/index.html @@ -10,7 +10,7 @@ translation_of: Web/MathML/Authoring <p>这个页面解释了如何利用 MathML 语言书写数学公式。就像 HTML，MathML 是用标签和属性描述的。当你的文档包含了高级结构比如说列表或表格的时候，HTML 会变得很冗长，但是幸好还有很多来自简单记号法的生成器，“所见即所得”编辑器以及别的内容管理系统可以帮助你编写 Web 网页。</p> -<p>数学公式记号法在结构方面更加复杂，像分数、平方根或者矩阵，很可能需要它们自己的标签。结果是，好的 MathML 编辑工具很重要，我们在下面描述一些工具。值得一说的是，Mozilla MathML 工作小组已经开发出了 <a href="https://github.com/fred-wang/TeXZilla/">TeXZilla</a>，这是一个基于 JavaScript、支持 Unicode 编码的 LaTeX 转 MathML 转换器，is intended to be used in many scenarios described here。当然了，这个列表并不详尽，我们建议你自己去查看 <a href="http://www.w3.org/Math/Software/">W3C MathML软件列表</a>，你可以在那里找到很多别的工具。</p> +<p>数学公式记号法在结构方面更加复杂，像分数、平方根或者矩阵，很可能需要它们自己的标签。结果是，好的 MathML 编辑工具很重要，我们在下面描述一些工具。值得一说的是，Mozilla MathML 工作小组已经开发出了 <a href="https://github.com/fred-wang/TeXZilla/">TeXZilla</a>，这是一个基于 JavaScript、支持 Unicode 编码的 LaTeX 转 MathML 转换器，is intended to be used in many scenarios described here。当然了，这个列表并不详尽，我们建议你自己去查看 <a href="https://www.w3.org/Math/Software/">W3C MathML软件列表</a>，你可以在那里找到很多别的工具。</p> <p>注意，根据设计，MathML 在 HTML5 中是完美整合的，而且你可以使用寻常的 Web 功能，比如说 CSS、DOM、JavaScript 或 SVG。这超出这个文档的范围了，但是任何拥有基础 Web 语言知识的人都能够轻松地学会用 MathML 综合这些功能。请阅读<a href="/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents">我们的文档</a>以及 <a href="/zh-CN/docs/Web/MathML">MathML 参考</a>以了解详情。</p> @@ -41,7 +41,7 @@ translation_of: Web/MathML/Authoring </body> </html> </pre> -<p>浏览器不支持转换 MathML 的内容。建议在发布网页之前，把你的 MathML 内容标记转换成 MathML 表达式，比如说利用 <a class="external" href="http://code.google.com/p/web-xslt/source/browse/trunk/#trunk/ctop">ctop.xsl</a> 样式表作为辅助。本页提到的工具可以生成 MathML 表达式。</p> +<p>浏览器不支持转换 MathML 的内容。建议在发布网页之前，把你的 MathML 内容标记转换成 MathML 表达式，比如说利用 <a class="external" href="https://code.google.com/p/web-xslt/source/browse/trunk/#trunk/ctop">ctop.xsl</a> 样式表作为辅助。本页提到的工具可以生成 MathML 表达式。</p> <h4 id="对不支持_MathML_的浏览器的后备计划">对不支持 MathML 的浏览器的后备计划</h4> @@ -49,7 +49,7 @@ translation_of: Web/MathML/Authoring <pre class="brush: html"><script src="http://fred-wang.github.io/mathml.css/mspace.js"></script></pre> -<p>如果你需要更多复杂的结构，你需要考虑使用更重一些的 <a href="http://www.mathjax.org" title="http://www.mathjax.org">MathJax</a> 库作为一个MathML polyfill：</p> +<p>如果你需要更多复杂的结构，你需要考虑使用更重一些的 <a href="https://www.mathjax.org" title="http://www.mathjax.org">MathJax</a> 库作为一个MathML polyfill：</p> <pre class="brush: html"><script src="http://fred-wang.github.io/mathjax.js/mpadded-min.js"></script></pre> @@ -125,7 +125,7 @@ m|math { <h4 id="电子邮件和即时通讯客户端中的_MathML">电子邮件和即时通讯客户端中的 MathML</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. Moreover, a LaTeX-to-MathML input box has also been integrated into <a href="http://www.seamonkey-project.org/">SeaMonkey</a> since version 2.28 and into <a href="https://www.mozilla.org/thunderbird/">Thunderbird</a> since version 31. 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>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. Moreover, a LaTeX-to-MathML input box has also been integrated into <a href="https://www.seamonkey-project.org/">SeaMonkey</a> since version 2.28 and into <a href="https://www.mozilla.org/thunderbird/">Thunderbird</a> since version 31. 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>Gecko-based instant messaging clients can integrate a Javascript-based text-to-MathML converter (mentioned below) and then render the MathML expressions generated from the (plaintext) instant messages. 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> that handles LaTeX expressions.</p> @@ -177,7 +177,7 @@ m|math { <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 <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><script></code> tag to load ASCIIMathML and the mathematical expressions delimited by <code>`</code> (grave accent) will be automatically parsed and converted to MathML:</p> +<p>One simple client-side conversion tools is <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="https://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><script></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"><html> <head> @@ -191,7 +191,7 @@ m|math { ... </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> +<p><a href="https://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="https://math.etsu.edu/LaTeXMathML/LaTeXMathML.js" title="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.js">LaTeXMathML.js</a> and <a href="https://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 class="start-tag">head</span>></span> <span>... @@ -223,9 +223,9 @@ This is a sample LaTeXML document. </div> ...</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 <code>√{∑↙{n=1}↖{+∞} 6/n^2} = π</code> to write <math> <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> </math>. 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 href="https://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 <code>√{∑↙{n=1}↖{+∞} 6/n^2} = π</code> to write <math> <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> </math>. The installation is similar: download and copy the relevant <a href="https://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> +<p><a name="mathjax"></a>Another way to work around the lack of MathML support in some browsers is to use <a href="https://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">... <script type="text/x-mathjax-config"> @@ -267,7 +267,7 @@ This is a sample LaTeXML document. <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> +<p>If you only want to parse simple LaTeX mathematical expressions, you might want to try tools like <a href="https://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; \ @@ -301,12 +301,12 @@ sudo make install <p>Note that <a href="https://github.com/michal-h21/tex4ebook">tex4ebook</a> relies on TeX4ht to generate EPUB documents.</p> -<p><a href="http://dlmf.nist.gov/LaTeXML/" name="LaTeXML">LaTeXML</a> is another tool that can generate HTML5 and EPUB documents. Windows users can watch this <a href="https://www.youtube.com/watch?v=Dg881w2e-lI">video tutorial</a>. Given a foo.tex LaTeX file, you can use these simple commands:</p> +<p><a href="https://dlmf.nist.gov/LaTeXML/" name="LaTeXML">LaTeXML</a> is another tool that can generate HTML5 and EPUB documents. Windows users can watch this <a href="https://www.youtube.com/watch?v=Dg881w2e-lI">video tutorial</a>. Given a foo.tex LaTeX file, you can use these simple commands:</p> <pre> latexmlc --dest foo.html foo.tex # Generate a HTML5 document foo.html latexmlc --dest foo.epub foo.tex # Generate an EPUB document foo.epub</pre> -<p>To handle the case of browsers without MathML support, you can use the <code>--javascript</code> parameter to tell LaTeXML to include one of the <a href="#Fallback_for_Browsers_without_MathML_support">fallback scripts</a>:</p> +<p>To handle the case of browsers without MathML support, you can use the <code>--javascript</code> parameter to tell LaTeXML to include one of the <a href="#fallback_for_browsers_without_mathml_support">fallback scripts</a>:</p> <pre> latexmlc --dest foo.html --javascript=<code class="language-html"><span class="script token"><span class="tag token"><span class="attr-value token">http://fred-wang.github.io/mathml.css/mspace.js</span></span></span></code> foo.tex # Add the CSS fallback latexmlc --dest foo.html --javascript=<code class="language-html"><span class="script token"><span class="tag token"><span class="attr-value token">http://fred-wang.github.io/mathjax.js/mpadded-min.js</span></span></span></code> foo.tex # Add the MathJax fallback @@ -332,7 +332,7 @@ sudo make install </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="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="https://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> @@ -340,27 +340,25 @@ sudo make install <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="https://marketplace.firefox.com/app/texzilla-1/">FirefoxOS Webapp</a>. It has also been integrated into <a href="http://www.seamonkey-project.org/">SeaMonkey</a> since version 2.28 and into <a href="https://www.mozilla.org/thunderbird/">Thunderbird</a> since version 31.<a href="http://abisource.org/"> Abiword</a> contains a small equation editor, based on itex2MML. Finally,<a href="http://www.bluegriffon.com/"> Bluegriffon</a> has an add-on to insert MathML formulas in your document, using ASCII/LaTeX-like syntax.</p> +<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> has several interfaces, including a <a href="https://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="https://marketplace.firefox.com/app/texzilla-1/">FirefoxOS Webapp</a>. It has also been integrated into <a href="https://www.seamonkey-project.org/">SeaMonkey</a> since version 2.28 and into <a href="https://www.mozilla.org/thunderbird/">Thunderbird</a> since version 31.<a href="http://abisource.org/"> Abiword</a> contains a small equation editor, based on itex2MML. Finally, <a href="http://www.bluegriffon.com/"> Bluegriffon</a> 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="height: 467px; width: 358px;"></p> +<p style="text-align: center;"><img alt="BlueGriffon" src="mathml-shot1.png"></p> <h3 id="所见即所得编辑器">所见即所得编辑器</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="https://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.lyx.org/">LyX</a> is a graphical LaTeX editor, which has built-in support for XHTML+MathML export and can be configured to use similar LaTeX-to-(X)HTML converters. You can for example, you can configure it to <a href="https://github.com/brucemiller/LaTeXML/wiki/Integrating-LaTeXML-into-TeX-editors#lyx">use LaTeXML HTML5/EPUB export</a>.</p> +<p><a href="https://www.lyx.org/">LyX</a> is a graphical LaTeX editor, which has built-in support for XHTML+MathML export and can be configured to use similar LaTeX-to-(X)HTML converters. You can for example, you can configure it to <a href="https://github.com/brucemiller/LaTeXML/wiki/Integrating-LaTeXML-into-TeX-editors#lyx">use LaTeXML HTML5/EPUB export</a>.</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><a href="https://www.openoffice.org/">OpenOffice</a> and <a href="https://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="height: 527px; width: 483px;"></p> +<p style="text-align: center;"><img alt="Open Office Math" src="openoffice.png"></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> +<p><a href="https://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="可选的字符、手写识别">可选的字符、手写识别</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="height: 385px; width: 410px;"></p> +<p><a href="https://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="https://windows.microsoft.com/en-za/windows7/use-math-input-panel-to-write-and-correct-math-equations">Windows Math Input Panel</a></p> <p>or the online converter <a href="http://webdemo.visionobjects.com/" title="http://webdemo.visionobjects.com/portal.html">Web Equation</a>.</p> @@ -370,6 +368,6 @@ sudo make install <ul> <li>作者：Frédéric Wang</li> <li>其他贡献者：Florian Scholz</li> - <li>版权信息：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> + <li>版权信息：Portions of this content are © 2010 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="https://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li> </ul> </div> diff --git a/files/zh-tw/web/mathml/authoring/index.html b/files/zh-tw/web/mathml/authoring/index.html index 1f999fedc1..521584943f 100644 --- a/files/zh-tw/web/mathml/authoring/index.html +++ b/files/zh-tw/web/mathml/authoring/index.html @@ -4,58 +4,58 @@ slug: Web/MathML/Authoring translation_of: Web/MathML/Authoring --- <p> 這裡我們將會介紹該如何利用 MathML 來表達數學語言。如同 HTML， MathML 也是一種 SGML 語言，因此它是以 tag 和 <span style="line-height: 1.5;">attribute 描述的。HTML 在你使用了一些諸如 list 或 table 等結構時將會變得很複雜，索性我們有一些 WYSIWYG 編輯器和其他 Content Management Systems 來協助我們進行開發。</span></p> -<p> 數學符號擁有許多更複雜的結構，如除號, 平方根以及矩陣等，他們都需要分別代表他們的 tags。因此，一個好的 MathML 編輯工具是非常重要的，而接下來我們將介紹一些工具給你。限於篇幅的關係，我們的介紹可能不是十分詳盡，你可以到 <a class="external" href="http://www.w3.org/Math/Software/">W3C MathML software list</a> 查看更進一步的訊息，那裡也介紹了其他的工具。</p> -<p>Note that by design, MathML is well-integrated in HTML5 and in particular you can use usual Web features like CSS, DOM, Javascript or SVG. This is out of the scope of this document but anyone with basic knowledge of Web languages will easily be able to mix these features with MathML. Check out <a href="https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents" title="/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents">our demos</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/MathML" title="en/MathML/Element">MathML references</a> for more details.</p> +<p> 數學符號擁有許多更複雜的結構，如除號, 平方根以及矩陣等，他們都需要分別代表他們的 tags。因此，一個好的 MathML 編輯工具是非常重要的，而接下來我們將介紹一些工具給你。限於篇幅的關係，我們的介紹可能不是十分詳盡，你可以到 <a class="external" href="https://www.w3.org/Math/Software/">W3C MathML software list</a> 查看更進一步的訊息，那裡也介紹了其他的工具。</p> +<p>Note that by design, MathML is well-integrated in HTML5 and in particular you can use usual Web features like CSS, DOM, Javascript or SVG. This is out of the scope of this document but anyone with basic knowledge of Web languages will easily be able to mix these features with MathML. Check out <a href="/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents" title="/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents">our demos</a> and <a href="/en-US/docs/Web/MathML" title="en/MathML/Element">MathML references</a> for more details.</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 language-html"><code class="language-html"><span class="token doctype"><!DOCTYPE html></span> -<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> -<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>MathML in HTML5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> -<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> +<pre class="brush: html language-html"><!DOCTYPE html> +<html> +<head> + <title>MathML in HTML5</title> +</head> +<body> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>MathML in HTML5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> + <h1>MathML in HTML5</h1> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <p> Square root of two: - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>math</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>msqrt</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mn</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mn</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>msqrt</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>math</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <math> + <msqrt> + <mn>2</mn> + </msqrt> + </math> + </p> -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></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> stylesheet. Tools mentioned on this page generates Presentation MathML.</p> +</body> +</html></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="https://code.google.com/p/web-xslt/source/browse/trunk/#trunk/ctop">ctop.xsl</a> 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. Hence you will need to use a MathML polyfill to provide some fallback rendering. If you need only basic mathematical constructions such as those used on this MDN wiki then a small <a href="https://github.com/fred-wang/mathml.css">mathml.css</a> stylesheet might be enough. To use it, just insert one line in your document header:</p> -<pre class="brush: html language-html"><code class="language-html"><span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://fred-wang.github.io/mathml.css/mspace.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span></code></pre> -<p>If you need more complex constructions, you might instead consider using the heavier <a href="http://www.mathjax.org" title="http://www.mathjax.org">MathJax</a> library as a MathML polyfill:</p> -<pre class="brush: html language-html"><code class="language-html"><span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://fred-wang.github.io/mathjax.js/mpadded.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span></code></pre> -<p>Note that these two scripts perform feature detection of the <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mspace">mspace</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/MathML/Element/mpadded">mpadded</a> elements (see the browser compatibility table on these pages). If you don't want to use this link to GitHub but instead to integrate these polyfills or others in your own project, you might need the detection scripts to verify the level of MathML support. For example the following function verifies the MathML support by testing the mspace element (you may replace <code>mspace</code> with <code>mpadded</code>):</p> -<pre class="brush: js language-js"><code class="language-js"> <span class="token keyword">function</span> <span class="token function">hasMathMLSupport<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> - <span class="token keyword">var</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement<span class="token punctuation">(</span></span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> box<span class="token punctuation">;</span> - div<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token string">"<math><mspace height='23px' width='77px'/></math>"</span><span class="token punctuation">;</span> - document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild<span class="token punctuation">(</span></span>div<span class="token punctuation">)</span><span class="token punctuation">;</span> - box <span class="token operator">=</span> div<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span>firstChild<span class="token punctuation">.</span><span class="token function">getBoundingClientRect<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> - document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">removeChild<span class="token punctuation">(</span></span>div<span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">abs<span class="token punctuation">(</span></span>box<span class="token punctuation">.</span>height <span class="token operator">-</span> <span class="token number">23</span><span class="token punctuation">)</span> <span class="token operator"><</span><span class="token operator">=</span> <span class="token number">1</span> <span class="token operator">&&</span> Math<span class="token punctuation">.</span><span class="token function">abs<span class="token punctuation">(</span></span>box<span class="token punctuation">.</span>width <span class="token operator">-</span> <span class="token number">77</span><span class="token punctuation">)</span> <span class="token operator"><</span><span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> -<span class="token punctuation">}</span></code></pre> +<pre class="brush: html language-html"><script src="http://fred-wang.github.io/mathml.css/mspace.js"></script></pre> +<p>If you need more complex constructions, you might instead consider using the heavier <a href="https://www.mathjax.org" title="http://www.mathjax.org">MathJax</a> library as a MathML polyfill:</p> +<pre class="brush: html language-html"><script src="http://fred-wang.github.io/mathjax.js/mpadded.js"></script></pre> +<p>Note that these two scripts perform feature detection of the <a href="/en-US/docs/Web/MathML/Element/mspace">mspace</a> or <a href="/en-US/docs/Web/MathML/Element/mpadded">mpadded</a> elements (see the browser compatibility table on these pages). If you don't want to use this link to GitHub but instead to integrate these polyfills or others in your own project, you might need the detection scripts to verify the level of MathML support. For example the following function verifies the MathML support by testing the mspace element (you may replace <code>mspace</code> with <code>mpadded</code>):</p> +<pre class="brush: js language-js"> function hasMathMLSupport() { + var div = document.createElement("div"), box; + div.innerHTML = "<math><mspace height='23px' width='77px'/></math>"; + document.body.appendChild(div); + box = div.firstChild.firstChild.getBoundingClientRect(); + document.body.removeChild(div); + return Math.abs(box.height - 23) <= 1 && Math.abs(box.width - 77) <= 1; +}</pre> <p>Alternatively, the following UA string sniffing will allow to detect the rendering engines with native MathML support (Gecko and WebKit). Note that UA string sniffing is not the most reliable method and might break from version to version:</p> -<pre class="brush: js language-js"><code class="language-js"><span class="token keyword">var</span> ua <span class="token operator">=</span> navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">;</span> -<span class="token keyword">var</span> isGecko <span class="token operator">=</span> ua<span class="token punctuation">.</span><span class="token function">indexOf<span class="token punctuation">(</span></span><span class="token string">"Gecko"</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">&&</span> ua<span class="token punctuation">.</span><span class="token function">indexOf<span class="token punctuation">(</span></span><span class="token string">"KHTML"</span><span class="token punctuation">)</span> <span class="token operator">==</span><span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">&&</span> ua<span class="token punctuation">.</span><span class="token function">indexOf<span class="token punctuation">(</span></span><span class="token string">'Trident'</span><span class="token punctuation">)</span> <span class="token operator">==</span><span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span> -<span class="token keyword">var</span> isWebKit <span class="token operator">=</span> ua<span class="token punctuation">.</span><span class="token function">indexOf<span class="token punctuation">(</span></span><span class="token string">'AppleWebKit'</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span> <span class="token operator">&&</span> ua<span class="token punctuation">.</span><span class="token function">indexOf<span class="token punctuation">(</span></span><span class="token string">'Chrome'</span><span class="token punctuation">)</span> <span class="token operator">==</span><span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span></code></pre> +<pre class="brush: js language-js">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;</pre> <h4 id="sect1"> </h4> <p>Mathematical fonts</p> <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 & 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="https://developer.mozilla.org/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="https://developer.mozilla.org/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 language-html"><code class="language-html">wget https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xpi -O mathml-fonts.zip; \ -unzip mathml-fonts.zip -d mathml-fonts</code></pre> +<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 language-html">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 language-css"><code class="language-css"><span class="token atrule">@import url('/path/to/resource/mathml.css')</span><span class="token punctuation">;</span></code></pre> +<pre class="brush: css language-css">@import url('/path/to/resource/mathml.css');</pre> <p><span>You then need to modify the font-family on the <math> elements and</span>, for Gecko, the on ::-moz-math-stretchy pseudo element too. For example to use STIX fonts:</p> <pre class="language-html"><span class="brush: css"><span class="brush: css">math { font-family: STIXGeneral; @@ -65,32 +65,32 @@ unzip mathml-fonts.zip -d mathml-fonts</code></pre> font-family: STIXNonUnicode, STIXSizeOneSym, STIXSize1, STIXGeneral; } </span></pre> -<p><span>Try the <a href="https://developer.mozilla.org/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> +<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_EPUB_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><math></code> roots. For example, the XHTML version of the previous example looks like this:<br> </p> -<pre class="brush: xml language-xml"><code class="language-xml"><span class="token prolog"><?xml version="1.0" encoding="UTF-8"?></span> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" - "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"> -<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.w3.org/1999/xhtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> -<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>XHTML+MathML Example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> -<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> +<pre class="brush: xml language-xml"><?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> -<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>XHTML+MathML Example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> +<h1>XHTML+MathML Example</h1> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + <p> Square root of two: - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>math</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://www.w3.org/1998/Math/MathML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>msqrt</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>mn</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>mn</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>msqrt</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>math</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <math xmlns="http://www.w3.org/1998/Math/MathML"> + <msqrt> + <mn>2</mn> + </msqrt> + </math> + </p> -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre> +</body> +</html></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> @@ -134,29 +134,29 @@ unzip mathml-fonts.zip -d mathml-fonts</code></pre> <p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> has an <a href="https://github.com/fred-wang/x-tex"><x-tex></a> custom element, that can be used to write things like</p> <pre class="language-html"><span class="brush: html"><<span class="start-tag">x-tex</span>></span><span>\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1</span><span class="brush: html"></<span class="end-tag">x-tex</span>></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 <a href="http://www1.chapman.edu/%7Ejipsen/mathml/asciimath.html" title="http://www1.chapman.edu/~jipsen/mathml/asciimath.html">ASCIIMathML</a>. Just download the <a href="http://mathcs.chapman.edu/%7Ejipsen/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><script></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 language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> -<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> +<p>One simple client-side conversion tools is <a href="http://www1.chapman.edu/%7Ejipsen/mathml/asciimath.html" title="http://www1.chapman.edu/~jipsen/mathml/asciimath.html">ASCIIMathML</a>. Just download the <a href="https://mathcs.chapman.edu/%7Ejipsen/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><script></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 language-html"><html> +<head> ... -<span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ASCIIMathML.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span> +<script type="text/javascript" src="ASCIIMathML.js"></script> ... -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> -<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> +</head> +<body> ... -<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>blah blah `x^2 + y^2 = r^2` blah ... -...</code></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 language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> +<p>blah blah `x^2 + y^2 = r^2` blah ... +...</pre> +<p><a href="https://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="https://math.etsu.edu/LaTeXMathML/LaTeXMathML.js" title="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.js">LaTeXMathML.js</a> and <a href="https://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 language-html"><head> ... -<span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>LaTeXMathML.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span> -<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>LaTeXMathML.standardarticle.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<script type="text/javascript" src="LaTeXMathML.js"></script> +<link rel="stylesheet" type="text/css" href="LaTeXMathML.standardarticle.css" /> ... -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> +</head> -<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> +<body> ... -<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>LaTeX<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> +<div class="LaTeX"> \documentclass[12pt]{article} \begin{document} @@ -170,26 +170,26 @@ This is a sample LaTeXML document. \section{First Section} - $$ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$ + $ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $ \end{document} -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> -...</code></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 <code>√{∑↙{n=1}↖{+∞} 6/n^2} = π</code> to write <math> <mrow> <msqrt> <mrow> <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> </math>. 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 language-html"><code class="language-html">... - <span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/x-mathjax-config<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> - MathJax<span class="token punctuation">.</span>Hub<span class="token punctuation">.</span><span class="token function">Config<span class="token punctuation">(</span></span><span class="token punctuation">{</span> - MMLorHTML<span class="token punctuation">:</span> <span class="token punctuation">{</span> prefer<span class="token punctuation">:</span> <span class="token punctuation">{</span> Firefox<span class="token punctuation">:</span> <span class="token string">"MML"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> - <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> - <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span> - <span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> - <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>http://cdn.mathjax.org/mathjax/latest/MathJax.js?config<span class="token punctuation">=</span>TeX-AMS-MML_HTMLorMML<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> - <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> +</div> +...</pre> +<p><a href="https://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 <code>√{∑↙{n=1}↖{+∞} 6/n^2} = π</code> to write <math> <mrow> <msqrt> <mrow> <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> </math>. The installation is similar: download and copy the relevant <a href="https://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="https://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 language-html">... + <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} \] -...</code></pre> +...</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>. 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> @@ -210,14 +210,49 @@ This is a sample LaTeXML document. </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/%7Edistler/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 language-html"><code class="language-html">wget http://golem.ph.utexas.edu/~distler/blog/files/itexToMML.tar.gz; \ +<p>If you only want to parse simple LaTeX mathematical expressions, you might want to try tools like <a href="https://golem.ph.utexas.edu/%7Edistler/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 language-html">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</code></pre> +sudo make install</pre> <p>Now suppose that you have a HTML page with TeX fragments delimited by dollars:</p> -<pre class="brush: html language-html"><code class="language-html">input.html +<pre class="brush: html language-html">input.html + +... +</head> +<body> + <p>$\sqrt{a^2-3c}input.html + +... +</head> +<body> + <p>$\sqrt{a^2-3c}input.html + +... +</head> +<body> + <p>$\sqrt{a^2-3c}<code class="language-html">input.html + +... +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>$\sqrt{a^2-3c}$<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>$$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $$<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code>lt;/p> + <p>$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $</p> +</body> +</html>lt;/p> + <p>$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $</p> +</body> +</html>lt;/p> + <p>$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} input.html + +... +</head> +<body> + <p>$\sqrt{a^2-3c}<code class="language-html">input.html ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> @@ -225,18 +260,23 @@ sudo make install</code></pre> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>$\sqrt{a^2-3c}$<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>$$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $$<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> -<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code>lt;/p> + <p>$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $</p> +</body> +</html>lt;/p> +</body> +</html></pre> <p>Then to generate the HTML page input.html with TeX expressions replaced by MathML expressions, just do</p> <pre class="language-html">cat input.html | itex2MML > 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 class="language-html"> 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> +<p><a href="https://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 class="language-html"> 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="https://developer.mozilla.org/zh-TW/docs/Web/MathML/Authoring$edit#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> +<p>If you want to have a MathJax fallback for non-Gecko browsers, copy the <a href="/zh-TW/docs/Web/MathML/Authoring$edit#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 class="language-html"> 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> @@ -258,20 +298,19 @@ sudo make install</code></pre> </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="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="https://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> +<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> has several interfaces, including a <a href="https://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="mathml-shot1.png"></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="https://developer.mozilla.org/@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> +<p><a href="https://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="https://www.openoffice.org/">OpenOffice</a> and <a href="https://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="openoffice.png"></p> +<p><a href="https://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_Handwriting_Recognition">Optical Character & 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><a href="https://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="https://windows.microsoft.com/en-za/windows7/use-math-input-panel-to-write-and-correct-math-equations">Windows Math Input Panel</a></p> <p>or the online converter <a href="http://webdemo.visionobjects.com/" title="http://webdemo.visionobjects.com/portal.html">Web Equation</a>.</p> <h3 id="sect2"> </h3> <p>Original Document Information</p> @@ -279,7 +318,7 @@ sudo make install</code></pre> <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> + <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="https://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li> </ul> </div> <p> </p> |