はてなブログで上付き/下付き文字

そういえば、もしブログにきちんとした見映えの化学式や数式を書きたくなったら必要だよなあ、と調べてみた。

もしかしたら、どうCSSで指定してもキャンセル（無効化）されるタグなのかもと思ったけど、テーマストアからたどれる「テーマ作成の手引き」には sub, sup に関する記載はなく、特に制約はないようだ。

シンプル版

sup {
    vertical-align: baseline;
    position:relative;
    top:-3px
}
sub {
    vertical-align: baseline;
    position:relative;
    top:3px
}

をカスタムCSSに書いておいて、

• 普通に H<sub>2</sub>O と書いたり
• 上付き文字も交えて x<sub>1</sub><sup>2</sup> - x<sub>1</sub> - 1 = 0

で充分な感じがする。

こだわり版

いくつか検索で調べた中で、

• イオンのプラスマイナス記号を（少し）左に寄せる
• 平衡を表す両矢印を規定してしまう

という熟練技があった（from スタイルシートで細かい化学式を作成してみよう）例をそのまま拝借すると、

• 二酸化珪素に沸酸をかけた時
  • SiO2 + 6HF → H2SiF6 + 2H2O
• アンモニア水溶液
  • NH3 + H2O ←→ NH4+ + OH-

*.sub
{
    /* 下付 */
    font-size: 0.8em;
    position: relative;
    top: 0.4em;
}
*.sup
{
    /* 上付（イオン価数） */
    font-size: 0.8em;
    position: relative;
    top: -0.6em;
}
*.ion
{
    /* 下付＋イオン価数 */
    font-size: 0.8em;
    position: relative;
    top: -0.6em;
    left: -0.6em;
}

*.leftarrow
{
   position: relative;
   top: -0.3em;
   left: 0.4em;
}
*.rightarrow
{
   position: relative;
   top: 0.3em;
   right: 0.4em;
}

LaTeX記法希望

CSS3時代、ここまで表現の自由度があがったのなら、インラインでLaTeX記法をつけてくれてもいいのに、と思った。たとえば

• e^{i\pi}=-1 と書くと
  • e^iπ = -1 を美しく（←これが重要）表示してくれるような

ソースに基づいてLaTeX数式を画像出力してくれるOnline Latex Equation Editorはもう世の中にあるので、できなくはないんだろうなあ。アカデミア方面のブログユーザーも確実に増えるはず。こんなことやってくれるのは、アメブロでも他でもないはてなだと思っているけれど。