數學標記語言MathML簡介、工具及兼容

一、MathML簡介

MathML指“數學標記語言”，是XML語言的一個子集，用來在web網頁，甚至部分軟件中顯示數學公式。

簡言之，就是使用特殊的類似HTML的標記在網頁中顯示數學公式。

因爲有些數學公式很複雜，普通HTML根本沒法駕馭，例如下面這個公式：

都有哪些MathML標記呢？可以看下面的定義列表說明（非原文訪問會數學公式排版異常）：

1. 按類別分類的MathML表現元素

頂級元素

<math>

用在最外部包裹，表示裏面的都是數學公式。例如，就一個變量x，則有：

<math><mi>x</mi></math>

效果是： x

記號元素

<mglyph>

有些現存的Unicode字符是不可用的，此時就可以使用<mglyph>替換顯示，可以理解爲MathML世界中的圖片元素，支持width, height以及alt等屬性。例如：

<math>
  <mi><mglyph src="my-glyph.png" alt="my glyph"/></mi>
</math>

<mi>

mi是’math identifier’的縮寫，字面意思數學標識符，多指函數名，變量或者符號常量。示意（下面標識符之間無任何關聯，僅僅示意語義）：

<math> 
  <mi> y </mi>  
  <mi> sin </mi>
  <mi mathvariant="monospace"> x </mi>
  <mi mathvariant="bold"> &pi; </mi>
</math>

效果是： y sin x π

<mn>

mn是’math number’的縮寫，表示數值，支持各種數值。示意（僅示意，無關聯）：

<math> 
  <mn> 0 </mn>
  <mn> 1.337 </mn>
  <mn> twelve </mn>
  <mn> XVI </mn>     
  <mn> 2e10 </mn> 
</math>

效果是： 0 1.337 twelve XVI 2e10

<mo>

mn是’math operators’的縮寫，表示數學操作符，例如加減乘除，各種括號，分號等。示意：

<math>
<mrow>
  <mn>5</mn>
  <mo>+</mo>
  <mn>5</mn>
</mrow> 

<mrow>
  <mo> [ </mo> 
  <mrow>
    <mn> 0 </mn>
    <mo> ; </mo> 
    <mn> 1 </mn>
  </mrow>
  <mo> ) </mo>
</mrow>
</math>

效果是： 5 + 5 [ 0 ; 1 )

<ms>

ms是’math string literal’的縮寫，表示一個字符串文字，這個字符串需要由編程語言和計算機代數系統來解釋。默認情況下，字符串文字顯示爲用雙引號括起來（"）; 通過使用lquote和rquote屬性，您可以設置要顯示的自定義字符。示意：

<math>
  <ms lquote="„" rquote="“"> abc </ms>
</math>

效果是： abc

<mspace>

mspace是’math space’的縮寫，表示空白間距，其尺寸可以通過width, height以及depth等尺寸控制。示意：

<math>
  <mi>x</mi>
  <mspace width="40px"></mspace>
  <mi>y</mi>
</math>

效果是： xy

<mtext>

MathML <mtext>元素用於呈現沒有符號含義的任意文本，例如註釋或註解。示意：

<math> 
  <mtext> 畢達哥拉斯定理 </mtext>  
  <mtext> /* 在這裏註釋 */ </mtext>
</math>

總體佈局

<menclose>

MathML <menclose>元素用來把內容封閉在指定的記號中（通過設置notation屬性）。示意一個根號效果：

<math> 
  <menclose notation="radical">
     <msup><mi>a</mi><mn>2</mn></msup>
     <mo>+</mo>
     <msup><mi>b</mi><mn>2</mn></msup>
  </menclose>
</math>

在支持的瀏覽器，例如Firefox瀏覽器中，表現會如後面這樣：

<menclose>元素支持的封閉符合非常多，款式各種各樣，讓人大開眼界，有興趣可以看MDN這個文檔。

<merror>

MathML <merror>元素用來標記這個計算公式或者表達式是錯誤的，瀏覽器會通過邊框和背景色樣式加以明顯區分。示意：

<merror>
  <mrow>
    <mtext>除以0：</mtext>
    <mfrac>
      <mn> 1 </mn>
      <mn> 0 </mn>
    </mfrac>
  </mrow>
</merror>
</math>

當前瀏覽器實時效果是： 除以0： 1 0

Firefox瀏覽器截圖效果是：

<mfenced>

MathML <maction>元素可以添加自定義的對稱閉合符號（如括號），以及自定義分隔符（如逗號）。示意：

<math>
  <mfenced open="{" close="}" separators=";;,"> 
    <mi>a</mi> 
    <mi>b</mi> 
    <mi>c</mi> 
    <mi>d</mi> 
    <mi>e</mi> 
  </mfenced> 
</math>

當前瀏覽器實時效果是： abcde

在支持的瀏覽器下面會這樣呈現：

<mfrac>

MathML <mfrac>指'math fraction'，表示分數，也即是除法。示意：

<math>  
  <mfrac bevelled="true">
     <mfrac>
        <mi> a </mi>
        <mi> b </mi>
     </mfrac>
     <mfrac>
        <mi> c </mi>
        <mi> d </mi>
     </mfrac>
  </mfrac>
</math>

當前瀏覽器實時效果是： a b c d

在支持的瀏覽器下面會這樣呈現：

<mpadded>

MathML <mpadded>元素用來給封閉內容增加格外的padding一遍進行位置和尺寸的調整。

<mphantom>

Phantom這個單詞是幻影的意思。因此MathML <mphantom>表示當前元素是個“幻影”，也就是不可見，但是位置尺寸都保留，類似CSS世界中的visibility:hidden。示意：

<math>
<mrow>
  <mi> x </mi>
  <mo> + </mo> 
  <mphantom>
    <mi> y </mi>
    <mo> + </mo>
  </mphantom>
  <mi> z </mi>
</mrow>
</math>

當前瀏覽器實時效果是： x + y + z

在支持的瀏覽器下面會這樣呈現：

<mroot>

MathML <mroot>元素表示根號。示意：

<math>
 <mroot>
    <mi>x</mi>
    <mn>3</mn>
 </mroot> 
</math>

當前瀏覽器實時效果是： x 3

在支持的瀏覽器下面會這樣呈現：

<mrow>

MathML <mrow>元素用於對子表達式進行分組，子表達式通常包含一個或多個運算符及其各自的操作數（例如和）。 此元素水平呈現。上面很多案例已經有示意，這裏不重複演示。

<msqrt>

MathML <msqrt>元素表示開平方根。示意：

<math>
 <msqrt>
    <mi>x</mi>
  </msqrt> 
</math>

當前瀏覽器實時效果是： x

<mstyle>

MathML <mstyle>元素用於更改其子項的樣式。例如設置顏色爲茶色：

<math> 
  <mstyle displaystyle="true" mathcolor="teal">
    <mrow>
      <mi>i</mi>
      <mo form="infix">=</mo>
      <mn>1</mn>
    </mrow>
  </mstyle>
</math>

在支持的瀏覽器下面會這樣呈現：

腳本和限制元素

<mmultiscripts>

MathML <mmultiscripts>元素允許你創建一個類似張量對象。“張量”（tensor）理論是數學的一個分支學科，在力學中有重要應用。張量是一個定義在的一些向量空間和一些對偶空間的笛卡兒積上的多重線性映射，其座標是|n|維空間內，有|n|個分量的一種量， 其中每個分量都是座標的函數， 而在座標變換時，這些分量也依照某些規則作線性變換。

這個元素的理解難度已經超出我的能力範疇，溜了溜了……

<mover>

MathML <mover>元素用來在表達式的上方添加重音或限制。示意：

<math>
<mover accent="true">
  <mrow>
    <mi> x </mi>
    <mo> + </mo>
    <mi> y </mi>
    <mo> + </mo>
    <mi> z </mi>
  </mrow>
  <mo> &#x23DE; <!--上花括號--> </mo>
</mover> 
</math>

當前瀏覽器實時效果是： x + y + z ⏞

在支持的瀏覽器下面會這樣呈現：

<msub>

MathML <msub>好理解，表示下標。示意：

<math>
  <msub>
    <mi>X</mi>
    <mn>1</mn>
  </msub>
</math>

當前瀏覽器效果： X 1

<msubsup>

MathML <msubsup>元素表示同時上標和下標。示意：

<math displaystyle="true">   
  <msubsup>
    <mo> &#x222B;<!-- 積分 --> </mo>
    <mn> 0 </mn>
    <mn> 1 </mn>
  </msubsup>
</math>

當前瀏覽器實時效果是： ∫ 0 1

在支持的瀏覽器下面會這樣呈現：

<msup>

MathML <msup>表示上標，參見下標<msub>

<munder>

MathML <munder>元素和<mover>對立，表示在表達式下方強調或者限制。示意：

<math>
<munder accent="true">
  <mrow>
    <mi> x </mi>
    <mo> + </mo>
    <mi> y </mi>
    <mo> + </mo>
    <mi> z </mi>
  </mrow>
  <mo> &#x23DF; <!--下花括號--> </mo>
</munder> 
</math>

當前瀏覽器實時效果是： x + y + z ⏟

在支持的瀏覽器下面會這樣呈現：

<munderover>

MathML <munderover>元素表示同時出現在上面和下面。示意：

<math displaystyle="true"> 
  <munderover >
    <mo> &#x222B; <!--積分--> </mo>
    <mn> 0 </mn>
    <mi> &#x221E; <!--無窮--> </mi>
  </munderover>
</math>

當前瀏覽器實時效果是： ∫ 0 ∞

在支持的瀏覽器下面會這樣呈現：

表格數學

<mlabeledtr>

MathML <mlabeledtr>元素用於表示行內label標籤，要麼在左側要麼在右側（由<mtable>元素上的side屬性決定）。 <mlabeledtr>的子元素必須是<mtd>元素。 第一個子節點是label標籤，而所有其他子節點表示行內容，並且與<mtr>元素的子節點相同。根據我在Firefox瀏覽器下的測試，應當作爲label標籤的第一個子節點並未顯示。

<mtable>

MathML <mtable>元素可以理解爲HTML屆的<table>元素，雖然屬性出入較大，但排版佈局表現很類似。

<mtd>

MathML <maction>元素可以理解爲HTML屆的<td>元素，表示單元格，兩者排版效果很類似。

<mtr>

MathML <maction>元素可以理解爲HTML屆的<tr>元素，表示表格行，兩者排版佈局效果很類似。

未分類元素

<maction>

MathML <maction>元素可以添加交互行爲，例如展現的是表達式，點擊一下出現的是表達式計算結果。示意一個1+1=2的效果：

<math>
<maction actiontype="toggle">
  <mrow>
    <mn>1</mn>
    <mo>+</mo>
    <mn>1</mn>
  </mrow>
  <mrow>
    <mo>=</mo>
    <mn>2</mn>
  </mrow> 
</maction>
</math>

效果如下GIF：

2. 語義註釋

在MathML中，有兩種標記數學的方法：Presentation MathML用於控制數學方程或表達式的佈局，也就是用戶看到的外觀（上面介紹的部分），而Content MathML用於使數學方程或表達式更語義化，便於計算機理解。 MathML元素<semantics>，<annotation>和<annotation-xml>用於聯合展示和內容標記，以及提供數學表達式的佈局信息和語義。

<annotation>

MathML <annotation>表示註解與說明。

<annotation-xml>

MathML <annotation-xml>指明函數或表達式結構。

<semantics>

MathML <semantics>表示裏面含有語義化信息。

上面3元素看下面一個案例就能知道大概作用了：

<math>
  <semantics>
    <!-- Presentation MathML -->
    <mrow>
      <msup>
        <mi>x</mi>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mi>y</mi>
    </mrow>
    <!-- Content MathML -->
    <annotation-xml encoding="MathML-Content">
      <apply>
        <plus/>
        <apply>
          <power/>
          <ci>x</ci>
          <cn type="integer">2</cn>
        </apply>
        <ci>y</ci>
      </apply>
    </annotation-xml>
    <!-- 圖像註解 -->
    <annotation encoding="image/png" src="some/path/formula.png"/>
    <!-- TeX註解 -->
    <annotation encoding="application/x-tex">
      x^{2} + y 
    </annotation> 
  </semantics>
</math>

其他

• 可以看到都以MathML標記都是字母m開頭。
• 上面所有展示的MathML代碼效果都可以在這個頁面看到，您可以狠狠地點擊這裏：MathML示意demo

二、瀏覽器的兼容處理

首先看下兼容性，Chrome瀏覽器在版本24的時候曾經曇花一現支持了下，不過很快就取消了支持，據說是出於安全考慮。

據說IE瀏覽器可以安裝MathPlayer插件支持下，不過我個人覺得最終效果爾爾。

至於Chrome瀏覽器，我查找了下，有個名叫mathml.css的項目：https://github.com/fred-wang/mathml.css

針對Chrome這類不支持的瀏覽器使用CSS進行了公式佈局的模擬。使用方法可以是直接引入下面JS代碼：

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

這個mspace.js會檢測當前瀏覽器是否支持MathML，如果不支持，就會加載mathml.css文件做兼容，但也只是一定程度上的兼容，根據我的實際使用測評，很多標籤和屬性功能並不支持，然後，最終呈現的排版效果和原本支持的瀏覽器（如Firefox）相差甚遠，只能說湊合使用。

三、在線生成MathML的工具介紹

從第一段的介紹就可以看出MathML非常複雜，是個完整的XML語言體系，其中還有茫茫多的XML屬性還沒介紹，由於對於複雜公式，我們想要完全手寫出來，呵呵，估計要廢掉大半的血條。

好在有現成的工具，可以直接生成MathML代碼。經過自己一番實踐，發現下面這個工具是極好的！

手寫公式自動變MathML

例如，我在畫布中寫個x2+y2=z2，結果右上角MathML代碼就出來了，實在太牛了！

四、小衆語言，總會有用的

MathML這麼語言，雖然小衆，但總歸有用的，舉例來說，我之前寫了很多動畫相關的文章，例如拋物線運動，矩陣變換介紹等，都需要用到數學公式，如果得到精美的自己想要的公式代碼呢？經過這幾天學習，我就知道該怎麼玩了。

先打開上面介紹的在線生成MathML的工具，手寫數學公式，然後把生成的MathML代碼在Firefox瀏覽器中顯示，然後截圖，一個精緻的數學公式效果圖就出來了！

要是沒有對MathML的學習和研究，肯定不會知道原來還可以這麼玩，對吧？

學習呢，不要功利心太強，就算當下看不到效益，但在將來某一天，總會給你帶來雪中送炭般的幫助的。

感謝閱讀，歡迎交流！