MathML の編集

本稿では MathML を用いて数式を表現する方法を説明します。 HTML と同じように、 MathML はタグと属性によって記述されます。文書中に箇条書きや表のような高度な構造がある場合 HTML は煩雑になってしまいますが、幸いなことに単純な記法で表を生成することができるツールや、 WYSIWYG な編集ができるツール、その他さまざまなコンテンツ管理システムであったりと，ウェブページを書き下ろすのに助けになるものはたくさんあります。

数式を表現しようと思うともっと複雑です。数学には分数や平方根、行列など独自のタグが必要になるような構造がいろいろあるからです。ですから、優良な MathML エディターが求められます。以下ではその幾つかについて述べていきます。取り分け、 Mozilla の MathML 開発チームが開発中の TeXZilla は、 JavaScript 製 Unicode LaTeX-MathML コンバーターであり、本稿で紹介されているような多くの場面で用いられることを想定しています。無論、本稿のツール紹介ではすべてを網羅している訳ではありませんから、是非とも W3C が発行する MathML ソフトウェア一覧をチェックして他のツールも見てみてください。

なお設計上、 MathML は HTML5 によく統合されており、特に CSS, DOM, Javascript, SVG のような通常のウェブ機能を使用できることができます。これはこのドキュメントの範囲外ですが、ウェブ言語の基本的な知識があれば、誰でも簡単にこれらの機能を MathML と組み合わせることができます。詳細については、デモや MathML リファレンスのページをご覧ください。

MathML の使用

Even if your MathML formulas will likely be generated by authoring tools, it is important to be aware of a few tips to properly integrate them in your document.

HTML ページ中の MathML

HTML5 文書内部では表示 (presentation) MathML が使えます。

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>MathML in HTML5</title>
</head>
<body>

  <h1>MathML in HTML5</h1>

  <p>
    One over square root of two (inline style):
    <math>
      <mfrac>
        <mn>1</mn>
        <msqrt>
          <mn>2</mn>
        </msqrt>
      </mfrac>
    </math>
  </p>

  <p>
    One over square root of two (display style):
    <math display="block">
      <mfrac>
        <mn>1</mn>
        <msqrt>
          <mn>2</mn>
        </msqrt>
      </mfrac>
    </math>
  </p>

</body>
</html>

メモ: To use MathML in XML documents (e.g. XHTML, EPUB or OpenDocument) place an explicit xmlns="http://www.w3.org/1998/Math/MathML" attribute on each <math> element.

メモ: Some email or instant messaging clients are able to send and receive messages in the HTML format. It is thus possible to embed mathematical formulas inside such messages, as long as MathML tags are not filtered out by markup sanitizers.

MathML に対応していないブラウザー向けの代替策

残念ながら、ブラウザーによっては MathML の方程式をレンダリングできなかったり、対応が限定されていたりします。そのため、代替レンダリングを提供するためには MathML ポリフィルを使用する必要があります。この MDN wiki で使われているような基本的な数学的な構造だけを必要とする場合は、小さな mathml.css スタイルシートで十分かもしれません。これを使うには、文書のヘッダーに一行だけ挿入してください。

<script src="https://fred-wang.github.io/mathml.css/mspace.js"></script>

ただ、もっと高度な表現も使いたいという場合にはもう少し大きい MathJax ライブラリを用いると良いでしょう。

<script src="https://fred-wang.github.io/mathjax.js/mpadded-min.js"></script>

Alternatively, you can also just display a warning at the top of the page for browsers without good MathML support and let the users choose between one of the fallback above:

<script src="https://fred-wang.github.io/mathml-warning.js/mpadded-min.js"></script>

メモ: これら 2 つのスクリプトは mspace または mpadded (en-US) 要素の機能検出を行うことに注意してください (これらのページのブラウザー互換性表を参照してください)。また、良好な MathML の対応のないブラウザーのためにページの上部に警告を表示し、ユーザーに上記のフォールバックのいずれかを選択させるための同様のスクリプトもあります。

数学記号用のフォント

As explained on the MathML Fonts (en-US) article, mathematical fonts are instrumental to render MathML content. It's thus always a good idea to share the installation instructions for such fonts (en-US) or to provide them as Web fonts.

The MathFonts page provides such Web fonts together with proper style sheets. For example, just insert the following line in your document header in order to select the Latin Modern fonts with fallback Web fonts:

 <link rel="stylesheet" href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css">

Several fonts are proposed and you can just select a different style, for example STIX:

 <link rel="stylesheet" href="https://fred-wang.github.io/MathFonts/STIX/mathfonts.css">

メモ: The fonts and stylesheets from that MathFonts page are distributed under open source licenses, so feel free to copy them on your own server and adapt them to your need.

簡易記法からの変換

In this section, we review some tools to convert MathML from a lightweight markup language such as the popular LaTeX language.

クライアント側での変換

With this approach, formulas are written directly in Web pages and a JavaScript library takes care of performing their conversion to MathML. This is probably the easiest option, but it also has some issues: extra JavaScript code must be loaded and executed, authors must escape reserved characters, Web crawlers won't have access to the MathML output...

A custom element can be used to host the source code and ensure the corresponding MathML output is inserted and rendered via a shadow subtree. For example, using TeXZilla's <la-tex> element, the MathML example above can just be rewritten more concisely as follows:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <title>MathML in HTML5</title>
    <script src="https://fred-wang.github.io/TeXZilla/TeXZilla-min.js"></script>
    <script src="https://fred-wang.github.io/TeXZilla/examples/customElement.js"></script>
  </head>
  <body>
    <h1>MathML in HTML5</h1>

    <p>
      One over square root of two (inline style):
      <la-tex>\frac{1}{\sqrt{2}}</la-tex>
    </p>

    <p>
      One over square root of two (display style):
      <la-tex display="block">\frac{1}{\sqrt{2}}</la-tex>
    </p>
  </body>
</html>

For authors not familiar with LaTeX, alternative input methods are available such as the ASCIIMath or jqMath syntax. Be sure to load the JavaScript libraries and use the proper delimiters:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width">
<title>ASCII MathML</title>
...
<!-- ASCIIMathML.js -->
<script src="/path/to/ASCIIMathML.js"></script>
...
<!-- jqMath -->
<script src="https://mathscribe.com/mathscribe/jquery-1.4.3.min.js"></script>
<script src="https://mathscribe.com/mathscribe/jqmath-etc-0.4.6.min.js"></script>
...
</head>
<body>
...
    <p>
      One over square root of two (inline style, ASCIIMath): `1/(sqrt 2)`
    </p>
...
    <p>
      One over square root of two (inline style, jqMath): $1/√2$
    </p>
...
    <p>
      One over square root of two (display style, jqMath): $$1/√2$$
    </p>
...

コマンドラインのプログラム

Instead of generating MathML expression at page load, you can instead rely on command line tools. This will result in pages with static MathML content that will load faster. Let's consider again a page input.html with content from client-side conversion:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <title>MathML in HTML5</title>
  </head>
  <body>
    <h1>MathML in HTML5</h1>

    <p>
      One over square root of two (inline style):
      $\frac{1}{\sqrt{2}}$
    </p>

    <p>
      One over square root of two (display style):
      $$\frac{1}{\sqrt{2}}$$
    </p>
  </body>
</html>

That page does contain any script tag. Instead, conversion is executed via the following command line using Node.js and TeXZilla:

cat input.html | node TeXZilla.js streamfilter > output.html

After running that command, a file output.html containing the following HTML output is created. The formulas delimited by dollars have been converted into MathML:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <title>MathML in HTML5</title>
  </head>
  <body>
    <h1>MathML in HTML5</h1>

    <p>
      One over square root of two (inline style):
      <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><annotation encoding="TeX">\frac{1}{\sqrt{2}}</annotation></semantics></math>
    </p>

    <p>
      One over square root of two (display style):
      <math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><annotation encoding="TeX">\frac{1}{\sqrt{2}}</annotation></semantics></math>
    </p>
  </body>
</html>

There are more sophisticated tools that aim at converting an arbitrary LaTeX document into a document with MathML content. For example, using LaTeXML the following commands will convert foo.tex into a HTML or EPUB document:

latexmlc --dest foo.html foo.tex # Generate a HTML document foo.html
latexmlc --dest foo.epub foo.tex # Generate an EPUB document foo.epub

latexmlc accepts a --javascript parameter that you can use to include one of the fallback scripts mentioned above:

latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathml.css/mspace.js foo.tex  # Add the CSS fallback
latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpadded-min.js foo.tex # Add the MathJax fallback

メモ: Command-line tools can be used server-side e.g. MediaWiki performs LaTeX-to-MathML conversion via Mathoid.

グラフィカルインターフェイス

In this section, we review a few editing tools providing graphical interfaces.

入力欄

A simple approach is to integrate converters from a simple syntax as simple input boxes for mathematics. For example, Thunderbird and SeaMonkey provide an Insert > Math command that will open a popup window, with a LaTeX-to-MathML input field and a live MathML preview:

$LaTeX input box in Thunderbird$

メモ: You can also use the Insert > HTML command to paste any MathML content.

LibreOffice's equation editor (File → New → Formula) shows a possible enhancement: its input box for the StartMath syntax provides extra equation panels to insert pre-defined mathematical constructions.

$StarMath input box in Libre Office$

メモ: To obtain libreoffice's MathML code, save the document as mml and open it with your favorite text editor.

WYSIYWG なエディター

Other editors provide math editing features that are directly integrated into their WYSIYWG interface. The following screenshots are taken from LyX and TeXmacs, both of them supporting HTML export:

$Lyx example$

$TeXmacs example$

メモ: By default Lyx and TeXmacs will use images of formulas in their HTML output. To choose MathML instead, follow these instructions for the former and select User preference > Convert > Export mathematical formulas as MathML for the latter.

光学文字認識・手書き文字認識

A final option to enter mathematics is to rely on user interface for Optical character recognition or Handwriting recognition. Some of these tools support mathematical formulas and can export them as MathML. The following screenshot shows a demo from MyScript:

$MyScript$