HTML 網頁內嵌 MathML 數學式及 SVG 向量圖

廿年前讀博士班時, 我那份有點像是數學系產品的論文是用 LaTeX 寫的。 LaTeX 的排版真的超讚; 不過它也很龐大。 相對地, 改用 HTML 製作講義, 就輕簡很多, 而且不論走到哪裡, 幾乎每一部電腦都可以讀寫。 至於數學式, 幾年前曾經試著把 MathML 內嵌到 HTML 裡面, 沒成功。 今年又教到微積分, 於是再試一下, 竟然就發現 firefox 支援 HTML 網頁內嵌 MathML 數學式及 SVG 向量圖! 真是太讚了! 我用的是 firefox 17; 讀者留言表示 opera 和 chromium 也可以; chrome 23 只能顯示 SVG 不能顯示 MathML; konqueror 4.9.2 則是兩者都無法顯示。

首先看一頁 「SVG 內嵌到 HTML 裡面」 的展示: 「函數的凹凸及反曲點」。 請多按幾次 "ctrl +" 確認一下放大不會失真。 產生的步驟是:

1. 下載 sin4.gpt 這個 gnuplot 指令檔, 然後在 gnuplot 裡面執行: load "sin4.gpt" 會產生 sin4.svg 。
2. 用文字編輯器打開 sin4.svg 。 從 <svg ...> 一直到 </svg> 是正文/主體, 要保留。 請把最前面的 <?xml ...?> 跟 <!DOCTYPE ...> 這兩句砍掉。 如果沒砍掉的話, 較舊的 apache 會看不懂。
3. 把 sin4.svg 貼到你的 html 檔裡面, 或是用 php 的 <?php include "sin4.svg" ?> 把它帶進來。

指令檔 sin4.gpt 裡面, 前面隨便你改; 最重要的是最下面這幾句話:

        set output "sin4.svg"   # 把輸出改導向 "sin4.svg" 檔案
        set term svg            # 採用 svg 格式輸出
        replot                  # 重畫一次
        set output              # 把輸出改導回螢幕
        set term wxt            # 採用螢幕的驅動程式
        replot                  # 重畫一次

再來看一頁 「MathML 內嵌到 HTML 裡面」 的展示: 「微積分小考題」。 同樣地, 代表複雜數學式的 quiz-01.mml 這個檔案, 可以直接貼到 html 裡面, 或是用 php 的 <?php include "quiz-01.mml" ?> 把它帶進來。

至於這個 mml 檔是怎麼來的呢? 是手工打造的嗎? <當年勇> 十一年為了解釋 「自由與開放...之爭?」 還曾經徒手撰寫 postscript...</當年勇> 呵呵, 但是現在變懶了, 一切都交給 google 大神 -- 搜尋到 Formulator Mathml Weaver, 簡單好用的 MathML 編輯器。 然後注意到它的 license 並不自由, 有點擔心被 RMS 罵, 趕快又搜尋到 它的原始碼。 原來它是 dual-license, 所以可以安心使用啦!

html + svg + mathml 排版美觀固然不能跟 LaTeX 相提並論, 但我個人卻選擇完全拜倒在她的 「輕巧」 魅力之下。 我喜歡 把學習的力氣投資在 「可以組合」 的知識上面。 開放格式萬歲!