TeXのトイ実装で数式をHTML表示する話

What TeX-modoki is

TeX-modoki is aiming to become a subset of plain TeX implementation. Instead of DVI or PDF, it is intended to generate a plain-old HTML file. Being fully compliant with TeX's macro language, it could support LaTeX or other packages. I wish all the legacy TeX manuscripts around the world someday became readable on any web browser.

TeX-modoki は plain TeX の簡易実装です。出力はDVIやPDFではなくHTMLです。TeXのマクロ言語を実装しているので、LaTeXのような一般的なパッケージを使って書かれた原稿にも原理的には対応できるはず。地球上のあらゆる既存のTeX原稿がブラウザで文字データとして閲覧できるようになればいいな。

Sample Output

For now, you get some mathematical formula in HTML/CSS2.1 from a plain TeX source, though the output needs further refinement.

現状の出力機能はやっつけだけれども、HTML/CSSなので、たいていのブラウザでそれっぽく数式を表示できるようにはなっている。

1. Simple example

Displaying fraction or choice is trivial for TeX but for HTML.

分数など。

(tokenlist->html
  (output
   (string->tokenlist
      "$_nC_{k/2} = {n\\atopwithdelims() {k\\over 2}}$")))

The result is

 

n

 

 

 

C

 

k

 

 

/

 

 

2

 

 

 

 

 

 

 = ( 

n

 

 

 

 

k

 

 

 

2

 

 

 

  

 

 

 

 ) 

 

 

 

2. Example with mathematical symbols

Mathematical symbols can be defined in the same way as plain TeX, except you must specify them with Unicode but TeX's character encoding. You can also compose any original symbol in the TeX manner. In this example, \cdots is defined exactly the same way as the Appendix B of "The TeXbook."

数式で使う記号類は、TeXとまったく同じ方法で、TeXの文字コードの代わりにUnicodeの値を指定しておきます。独自に合成した記号も、やはりTeXと同じようにして定義できます。（実際、以下の例の \cdots は「TeXブック」付録Bの定義そのままです。）

(tokenlist->html
  (output
   (string->tokenlist
    "\\mathchardef\\infty = \"0221e \\mathchardef\\sum = \"103a3 \\mathchardef\\cdotp = \"000b7\
     \\def\\cdots{\\mathinner{\\cdotp\\cdotp\\cdotp}}\
     The exponential function
      $e^x = \\sum_{n=0}^{\\infty} {x^n \\over n!}
           = {x^1\\over 1!} + {x^2\\over 2!}+ \\cdots$ . ")))

The result is

The exponential function e

x

 

 

 

 

 = 

∞

 

 

 

 

 

 

Σ

n

 

 

 = 0

 

 

 

 

 

 

  

x

n

 

 

 

 

 

n

 

 

!

 

 

 

  

 

 

 =  

x

1

 

 

 

 

 

1

 

 

!

 

 

 

  

 

 

 +  

x

2

 

 

 

 

 

2

 

 

!

 

 

 

  

 

 

 + ·

 

 

·

 

 

·

 

 

 

 

 

  .

3. Square-root

Square root is hard to display neatly in HTML/CSS without font-stretch. It’s decent if the inner elements fit in a line.

根号は、CSS2.1ではフォントを上下に伸ばせないので、なかなかきれいには表示できません。中身が一行なら、そこそこの見た目にはなります。

(tokenlist->html
  (output
   (string->tokenlist
       "\\def\\sqrt{\\radical\"2221a}
        \\mathchardef\\plusminus=\"300b1
        Roots of a quadratic equation $ax^2+bx+c=0$ are
        $x={-b\\plusminus\\sqrt{b^2 - 4ac} \\over 2a}$.")))

The result is

Roots of a quadratic equation ax

2

 

 

 

 

 + b

 

 

x

 

 

 + c

 

 

 = 0

 

 

  are x

 

 

 =  

−

 

 

b

 

 

 ±  √b

2

 

 

 

 

 − 4

 

 

a

 

 

c

 

 

 

 

 

  

2

 

 

a

 

 

 

  

 

 

 .

4. More complicated formula

Integral symbol should be nolimit style.

積分記号の添字は上下ではなく横に付くべきですが、これもTeXの定義のままHTMLで表示できます。

(tokenlist->html
  (output
   (string->tokenlist
       "\\mathchardef\\intop=\"1222b\
         \\mathchardef\\infty=\"1221e\
         \\mathchardef\\pi=\"003c0\
         \\mathchardef\\sigma=\"003c3\
         \\mathchardef\\mu=\"003bc\
         \\def\\sqrt{\\radical\"2221a}\
         \\def\\int{\\intop\\nolimits}\
         $\\int_{-\\infty}^\\infty \
             {1 \\over \\sqrt{2\\pi\\sigma^2}}\
             \\hbox{exp}(- {{(x-\\mu)}^2\\over 2\\sigma^2}) dx$")))

The result is

∫

∞

 

 

  

−

 

 

∞

 

 

  

 

 

 

  

1

 

 

 

 √2

 

 

π

 

 

σ

2

 

 

 

 

 

 

 

  

  

 

 

exp

 

 

(−

 

 

 

(x

 

 

 − μ

 

 

) 

2

 

 

 

 

 

2

 

 

σ

2

 

 

 

 

 

  

 

 

)d

 

 

x