Program

HTML

Equation 2 [数式 2]

HTMLで数式を記述してみよう

HTML3.0で採用されたはずの数式表現用のタグが、実際にはほとんどブラウザが対応してくれなくて使えない。みなさん、数式の部分だけ画像で埋め込んだり、 PDF文書にしたりいろいろ苦心してる。

Symbolフォントを活用できればそこそこいけるんだけれど、どうやらNetscape7.0では表示させてくれないらしい。そこで、なんとかスタイルシートと実体参照特殊文字を使ってやってみることにしました。

たとえばこんなかんじ（RAS）になります。

数式用のテーブルとフォント

数式は一行毎にテーブルにして、配置を調整します。 paddingは上下を0、左右を2ptぐらい。配置は上下左右中央がいいでしょう。いちいち設定するのは面倒なんで、スタイルシートにしちゃおう。

実体参照文字は、基本的には「&(=&)」のように、「& + # + Code + ;」で指定します。いくつかの文字は「&(=&)」のようにキーワードで参照することもできます。

実体参照文字の一覧。
キーワードによる実体参照, コードによる実体参照,

数式作成用のCSSコード。

CSS Code


<style type="text/css">
<!--

table.eq
	{			/* Eqation */
	text-align:center;
	vertical-align:center;
	padding:0 2pt;
	}

-->
</style>

これを使って、数学記号毎にセルを区切ったテーブルを組みます。例えばこんな感じ。

関数

積分

ƒ(x)=

⌠^t1
⌡_t0

X²dt

→

ƒ(x)=

⌠^t1
⌡_t0

X²dt

HTML Code


<table class=eq><tr>

    <td>&fnof;(x)=</td>				<!-- 関数 -->
    <td align=left><b>&#8992;</b><sup>t1</sup><br>
		<b>&#8993;</b><sub>t0</sub></td>	<!-- 積分 -->
    <td><font size=+2>&Sigma;</font></td>		<!-- 和 -->
    <td>X<sup>2</sup>dt</td>			<!-- 指数とか -->

</tr></table>

配列

配列の場合は、左右に大きめの括弧を置いて、その間のセルにテーブルの入れ子を作ります。

大きいカッコは、きれいな特殊文字が無いのでセルのBorderを利用します。スタイルシートに設定しておきましょう。丸いカッコはあきらめて、かわりにBorderの太さでカッコのレベルを表現します。ここでは、二重カッコも含めて5種類定義しています。

CSS Code


/* Brackets */
td.lbr1{border:1pt solid black;border-right:0pt;}
td.rbr1{border:1pt solid black;border-left:0pt;}
td.lbr2{border:2pt solid black;border-right:0pt;}
td.rbr2{border:2pt solid black;border-left:0pt;}
td.lbr3{border:3pt solid black;border-right:0pt;}
td.rbr3{border:3pt solid black;border-left:0pt;}

td.lbrd2{border:2pt double black;border-right:0pt;}
td.rbrd2{border:2pt double black;border-left:0pt;}
td.lbrd3{border:3pt double black;border-right:0pt;}
td.rbrd3{border:3pt double black;border-left:0pt;}

solid 1

solid 2

solid 3

double 2

double 3

これを使って、たとえば次のように。

ベクトル

配列

A^-1=

a₁₁	a₁₂	a₁₃
a₂₁	a₂₂	a₂₃
a₃₁	a₃₂	a₃₃

^-1

→

A^-1=

a₁₁	a₁₂	a₁₃
a₂₁	a₂₂	a₂₃
a₃₁	a₃₂	a₃₃

^-1

HTML Code


<table class=eq>
  <tr>
  <td><b>A</b><sup>-1</sup>=</td>
  <td class=lbr1>&thinsp;</td>		<!-- 括弧 -->
  <td><table>				<!-- 配列の中身（テーブルの入れ子） -->
      <tr><td>a<sub>11</sub></td><td>a<sub>12</sub></td><td>a<sub>13</sub></td></tr>
      <tr><td>a<sub>21</sub></td><td>a<sub>22</sub></td><td>a<sub>23</sub></td></tr>
      <tr><td>a<sub>31</sub></td><td>a<sub>32</sub></td><td>a<sub>33</sub></td></tr>
    </table>
  </td>
  <td class=rbr1>&thinsp;</td>		<!-- 括弧 -->
  <td valign=top><sup>-1</sup></td>
  </tr>
</table>

分数

分数の表記にもひと工夫必要です。分数の横線は、セルのTopのBorderだけ表示させます。

これもスタイルシートに設定しておきましょう。

CSS Code


td.div
	{			/* Divide */
	text-align:center;
	border-top:1pt solid black;
	padding-top:2pt;
	}

これを使って、たとえば次のように。

分数

= A ×

A + B

C × D

→

= A ×

A + B

C × D

HTML Code


<table class=eq><tr>
  <td><table class=eq><tr>  		<!-- 分数の入れ子 -->
    <td class=lbr1>&thinsp;</td>
    <td><table>
      <tr><td>X</td></tr>
      <tr><td class=div>Y</td></tr>		<!-- 分母 -->
      </table>
    </td>
    <td class=rbr1>&thinsp;</td>
  </tr></table>
  </td>
  <td>= A &times; </td>
  <td class=lbr2>&thinsp;</td>
  <td><table class=eq>  		<!-- 分数の入れ子 -->
    <tr><td>A + B</td></tr>
    <tr><td class=div>		<!-- 分母 -->
      <table class=eq><tr>  		<!-- 分数の入れ子 -->
        <td class=lbr1>&thinsp;</td>
        <td><table>
          <tr><td>C &times; D</td></tr>
          <tr><td class=div>A</td></tr>	<!-- 分母 -->
        </table></td>
        <td class=rbr1>&thinsp;</td>
      </tr></table>
    </td></tr>
  </table></td>
  <td class=rbr2>&thinsp;</td>
</tr></table>

ルートは「√」があるのですが使い物にならないし、他にいい文字が見当たらないのであきらめます。(1/x)乗して下さい。

上付き記号

変数の上に「~、^、→」等の記号をつける方法です。 centerタグの改行幅とパディングを調整します。この応用で、行列で使う「…(=…)」の縦と斜めも作ることができます。

CSS Code


/* Upper character */
td.up{line-height:0.2em;padding:0.6em 0 0.5em;}
td.up2{line-height:0.5em;padding:0 0 0.3em;}
td.dot{line-height:0.3em;}
td.sub{line-height:1em;}

tdセレクタをいじるので、添え字等は除いて独立したセルにしましょう。

上寄りの記号をつける場合は[up]クラス、中心にある記号をつける場合は[up2]クラス、行列のドットは[dot]クラスを使用します。

~
a

^
B

-
c

→
D

·
E

·
·
·

HTML Code


<table class=eq>
  <tr>
    <td class=up>~<br>a</td>
    <td class=up>^<br>B</td>
    <td class=up2>-<br>c</td>
    <td class=up2>&rarr;<br>D</td>
    <td class=up2>&middot;<br>E</td>
    <td class=dot>&middot;&nbsp;&nbsp;<br>&nbsp;&middot;&nbsp;
			<br>&nbsp;&nbsp;&middot;</td>
    <td class=dot>&middot;<br>&middot;<br>&middot;</td>
  </tr>
</table>

これを少し応用して、Sum記号等の上と下の文字を書いてみる。

m
Σ
i = 1

n
Σ
j = 1

x_ij

HTML Code


<table class=eq>
  <tr>
　　<td class=sub>			<!-- Sum記号1 -->
      <small>m</small><br>
      <font size=+2>&Sigma;</font><br>
      <small>i = 1</small></td>
　　<td class=sub>			<!-- Sum記号2 -->
      <small>n</small><br>
      <font size=+2>&Sigma;</font><br>
      <small>j = 1</small></td>
    <td>x<sub>ij</sub>		<!-- Sumの内容 -->
  </tr>
</table>

数式番号

数式番号を付けます。数式全体を大きいテーブルで囲み､右端セルに番号を入れます。番号に括弧をつける場合､番号と括弧の間に空白を入れない方がいいでしょう。

n
Σ
j = 1

x_ij = y_i (i = 1,...,m)

(1)

HTML Code


<table align=center><tr>	<!-- 数式番号用の外枠 -->
  <td width=600>

    <table class=eq align=center><tr>	<!-- 数式テーブル -->
        <td class=sub><small>n</small><br>
            <font size=+2>&Sigma;</font><br>
            <small>j = 1</small></td>
        <td>x<sub>ij</sub> = y<sub>i</sub>&emsp; (i = 1,...,m)</td>
    </tr></table>

  </td>
  <td>(1)</td>		<!-- 数式番号 -->
</tr></table>

・・・しかし、かなり面倒なのには変わりなし。

数式用スタイルシート付きの数式サンプルを用意しました。ご利用ください。スタイルシートは別ファイルにした方が便利です。

	Program Top

HTML

Equation 2 [数式 2]

関数積分

ベクトル配列

分数

関数

積分

ベクトル

配列