2012年12月26日 星期三

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

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

用 gnuplot 所產生的 svg 檔。 右側是 inkscape 看到的樣子;
左側是內嵌到 html 裡面, 用 firefox 打開來看的樣子。 首先看一頁 「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.svg 最前面兩句刪掉, 只留下 <svg ...> 到
</svg> 的正文/主體部分 指令檔 sin4.gpt 裡面, 前面隨便你改; 最重要的是最下面這幾句話:

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

用 formulator 所產生的 mathml 檔。 右側是 formulator 看到的樣子;
左側是內嵌到 html 裡面, 用 firefox 打開來看的樣子。 再來看一頁 「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 相提並論, 但我個人卻選擇完全拜倒在她的 「輕巧」 魅力之下。 我喜歡 把學習的力氣投資在 「可以組合」 的知識上面。 開放格式萬歲!

8 則留言:

  1. 個人測試了一下,Chromium 25(開發中版本)可以同時支援兩者,請見圖:
    http://i.imgur.com/VRETa.png

    Chromium daily build可由此處取得:
    http://commondatastorage.googleapis.com/chromium-browser-continuous/index.html

    回覆刪除
  2. 未來瀏覽器都會支援內嵌MathML跟SVG啦!因爲這是HTML5標準的一部份。

    回覆刪除
  3. 推荐關鍵字: mathjax

    可以試試看順不順手。

    回覆刪除
  4. Latex寫好之後,交給Inkscape存在svg格式

    回覆刪除
  5. http://dynamicliving.blogspot.com/2011/05/latex-bookmarklet.html

    回覆刪除
  6. MathML 是一個好工具對於描述更複雜的數學表示式

    回覆刪除
  7. RMS是哪根蔥幹嘛怕他
    (我知道他是哪根蔥)

    回覆刪除