分数表示

分数を表示する

　HTMLで分数を表示させるのは、意外と大変そうです。
　「分数をHTMLで表記する」のページを使えば、簡単に

このような表示をすることが出来ました。
　なお、上のページは、数式が出来た後すぐに表示が消えてしまうようですが、ページを一つ戻ると、きちんと出力ボックス欄に表示が残っています。
　このページの、上の式は、次のように入力してあります。

<div class="bunsuu">
<table cellspacing="0" cellpadding="3"><tr><td><table cellspacing="0" cellpadding="0"><tr><td>1</td></tr><tr><td><img src="line.gif" width="20" class="sen"></td></tr><tr><td>R0</td></tr></table></td><td>=</td><td><table cellspacing="0" cellpadding="0"><tr><td>1</td></tr><tr><td><img src="line.gif" width="20" class="sen"></td></tr><tr><td>R1</td></tr></table></td><td>+</td><td><table cellspacing="0" cellpadding="0"><tr><td>1</td></tr><tr><td><img src="line.gif" width="20" class="sen"></td></tr><tr><td>R2</td></tr></table></td><td></td></tr></table>
</div>

　紹介したページで出来た数式は、以下の様になっていました。HAIKなどでは、このままできちんと表示が出来ていたのですが、今私が使っているWordPressでは、このままではうまく表示しませんでした。
　<div class=”bunsuu”></div> で囲んで、その影響下に table を置き、style や align の指定は、css に移して、入力の方は消去しました。
　それから、分数の線が何故か細く表示されないので、指定を class=”sen” ですることにしました。長さも、何故か元のままでは短すぎるので、少し伸ばしています。

<table cellspacing="0" cellpadding="3" style="white-space:nowrap;"><tr><td><table cellspacing="0" cellpadding="0"><tr><td align="center">1</td></tr><tr><td><img src="line.gif" width="12" height="1"></td></tr><tr><td align="center">R0</td></tr></table></td><td>=</td><td><table cellspacing="0" cellpadding="0"><tr><td align="center">1</td></tr><tr><td><img src="line.gif" width="12" height="1"></td></tr><tr><td align="center">R1</td></tr></table></td><td>+</td><td><table cellspacing="0" cellpadding="0"><tr><td align="center">1</td></tr><tr><td><img src="line.gif" width="12" height="1"></td></tr><tr><td align="center">R2</td></tr></table></td><td></td></tr></table>

　追加したcssは、以下の通り。

/* 分数表示用table  */
.bunsuu{
  margin:0px 0px 0px 30px;
}
#main .bunsuu .sen{
  height:1px;
  margin-bottom:3px;
}
#main .bunsuu table{
  line-height: 80%;
  white-space:nowrap;
  padding:0px;
  border:0px;
  margin:0px;
  text-align:left;
  color:inherit;
  width: auto !important;
  table-layout:fixed;
  word-break:break-word;
}
#main .bunsuu th{
  padding:0px;
  margin:0px;
  border:0px;
  text-align:center;
  font-size:small;
}
#main .bunsuu td{
  padding:0px;
  margin:0px;
  border:0px;
  text-align:center;
  font-size:small;
}

　font-size を指定しないと、分数の時とそうでない時で、フォントサイズが変わります。
　cssは、これまで使っていたtableの指定を流用しているので、指定に無駄や、間違いがあるかもしれません。正確に最低限で指定している自信はありません。
　分数の線用の画像 line.gif は、WordPressをインストールしたページに必要なみたいです。