読者です 読者をやめる 読者になる 読者になる

heyheytower

日々のメモです。誰かのお役に立てれば幸いです。

黒背景のブログに、数式を載せるためのメモ

目的

灰色背景で構成されている当ブログにおいて、一般的な数式表示方法では黒文字がデフォルトで視認性が悪い。
数式表示方法の試行錯誤を記載する共に、最終的に Google Chart API を用いた経緯を書く。

要件
  • 背景「黒・灰色」で用いるために、数式は白文字にする。
  • TeX の書式を用いる。
  • 画像を生成する方法は用いない。(白文字・背景透過処理で実現できるが、アップロードが面倒*1

試行錯誤

第一案:はてなmimetex を使う(正攻法だが、白文字不可なので不採用)
  • 数式記載方法

http://d.hatena.ne.jp/keyword/mimetex

当サイトは「テーマ:Nimbus」を用いているため、下記背景色指定を行った。(デフォルトの背景白では数式が浮いてしまうため)

img.tex {
background-color: #303030;
}

引用内の"["は表示のため全角を用いていることに注意)

TeX:{e^{i\pi} = \cos \pi + i \sin \pi \\ \:\:\:\:\:\: =-1}]

{e^{i\pi} = \cos \pi + i \sin \pi \\ \:\:\:\:\:\: =-1}

tex:x^2 + y^2 = z^2]

x^2 + y^2 = z^2

tex:e^{i\pi} = -1]

e^{i\pi} = -1

やはり、灰色背景で黒文字では見難いですし、そのためだけにブログを白背景に設定すること、数式の背景だけ白にすること、は否です。


第二案:webサービスを探す(これらも白文字不可につき不採用)

http://www.forkosh.com/

http://formula.s21g.com/

www.codecogs.com

formulaサービス以外は、アンチエイリアス処理により灰色背景では使い物になりません。


第三案:Google Chart API を用いる(要件を満たすため、採用)

http://webbackwriter.blogspot.jp/2012/06/google-chart-api.htmlを参考にした。


実際のコマンドとしては下記を用いる。*3

$ maxima -q
(%i1) tex(sqrt(y)/5+x^2*%pi);
$${{\sqrt{y}}\over{5}}+\pi\,x^2$$
(%o5) false
(%i2) quit();

$ echo "{{\sqrt{y}}\over{5}}+\pi\,x^2" | perl -MURI::Escape -lne 'print uri_escape($_)'
%7B%7B%5Csqrt%7By%7D%7D%5Cover%7B5%7D%7D%2B%5Cpi%5C%2Cx%5E2

上記のURLエンコード結果を用いて下記タグを作製する。(引用内の"<"は表示のため全角を用いていることに注意)
(数式確認のため、適宜タグテスト - HTMLタグを入力してブラウザ表示チェック/ホームページマスターでタグテストを行います。最終行の式はメモのため)

<img src="http://chart.apis.google.com/chart?
cht=tx&
chf=bg,s,303030&
chco=FFFFFF&
chl=
%7B%7B%5Csqrt%7By%7D%7D%5Cover%7B5%7D%7D%2B%5Cpi%5C%2Cx%5E2
"sqrt(y)/5+x^2*%pi / >


※2013/11/11追記
 +記号などがなければ、URLエンコードがなくとも数式が表示されるようであった。


以上。