数式をCSSで再現

CSSを使って本来画像でしか提供できなかった数式を無理矢理実装。

このサイトではルビをIE以外にGeckoエンジンブラウザ・Operaで提供している。ルビ自体はIEしか対応していないが、OperaとMozillaがCSS Level.2に厳密だったからこそCSSでルビを再現できた。これをさらに発展させ、Mozilla MathML版という特殊なタイプのブラウザしかサポートしていない数式表示を通常のMozillaなどでも表示できるようにしてみる。

※殆ど技術的興味で作ったものですので実用には耐えません

主に使うCSSプロパティ

CSSのdisplayプロパティで対象要素の型を変更できる。IEなどはblock,inline,listなどしか対応していないが、Mozillaなどはtable型に対応しており、tableを指定すると表のように表示できる。これを用いて数式を再現する。

HTMLとしてはclass属性を用いたほうが厳密だが、記述がややこしくなるのでここでは専用の要素を用意することにする。

CSSで再現した数式の画像

分数

<mfrac>
分数全体を囲む
<mfsup>
a(分子)
<span class="mfline">
分数のライン。IEでは非表示しなければならず、IEは自分の知らないタグを無視して表示させるのでspanで実装。
<mfno>
IEでの表示用
<mfsub>
b(分母)

シグマ

<msum>
シグマ全体を囲む
<mss>
シグマ記号
<msno>
IEでの表示用
<msfir>
k=m
<msend>
n

微分積分

積分

<mint>
[a,b]の部分を囲む
<mteg>
積分記号
<mino>
IEでの表示用
<mintf>
a
<minte>
b

微分

<mmin>
極限式全体を囲む
<mlim>
lim(極限)
<mmno>
CSSが使えないIEでの表示用
<mminp>
x→0

ページ情報

作成日時
2005/10/05
最終更新日時
2005/10/05
HTML4.01版
index.html
XHTML1.1版
index.xhtml
XML原本
index.xml