« FlatTable の縦長表示 | トップページ | MathJax で可換図式 -2- »

2013年5月19日 (日)

MathJax で可換図式

\(\def\xypic{\mathrm{X\!_{\Large Y}\!{\tiny \boldsymbol -}pic}}\)

MathJax が v2.2 になって、CD環境が使えるようになりました。CDは Commutative Diagrams の略で、これにより可換図式を表示することが出来ます。例えば次のようなものです。
\(\require{AMScd}\) \[ \begin{CD} S^{{\mathcal{W}}_\Lambda}\otimes T @>j>> T\\ @VVV @VV{\operatorname{End} P}V\\ (S\otimes T)/I @= (Z\otimes T)/J \end{CD} \] この機能を使うには、適当な箇所に次のオマジナイを書いておきます。


<script type="text/x-mathjax-config">
    MathJax.Hub.Config({TeX: {extensions: ['AMScd.js']}});
</script>
このスクリプトの代わりに

\(\require{AMScd}\)
を \(\rm\TeX\) コードに入れても同じような効果が得られます。これについては
MathJax v2.2 : Oda 研究室
が参考になりました。

ところで、今回のこの機能、 CD(可換図式)とは言いながら、このCD環境では斜めの線が引けません。これでは満足な可換図式を扱うことが出来ません。\(\rm\TeX\) には \(\xypic\) というものが有って、それは斜め線を引くことが出来ますが、 MathJax に \(\xypic\) は導入されていません。

追記2: MathJax のみでは無理ですが、 \(\xypic\) の MathJax 対応である XyJax を併用すれば、斜め線はもちろん、もっと複雑な図式も扱えます。(当ブログの 状態遷移図を描きたい 参照)

そこで、斜め線の可換図式を書くのに行列を利用してみました。
\[ \begin{array}{ccccc} & & X & & \\ & \small{\bar{u}} \swarrow & \downarrow u & & \\ K & \longrightarrow & A & \longrightarrow & B \\ & \small{j} & & \small{f} & \end{array} \] ただし \(X\) から \(A\) への縦の射線が少しズレています。あまり綺麗とは言えません。

次に、 SVG を使って強引に斜め線を引いてみました。

追記3: タブレットで表示に不具合が生じるため、この部分の可換図式はコメントアウトしました。改良版を「MathJax で可換図式 -2-」で示しています。

この可換図式全体が SVG 画像になっています。コードは次の通りです。なお、射線の位置は、試行錯誤で探りながら決定しました。因みに、 SVG 利用の副産物として、色を部分的に変更することが可能となります。


<svg style="display:block; margin:auto" width="180" height="90" biewBox="0 0 180 90">
<foreignObject x="0" y="0" width="180" height="90">
\(\require{AMScd}\)
\(
    \begin{CD}
        @. X\\
        @. @VVuV\\
        K @>>j> A @>>f> B
    \end{CD}
\)
</foreignObject>
<foreignObject x="40" y="20" width="20" height="20" style="color:#0f0">
\(\small{\bar{u}}\)
</foreignObject>
<path d="M70,20 l-40,30 8,-1 m-8,1 l4,-8" style="stroke:#0f0;stroke-width:0.5;fill:none" />
</svg>

追記1: IEは foreignObject に対応していないのか、 SVG 内では MathJax の表示が出来ないようです。

« FlatTable の縦長表示 | トップページ | MathJax で可換図式 -2- »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/584699/57412768

この記事へのトラックバック一覧です: MathJax で可換図式:

« FlatTable の縦長表示 | トップページ | MathJax で可換図式 -2- »